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

Question

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

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

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

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

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

预期的最终结果:

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

Answer 1

要生成具有更新值的新对象，您可以使用 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)