不可变性通过解构从对象中删除键

Question

我有一个结构简化的对象，如下所示：

state = {
  todo: {
    1: {text: 'Buy apples'},
    2: {text: 'Buy milk'}
  }
}

如果我想删除待办事项的不变性，根据 Stack Overflow 上的其他答案，我可以解构待办事项列表：

const idToDelete = 2

let {
  [idToDelete]: deleted,
  ...newTodo
} = state.todo

如果我做 console.log(newTodo)，那么它具有与 state.todo 相同的值，这意味着它没有删除 ID 为 2 的待办事项。如果我 console.log(deleted) 那么它 returns 我要删除的待办事项的内容： {text: 'Buy milk'}.

我知道使用 Immutable.js 之类的库来管理它会更容易一些，但是我想知道为什么解构对象不会删除待办事项。谢谢。

Answer 1

您将需要第 0 阶段来实现您想要的。如果你检查我的代码，你会发现如果你使用字符串来破坏参数，它会按你预期的那样工作，但如果你使用数字变量，结果将是完整的对象。我想这应该是实现中的一个错误。

const state = {
  todo: {
    1: {text: 'Buy apples'},
    2: {text: 'Buy milk'}
  }
}
const id = 1
const { [id]: deleted, ...newTodo } = state.todo

console.log(deleted)
console.log(newTodo)

/********* GOOD EXAMPLE *********/

const { [id.toString()]: del, ...goodNewTodo } = state.todo

console.log(del)
console.log(goodNewTodo)

Answer 2

这在处理字符串键和数字键的方式上似乎有所不同。以我的想法，这似乎不合适，所以我想知道是否有什么地方有错误。

const orig = {
  a:1,
  b:2,
  1:'a',
  2:'b'
};

const {2:val_for_2, ...rest_for_2} = orig;
const {b:val_for_b, ...rest_for_b} = orig;

console.log('val_for_2:', val_for_2);
console.log('rest_for_2:', rest_for_2);
console.log('val_for_b:', val_for_b);
console.log('rest_for_b:', rest_for_b);

// output (as of late Feb, 2017):
// val_for_2: b
// rest_for_2: {
//   "1": "a",
//   "2": "b",
//   "a": 1,
//   "b": 2
// }
// val_for_b: 2
// rest_for_b: {
//   "1": "a",
//   "2": "b",
//   "a": 1
// }

不可变性通过解构从对象中删除键

Immutability removing key from object by destructuring

javascript

immutability

babeljs

ecmascript-next