如何使用JavaScript删除字典列表中嵌套数组内的指定值

你可以通过Array.find()定位目标对象，再配合Array.filter()过滤数组元素实现需求，代码最简单易懂： #

版本1：直接修改原数组 #

// 你的原始数组
const fruitList = [
    {
        "name": "apple",
        "values": [1, 2, 3, 4]
    },
    {
        "name": "orange",
        "values": [1, 2, 3, 4]
    },
    {
        "name": "pear",
        "values": [1, 2, 3, 4]
    },
]

function deleteData(targetName, deleteVal) {
    // 找到name匹配的对象
    const target = fruitList.find(item => item.name === targetName)
    // 找到目标后过滤values数组，移除要删除的值
    if (target) {
        target.values = target.values.filter(val => val !== deleteVal)
    }
}

调用deleteData("apple", 1)后，原始数组就会变成你预期的结构。 #

版本2：不修改原数组，返回新数组 #

如果你需要保留原始数据不被改动，可以用Array.map()生成新数组：

function deleteData(targetName, deleteVal, originalArr) {
    return originalArr.map(item => {
        // 不匹配的项直接返回
        if (item.name !== targetName) return item
        // 匹配的项返回新对象，避免改动原数据
        return {
            ...item,
            values: item.values.filter(val => val !== deleteVal)
        }
    })
}

调用方式：const newFruitList = deleteData("apple", 1, fruitList) #

补充说明 #

• 如果你的values数组里可能存在多个相同的待删除值，且只需要删除第一个匹配项，可以把过滤逻辑替换为：

  const delIndex = target.values.indexOf(deleteVal)
  if (delIndex > -1) target.values.splice(delIndex, 1)
  

• 如果是类的私有方法，直接把原始数组绑定到this上即可，示例（TypeScript写法）：

  class DemoService {
    private fruitList = [/* 原始数组 */]
  
    private deleteData(targetName: string, deleteVal: number) {
        const target = this.fruitList.find(item => item.name === targetName)
        if (target) {
            target.values = target.values.filter(val => val !== deleteVal)
        }
    }
  }
  

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