javascript - 如何同时解构和复制数组？

Question

我知道您可以使用扩展运算符复制数组:

const itemsArr = [...this.state.itemsArr];

你可以解构一个对象键值的数组:

const { itemsArr } = this.state

有没有办法将它们合并为一个步骤？伪代码:

const { itemsArr } = [...this.state]

或

const { [...itemsArr] } = this.state

编辑:有没有办法将它们合并为一个步骤，以避免键入“itemsArr”两次？

Answer 1

这可以通过从 state 的副本中解构 itemsArr 来完成:

const { itemsArr } = JSON.parse(JSON.stringify(this.state))

这样做的优点是你的嵌套对象被克隆，所以你的 state.itemsArr 也被复制并且修改 itemsArr 不会改变 中的数组>状态。缺点是，如果您的 state 对象包含函数，则无法使用此方法访问它们，而且您可能会质疑性能。

另一种复制state的方法是使用Object.assign:

const { itemsArr } = Object.assign({}, this.state)

有了它，您可以访问 state 内部的函数，但它会生成一个浅拷贝，因此 state.itemsArr 不会被克隆。

ECMAScript2018 实际上有一个处理 JSON 对象的扩展运算符:

const { itemsArr } = { ...this.state }

https://codesandbox.io/s/32qvzjy2op (看看你浏览器的控制台，工具里那个是坏的)。

但话又说回来，它只做了一个浅拷贝。

最好的方法是编写/导入一个 deepCopy 函数来克隆具有嵌套属性和函数的对象。

https://lodash.com/docs#cloneDeep