如何为数组每个元素追加对象？cart数据赋值异常排查

我看了你遇到的问题，核心是要把cart数组里每个订单的order对象，合并到该订单下的每一个items子对象里，最终生成一个扁平化的数组，每个元素都包含item的属性和对应的order信息对吧？

先说说你之前尝试的代码里的问题：

• 第一种尝试里用了cart[i]['items'][j].push(...)：push是数组的方法，但cart[i]['items'][j]是一个对象，不是数组，所以这行代码会直接报错，根本执行不下去，自然没法给item添加order属性。
• 第二种尝试里你把赋值代码注释掉了，那当然不会有order属性被添加；就算不注释，JSON.stringify(JSON.parse(cart[i]['order']))虽然能深拷贝order，但直接赋值给原item对象会修改原始的cart数据，这可能不是你想要的（如果之后还要用原cart的话）。

正确的解法 #

我们需要做的是遍历每个订单，再遍历订单里的每个item，把item和对应的order合并成新对象，这样既不会修改原始数据，又能得到你想要的结构。

写法一：用for循环（和你原来的写法风格一致）

let cart = JSON.parse(localStorage.getItem('cart-data'));
let nData = [];

for (let i = 0; i < cart.length; i++) {
  const currentOrder = cart[i];
  const orderObj = currentOrder.order;
  const items = currentOrder.items;
  
  for (let j = 0; j < items.length; j++) {
    // 用展开运算符创建新对象，把item的属性和order对象合并
    // 给order也做一层展开，避免后续修改orderObj影响所有合并后的item
    const mergedItem = {
      ...items[j],
      order: { ...orderObj }
    };
    nData.push(mergedItem);
  }
}

console.log(nData);

写法二：用数组方法（更简洁）

如果习惯用ES6的数组方法，可以用flatMap和map来实现，代码更简洁：

let cart = JSON.parse(localStorage.getItem('cart-data'));

const nData = cart.flatMap(orderItem => {
  // 解构出当前订单的order和items
  const { order, items } = orderItem;
  // 把每个item和order合并成新对象，返回的数组会被flatMap自动扁平化
  return items.map(item => ({
    ...item,
    order: { ...order }
  }));
});

console.log(nData);

为什么要展开order对象？ #

这里给order做{ ...order }的展开是为了创建一个新的对象副本，避免所有合并后的item都引用同一个order对象。如果之后你修改了某个item里的order属性，不会影响到其他item的order，也不会修改原始cart里的order数据。如果你的order对象里没有嵌套的子对象，其实直接赋值order: order也能工作，但用展开的方式更安全，能避免潜在的引用问题。

这样运行后，nData的结构就和你预期的完全一致了。

内容的提问来源于stack exchange，提问作者ang