我正在使用 Angular 13，我有一個這樣的物件陣列：
[{
"name": "Operating System",
"checkedCount": 0,
"children": [{
"name": "Linux",
"value": "Redhat",
"checked": true
},
{
"name": "Windows",
"value": "Windows 10"
}
]
},
{
"name": "Software",
"checkedCount": 0,
"children": [{
"name": "Photoshop",
"value": "PS",
"checked": true
},
{
"name": "Dreamweaver",
"value": "DW"
},
{
"name": "Fireworks",
"value": "FW",
"checked": true
}
]
}
]
我想遍歷陣列，檢查每個物件是否有一個children陣列，它又是否有一個checked設定為 的屬性true，那么我應該更新checkedCount父物件中的 。所以，結果應該是這樣的：
[{
"name": "Operating System",
"checkedCount": 1,
"children": [{
"name": "Linux",
"value": "Redhat",
"checked": true
},
{
"name": "Windows",
"value": "Windows 10"
}
]
},
{
"name": "Software",
"checkedCount": 2,
"children": [{
"name": "Photoshop",
"value": "PS",
"checked": true
},
{
"name": "Dreamweaver",
"value": "DW"
},
{
"name": "Fireworks",
"value": "FW",
"checked": true
}
]
}
]
我嘗試以角度方式這樣做，但這效率低下，并導致錯誤提示this.allFilters[i].children[j]可能未定義。因此，尋找一種有效的方式來做到這一點。
for(let j=0;i<this.allFilters[i].children.length; j ) {
if (Object.keys(this.allFilters[i].children[j]).length > 0) {
if (Object.prototype.hasOwnProperty.call(this.allFilters[i].children[j], 'checked')) {
if(this.allFilters[i].children[j].checked) {
this.allFilters[i].checkedCount ;
}
}
}
}
uj5u.com熱心網友回復：
使用嵌套的 for 回圈檢查所有子項。如果checked是真的，增加父母的計數。您不需要檢查是否parent.children有任何元素，因為如果沒有元素，則回圈無論如何都不會運行。
// minified data
const data = [{"name":"Operating System","checkedCount":0,"children":[{"name":"Linux","value":"Redhat","checked":!0},{"name":"Windows","value":"Windows 10"}]},{"name":"Software","checkedCount":0,"children":[{"name":"Photoshop","value":"PS","checked":!0},{"name":"Dreamweaver","value":"DW"},{"name":"Fireworks","value":"FW","checked":!0}]}];
for (const parent of data) {
for (const child of parent.children) {
if (child.checked) parent.checkedCount ;
}
}
console.log(data);uj5u.com熱心網友回復：
您想迭代陣列中的專案，所以讓我們使用Array#forEach并且，對于陣列中的每個專案，您想要更新一些屬性。
const input = []; // Your data here.
input.forEach(item => {
item.checkedCount = // ...
});
看起來您想通過將設定為的屬性children數相加來將陣列聚合為整數。由于我們在一個陣列上進行聚合，讓我們使用. 該函式將獲取當前迭代的聚合值 ( )、當前迭代的專案 ( ) 和( ) 的默認值。checkedtrueArray#reduceaggcuragg0
const input = []; // Your data here.
input.forEach(item => {
item.checkedCount = item.children.reduce((agg, cur) => {
// ...
}, 0);
});
agg每次迭代，如果當前專案的checked欄位存在且為真，我們將添加到聚合值 ( )。
const input = []; // Your data here.
input.forEach(item => {
item.checkedCount = item.children.reduce((agg, cur) => {
if (cur.checked) {
return agg 1;
} else {
return agg;
}
}, 0);
});
把它放在一起并清理它：
const input = [{name:"Operating System",checkedCount:NaN,children:[{name:"Linux",value:"Redhat",checked:!0},{name:"Windows",value:"Windows 10"}]},{name:"Software",checkedCount:NaN,children:[{name:"Photoshop",value:"PS",checked:!0},{name:"Dreamweaver",value:"DW"},{name:"Fireworks",value:"FW",checked:!0}]}];
input.forEach(item => {
item.checkedCount = item.children.reduce((agg, cur) => {
return cur.checked ? agg 1 : agg;
}, 0);
});
console.dir(input);uj5u.com熱心網友回復：
在陣列上使用filter 應該可以完成這項作業：lengthchildren
const data = [{"name":"Operating System","checkedCount":null,"children":[{"name":"Linux","value":"Redhat","checked":true},{"name":"Windows","value":"Windows 10"}]},{"name":"Software","checkedCount":null,"children":[{"name":"Photoshop","value":"PS","checked":true},{"name":"Dreamweaver","value":"DW"},{"name":"Fireworks","value":"FW","checked":true}]}];
data.forEach(itm => {
itm.checkedCount = itm.children?.filter(e => e.checked === true).length ?? 0;
});
console.log(input);uj5u.com熱心網友回復：
無需像那樣復雜化，您只需要檢查子項中的已檢查屬性即可。
data.forEach((v) => {
v.children.forEach((child) => {
if (child.checked) {
v.checkedCount ;
}
});
});
uj5u.com熱心網友回復：
我會建議去功能。
使用map
const children = arr.map(obj => obj.children);
const result = children.map((child, idx) => {
const checkedCount = child.filter(obj => obj.checked)?.length;
return {
...arr[idx],
checkedCount
};
});
console.log(result)
或使用forEach
const result = [];
const children = arr.map(obj => obj.children);
children.forEach((child, idx) => {
const checkedCount = child.filter(obj => obj.checked)?.length;
result[idx] = {
...arr[idx],
checkedCount
};
});
console.log(result)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/528985.html