對象數組

【引出問題】

一個數組裏有多個對象，如何根據對象某個相同屬性，從新組成新數組，以下：

data= [{group: "文字", name: "DEVCODE", unit: "", value: ""},
{group: "約束", name: "與鄰近圖元一同移動", unit: "", value: "否"},
{group: "約束", name: "主體", unit: "", value: "標高 : 標高 1"}
];

data1= [{
"group": "約束",
infoList: [{
name: "DEVCODE",
unit: "",
value: ""
}]
},{
"group": "約束",
infoList: [{
name: "與鄰近圖元一同移動",
unit: "",
value: "否"
},{
name: "主體",
unit: "",
value: "標高 : 標高 1"
}]
}];

 

【示例代碼--解答】

//一個數組裏有多個對象，如何根據對象某個相同屬性，從新組成新數組
function trans (data, keys) {
let cache = {};
return data.reduce((sum, cur) => {
let obj = {};
let key = keys.reduce((sum, key) => {
let tmp = obj[key] = cur[key];
delete cur[key];
return sum + tmp;
}, '');

let i = cache[key];
if (i !== undefined) {
sum[i].infoList.push(cur);
} else {
cache[key] = sum.length;
sum.push(Object.assign(obj, {infoList: [cur]}));
}
return sum;
}, []);
}

//構件詳情彈框的信息展現
//1-基本屬性 --bim信息
sdk.getCompBimInfo(curCompId, function (curBimInfo) {
//獲取構件bim信息
console.log(curBimInfo);
$('#m_tabs_1_1').empty();

var htmlObj,htmlObj_1,htmlObj_2 = '';
htmlObj_1 = '<div class="b-portlet b-portlet--creative">\n' +
' <div class="b-portlet__head">\n' +
' <span class="b-portlet__title">基本信息</span>\n' +
' </div>\n' +
' <div class="b-portlet__body">\n' +
' <div class="row-wrap-unoffset bim-info-list">\n' +
' <div class="col-lg-2 col-md-2 col-sm-12 bim-info-label">名稱</div>\n' +
' <div class="col-lg-4 col-md-4 col-sm-12 bim-info-value">'+ curBimInfo.name +'</div>\n' +
' <div class="col-lg-2 col-md-2 col-sm-12 bim-info-label">大類</div>\n' +
' <div class="col-lg-4 col-md-4 col-sm-12 bim-info-value">'+ curBimInfo.dalei +'</div>\n' +
' <div class="col-lg-2 col-md-2 col-sm-12 bim-info-label">小類</div>\n' +
' <div class="col-lg-4 col-md-4 col-sm-12 bim-info-value">'+ curBimInfo.xiaolei +'</div>\n' +
' </div>\n' +
' </div>\n' +
' </div>';

//處理bim數據，props數組按照group去分類展現
let propsList = trans(curBimInfo.props, ['group']); //props對象數組從新組合
console.log(propsList);

for(let j=0; j<propsList.length; j++){
let listItemWrap_b,listItemWrap_e,listItem = '';
let wrapData = propsList[j];
listItemWrap_b = '<div class="b-portlet b-portlet--creative">\n' +
'<div class="b-portlet__head">\n' +
'<span class="b-portlet__title">'+ wrapData.group +'</span>\n' +
'</div>\n' +
'<div class="b-portlet__body">\n' +
'<div class="row-wrap-unoffset bim-info-list">\n';
listItemWrap_e = '</div>\n'+
'</div>\n' +
'</div>';
for(let k=0; k<wrapData.infoList.length; k++){
let itemData = wrapData.infoList[k];
listItem +=
'<div class="col-lg-2 col-md-2 col-sm-12 bim-info-label">'+ itemData.name +'</div>\n' +
'<div class="col-lg-4 col-md-4 col-sm-12 bim-info-value">'+ itemData.value + itemData.unit +'</div>\n';
}
htmlObj_2 += listItemWrap_b + listItem + listItemWrap_e;
}

htmlObj = htmlObj_1 + htmlObj_2;
$('#m_tabs_1_1').html(htmlObj);

});

 

【知識學習】

一、JS數組reduce方法

reduce() 方法接收一個函數做爲累加器（accumulator），數組中的每一個值（從左到右）開始縮減，最終爲一個值。

reduce 爲數組中的每個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元素，接受四個參數：初始值（或者上一次回調函數的返回值），當前元素值，當前索引，調用 reduce 的數組。

語法:

arr.reduce(callback,[initialValue])

• callback （執行數組中每一個值的函數，包含四個參數）

  • previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
  • currentValue （數組中當前被處理的元素）
  • index （當前元素在數組中的索引）
  • array （調用 reduce 的數組）
• initialValue （做爲第一次調用 callback 的第一個參數。）

參考【https://segmentfault.com/a/1190000010731933?utm_source=tag-newest】

二、JS：Object.assign()方法

Object.assign() 方法用於將全部可枚舉屬性的值從一個或多個源對象複製到目標對象。它將返回目標對象。

Object.assign(target, ...sources);

參數：

• target: 目標對象
• sources: 源對象

返回值：

*目標對象

若是目標對象中的屬性具備相同的鍵，則屬性將被源中的屬性覆蓋。後來的源的屬性將相似地覆蓋早先的屬性。
Object.assign 方法只會拷貝源對象自身的而且可枚舉的屬性到目標對象。該方法使用源對象的 [[Get]]和目標對象的 [[Set]]，因此它會調用相關 getter 和 setter。所以，它分配屬性，而不單單是複製或定義新的屬性。若是合併源包含getter，這可能使其不適合將新屬性合併到原型中。爲了將屬性定義（包括其可枚舉性）複製到原型，應使用 Object.getOwnPropertyDescriptor()和 Object.defineProperty() 。
String類型和 Symbol類型的屬性都會被拷貝。
在出現錯誤的狀況下，例如，若是屬性不可寫，會引起 TypeError，若是在引起錯誤以前添加了任何屬性，則能夠更改 target對象。
注意， Object.assign 不會跳過那些值爲 [ null] 或 [ undefined]的源對象。

 例子：

const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({c: 4, d: 5}, object1); console.log(object2.c, object2.d); // expected output: 3 5

----------------------------------------------------------
【對象轉數組】
【需求】如何把一個對象{'未完成':5, '已完成':8, '待確認':4, '已取消':6}轉爲[{"未完成":5},{"已完成":8},{"待確認":4},{"已取消":6}]
【解答】
let obj = {'未完成':5, '已完成':8, '待確認':4, '已取消':6};
var arr = [] ;
for (let i in obj) { 
let o = {}; 
o[i] = obj[i]; 
arr.push(o)
 } 
console.log(arr);