JavaScript向对象数组push多个元素仅能插入单个元素问题求解

问题排查与修复方案 #

现有代码的核心错误

• addItem 方法第一行 cart.contents = (item) 会直接覆盖原有购物车数组，导致之前添加的内容全部丢失，多次调用后只会保留最后一次传入的值
• 方法仅声明了单个入参item，无法支持多参数同时传入的需求
• 直接调用contents.push会抛出未定义错误，方法内访问对象属性需要加this或者cart前缀
• 若传入普通字符串时展开item，会把字符串拆成单个字符插入数组，不符合需求
• removeItem用delete操作数组只会清空对应下标的值，会留下空占位符，无法真正移除数组元素

修正后可运行代码

const cart = {
  contents: [],
  // 剩余参数语法接收任意数量的入参，支持多参传值
  addItem(...items) {
    // 追加所有传入的元素到购物车数组
    this.contents.push(...items);
  },
  removeItem(deletedItem) {
    // 过滤掉要删除的元素，生成新数组
    this.contents = this.contents.filter(item => item !== deletedItem);
  }
};

// 单参数调用
cart.addItem("laptop");
// 多参数同时调用，和console.log传参方式一致
cart.addItem("guitar", "phone", "forks", "juice");

cart.removeItem("guitar");
console.log(`The cart contains: ${cart.contents}`);
// 输出：The cart contains: laptop,phone,forks,juice

改动说明

• 用剩余参数...items接收任意数量的入参，完美匹配你要的类似console.log的传参方式
• 删除了错误覆盖购物车数组的代码，直接用push追加新元素，不会丢失之前的内容
• 用this.contents访问对象属性，代码更规范易维护
• 把delete改为filter实现正确的元素移除逻辑，不会残留空占位符

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