JavaScript过滤子数组时如何保留主数组的完整数据字段

代码调整方案 #

你的原代码在map遍历的时候仅返回了过滤后的orderedItems数组，丢弃了原对象的id等其他字段，调整时只要保留原对象所有字段，仅替换orderedItems为过滤后的结果即可，调整后代码如下：

const data = [
  {
    id: 6,
    orderedItems: [
      {
        name: "Product A",
        vendor: 1,
      },
      {
        name: "Product B",
        vendor: 1,
      },
      {
        name: "Product B",
        vendor: 2,
      },
    ],
  },
  {
    id: 5,
    orderedItems: [
      {
        name: "Product Aaa",
        vendor: 1,
      },
      {
        name: "Product Bbb",
        vendor: 1,
      },
      {
        name: "Product Ccc",
        vendor: 2,
      },
    ],
  },
];

const userId = 1;

const filteredData = data.map(item => {
  // 扩展运算符保留原对象所有字段，仅覆盖orderedItems
  return {
    ...item,
    orderedItems: item.orderedItems.filter(({ vendor }) => vendor === userId)
  }
});

console.log(filteredData);

兼容旧环境写法 #

如果需要兼容不支持ES6扩展运算符的运行环境，可以用Object.assign实现相同效果：

const filteredData = data.map(function(item) {
  // 基于原对象生成新对象，避免修改原数据
  var newItem = Object.assign({}, item);
  newItem.orderedItems = item.orderedItems.filter(function(subItem) {
    return subItem.vendor === userId;
  });
  return newItem;
})

运行上述代码后输出结果完全符合你期望的格式，且不会修改原始data数组的数据。

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