如何在JavaScript中删除数组元素并生成新数组

问题场景 #

给定如下初始数组：

const initialArray = [
  {
    "idProduct": 1,
    "id": 1,
    "name": "MacBook Air M1 2020 (RAM 8GB | 256GB SSD)",
    "image": "https://i.ibb.co/tzNm2jB/macbookairm1.png",
    "price": 20000000,
    "ram": "8GB",
    "color": "#fbecd3",
    "storage": "256GB"
  },
  {
    "idProduct": 2,
    "id": 1,
    "name": "MacBook Air M1 2020 (RAM 16GB | 256GB SSD)",
    "image": "https://i.ibb.co/tzNm2jB/macbookairm1.png",
    "price": 25000000,
    "ram": "16GB",
    "color": "#fbecd3",
    "storage": "256GB"
  },
  {
    "idProduct": 3,
    "id": 1,
    "name": "MacBook Air M1 2020 (RAM 8GB | 512GB SSD)",
    "image": "https://i.ibb.co/tzNm2jB/macbookairm1.png",
    "price": 23000000,
    "ram": "8GB",
    "color": "#fbecd3",
    "storage": "512GB"
  },
  {
    "idProduct": 4,
    "id": 1,
    "name": "MacBook Air M1 2020 (RAM 16GB | 512GB SSD)",
    "image": "https://i.ibb.co/tzNm2jB/macbookairm1.png",
    "price": 28000000,
    "ram": "16GB",
    "color": "#fbecd3",
    "storage": "512GB"
  },
  {
    "idProduct": 1,
    "id": 2,
    "name": "iPhone 13 Pro Max 256GB",
    "image": "https://i.ibb.co/9qFqM5g/iphone-13-pro-green-profile.png",
    "price": 30000000,
    "color": "green",
    "storage": "256GB"
  },
  {
    "idProduct": 2,
    "id": 2,
    "name": "iPhone 13 Pro Max 128GB",
    "price": 28000000,
    "image": "https://i.ibb.co/9VGBNV6/iphone-13-pro-gold-profile.png",
    "color": "#fbecd3",
    "storage": "128GB"
  },
  {
    "idProduct": 3,
    "id": 2,
    "name": "iPhone 13 Pro Max 256GB",
    "price": 30500000,
    "image": "https://i.ibb.co/9VGBNV6/iphone-13-pro-gold-profile.png",
    "color": "#fbecd3",
    "storage": "256GB"
  },
  {
    "idProduct": 4,
    "id": 2,
    "name": "iPhone 13 Pro Max 128GB",
    "price": 27000000,
    "image": "https://i.ibb.co/9qFqM5g/iphone-13-pro-green-profile.png",
    "color": "green",
    "storage": "128GB"
  }
];

需要删除的元素：

const itemToRemove = {
  "idProduct": 3,
  "id": 2,
  "name": "iPhone 13 Pro Max 256GB",
  "price": 30500000,
  "image": "https://i.ibb.co/9VGBNV6/iphone-13-pro-gold-profile.png",
  "color": "#fbecd3",
  "storage": "256GB"
};

期望得到一个不包含该元素的新数组。

解决方案 #

方法1：使用Array.filter()（推荐）

filter()方法会创建一个新数组，包含所有通过测试的元素。因为对象是引用类型，不能直接用===判断相等，我们可以用元素的唯一标识（比如id和idProduct的组合）来过滤掉目标元素。

代码示例：

// 通过唯一标识过滤
const newArray = initialArray.filter(item => 
  item.id !== itemToRemove.id || item.idProduct !== itemToRemove.idProduct
);

console.log(newArray);

如果需要严格比较对象的所有字段（比如不确定唯一标识是否可靠），可以写一个辅助函数来深比较：

// 辅助函数：比较两个对象的所有字段是否相等
function isEqual(obj1, obj2) {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

const newArray = initialArray.filter(item => !isEqual(item, itemToRemove));

console.log(newArray);

注意：JSON.stringify()的方式有局限性，比如字段顺序不同、包含函数或undefined时会有问题，适合字段简单且顺序固定的场景。

方法2：使用Array.findIndex() + Array.slice()

先找到目标元素的索引，然后通过slice()拼接成新数组，同样不修改原数组：

const index = initialArray.findIndex(item => 
  item.id === itemToRemove.id && item.idProduct === itemToRemove.idProduct
);

const newArray = index !== -1 
  ? [...initialArray.slice(0, index), ...initialArray.slice(index + 1)]
  : [...initialArray];

console.log(newArray);

关键说明 #

• 以上方法都不会修改原数组，而是返回一个新数组，符合你获取新数组的需求。
• 优先使用基于唯一标识的过滤方法，效率更高且更可靠，避免深比较带来的性能问题。

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