如何從 React JS (ES6) 中 object 中的數組中刪除元素

Question

我想從 object 內的數組中刪除一個元素，並用新值覆蓋該 object。 請參見下面的示例。

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

我想從obj中刪除數字 5 而不知道元素在哪個數組中。

編輯：我正在嘗試使用上下文 API 在反應中更新 state。 它應該直接返回 object 本身。

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);

編輯：
如果您不知道該項目的位置（根據評論），您可以 go 將它們全部覆蓋，並過濾每個數組：

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

Answer 2

要生成具有更新值的新 object，您可以使用Object.entries()將 object 轉換為 [key, value] 的條目。 Map 條目，過濾值數組，然后將條目轉換回 object 與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)

這里有一個小問題，可能會導致不必要的渲染 - 因為我們過濾了所有 arrays，所以每個數組都是新的，即使該數組開始時不存在該項目。 我們可以通過在過濾之前檢查數組是否實際包含該項目來解決這個問題。 這可能是過早的優化，應該進行分析。

 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()的 function ：

 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)