資料是一個陣列，其中包含一些物件。這里的目標是合并具有相同 x 和 y 值的物件。
代碼如下：
let data = [{ "x": 1, "y": 2, "color": "red" }, { "x": 1, "y": 2, "stroke": "violet" }, { "x": 3, "y": 4, "color": "green" }, { "x": 3, "y": 4, "stroke": "blue" }];
var finalArr = data.reduce((m, o) => {
var found = m.find(p => (p.x === o.x) && (p.y === o.y) );
if (found) {
found = {...o}
} else {
m.push(o);
}
return m;
}, []);原始資料陣列是：
let data = [
{ "x": 1, "y": 2, "color": "red" },
{ "x": 1, "y": 2, "stroke": "violet" },
{ "x": 3, "y": 4, "color": "green" },
{ "x": 3, "y": 4, "stroke": "blue" }
];
預期結果是：
let data = [
{ "x": 1, "y": 2, "color": "red", "stroke": "violet" },
{ "x": 3, "y": 4, "color": "green", "stroke": "blue" }
];
uj5u.com熱心網友回復：
您可以使用帶有連接鍵的物件并將實際物件分配給該組的物件。
const
data = [{ x: 1, y: 2, color: "red" }, { x: 1, y: 2, stroke: "violet" }, { x: 3, y: 4, color: "green" }, { x: 3, y: 4, stroke: "blue" }],
getKey = o => [o.x, o.y].join('|'),
result = Object.values(data.reduce((r, o) => {
Object.assign(r[getKey(o)] ??= {}, o);
return r;
}, {}));
console.log(result);.as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
首先，將 x 和 y 鍵對的鍵值對累積，最后將 x 和 y 作為值累積到同一級別。
這也行。
const data = [
{ x: 1, y: 2, color: "red" },
{ x: 1, y: 2, stroke: "violet" },
{ x: 3, y: 4, color: "green" },
{ x: 3, y: 4, stroke: "blue" },
];
const output = Object.entries(
data.reduce((prev, { x, y, ...rest }) => {
if (prev[`${x}-${y}`]) {
prev[`${x}-${y}`] = { ...prev[`${x}-${y}`], ...rest };
} else {
prev[`${x}-${y}`] = { ...rest };
}
return prev;
}, {})
).map(([key, value]) => {
const [x, y] = key.split("-");
return { x, y, ...value };
});
console.log(output);uj5u.com熱心網友回復：
只需這樣做
let data = [{ "x": 1, "y": 2, "color": "red" }, { "x": 1, "y": 2, "stroke": "violet" }, { "x": 3, "y": 4, "color": "green" }, { "x": 3, "y": 4, "stroke": "blue" }];
let result = data.reduce((acc, d ) => {
acc[d.x] ??= {x: d.x, y: d.y };
acc[d.x].stroke = d.stroke;
acc[d.x].color = d.color;
return acc;
}, {});
console.log(Object.values(result));轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448354.html
標籤：javascript 数组 目的
上一篇：將陣列轉換為表模式的物件