如何同时解构和复制一个数组？

Question

我知道你可以使用展开运算符复制一个数组：

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

你也可以解构一个作为对象键值的数组：

const { itemsArr } = this.state

有没有一种方法将它们合并为一步？伪代码如下：

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

或者

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

编辑：有没有一种方法将它们合并为一步，以避免两次输入“itemsArr”？

- Ivan Durst

---

你的意思是像这样 const {itemsArr: [...itemsArr]} = this.state; 吗？你也可以将变量重命名为 const {itemsArr: [...renamedArray]} = this.state;。 - Sebastian Simon

@Xufox 没有想到过这种方式——本质上与const itemsArr = [...this.state.itemsArr]相同，对吗？目标是避免两次输入“itemsArr” ——我会在我的问题中添加这个注释。谢谢！ - Ivan Durst

目前，const {[...itemsArr]} = this.state 是语法错误，尽管我没有足够的规范知识来解释原因，也许在将来这可能会成为有效的语法。 - Sebastian Simon

为什么你要试图通过结构解构的奇怪语法来缩短你的代码呢？只需让代码易读即可。 - Andrew Li

看起来spread运算符适用于数组，而解构赋值适用于字面对象，因此您需要将一些转换为另一种形式。 - Emeeus

Answer 1

可以通过解构 state 的副本中的 itemsArr 来完成：

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

这种方法的优点是可以克隆嵌套对象，因此您的state.itemsArr也会被复制，修改itemsArr不会改变state中的数组。 缺点是如果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

- dziraf

---

ECMAScript2018的片段是我正在寻找的，谢谢。Object.assign加1，没想到。 - Ivan Durst