如何使用JavaScript移除对象属性数组中的指定元素值

你操作失败的核心原因是错误使用了this关键字：你声明的cardValue是当前作用域下的普通变量，并没有挂载到当前上下文的this对象上，执行this.cardValue时会得到undefined，后续读取options、调用splice的逻辑自然无法正常运行。

修复原有写法 #

直接去掉多余的this引用，直接访问声明的cardValue变量即可：

const appDiv = document.getElementById('app');
appDiv.innerHTML = `<h1>JS Starter</h1>`;

var cardValue = {
  options: ['Bus', 'Car', 'Motor'],
};

const index = cardValue.options.indexOf('Bus');
if (index > -1) {
  cardValue.options.splice(index, 1);
}

console.log(cardValue.options); // 输出结果: ['Car', 'Motor']

配套的页面结构：

<div id="app"></div>

其他可选实现方案 #

• 不修改原数组的方案（推荐用于需要保留原始数据的场景）：用filter生成排除目标值的新数组

// 会返回新数组，不会改动原options数组
cardValue.options = cardValue.options.filter(option => option !== 'Bus');

• 如果数组中存在多个相同的待删除值，filter方案可以一次性移除所有匹配项，不需要手动循环处理索引偏移问题，比splice写法更简洁。

注意：Array.prototype.splice会直接修改原数组，如果后续业务逻辑还需要用到原始的options数据，不要使用该方法，优先选择filter生成新数组的方案。

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