如何从 React JS (ES6) 中对象内部的数组中删除元素

Question

我想从对象内部的数组中删除一个元素，并用新值覆盖该对象。请参见下面的示例。

var obj = {
  a: [1, 2, 3],
  b: [4, 5, 6],
  c: [7, 8, 9]
}

我想从obj 中删除数字 5，但不知道该元素在哪个数组中。

我正在尝试使用 Context API 更新响应状态。它应该直接返回对象本身。

case ACTION: return {
  ...state,
  obj: ?
}

预期的最终结果：

var obj = {
  a: [1, 2, 3],
  b: [4, 6],
  c: [7, 8, 9]
}

Answer 1

恕我直言，最简单的方法是splice该数组：

obj.b.splice(1, 1);

编辑：
如果您不知道该项目的位置（根据评论），您可以查看所有项目，并过滤每个数组：

const toRemove = 5;
Object.keys(obj).forEach(k => {
    obj[k] = obj[k].filter(i => i != toRemove);
});

Answer 2

要生成具有更新值的新对象，您可以使用Object.entries() 将对象转换为 [key, value] 的条目。映射条目，过滤值数组，然后将条目转换回带有Object.fromEntries()的对象：

const fn = (obj, item) =>
  Object.fromEntries(
    Object.entries(obj)
      .map(([k, v]) => [k, v.filter(o => o !== item)])
  )

const obj = {
  a: [1, 2, 3],
  b: [4, 6],
  c: [7, 8, 9]
}

const result = fn(obj, 5)

console.log(result)

这里有一个小问题，可能会导致不必要的渲染 - 因为我们过滤了所有数组，所以每个数组都是新的，即使该数组开始时不存在该项目。我们可以通过在过滤之前检查数组是否实际包含该项目来解决这个问题。这可能是过早的优化，应该进行分析。

const fn = (obj, item) =>
  Object.fromEntries(
    Object.entries(obj)
      .map(e => e[1].includes(item) ? [e[0], e[1].filter(o => o !== item)] : e)
  )

const obj = {
  a: [1, 2, 3],
  b: [4, 6],
  c: [7, 8, 9]
}

const result = fn(obj, 5)

console.log(result.c === obj.c) // c didn't change

console.log(result)

如果您的环境不支持Object.fromEntries()，您可以轻松地将其替换为基于Array.reduce()的函数：

const fromEntries = entries =>
  entries.reduce((obj, [k, v]) => {
    obj[k] = v
  
    return obj
  }, {})

const fn = (obj, item) =>
  fromEntries(
    Object.entries(obj)
      .map(([k, v]) => [k, v.filter(o => o !== item)])
  )

const obj = {
  a: [1, 2, 3],
  b: [4, 6],
  c: [7, 8, 9]
}

const result = fn(obj, 5)

console.log(result)