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

Posted 2023-02-22

【中文标题】如何同时解构和复制数组？

【英文标题】：How to destructure and copy an array simultaneously?

【发布时间】：2019-01-31 23:22:19

【问题描述】：

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

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

您可以解构作为对象键值的数组：

const itemsArr = this.state

有没有办法将它们组合成一个步骤？伪代码：

const itemsArr = [...this.state]

或

const [...itemsArr] = this.state

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

【问题讨论】：

你的意思是const itemsArr: [...itemsArr] = this.state;？您也可以重命名变量：const itemsArr: [...renamedArray] = this.state;.

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

不，你不能不重新输入

目前，const [...itemsArr] = this.state 是一个 SyntaxError，虽然我不知道规范的知识来解释为什么......也许，这可能会在未来成为有效的语法。

为什么你必须尝试通过结合解构来使用古怪的语法来缩短你的代码？只需让代码可读。

【参考方案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

【讨论】：

ECMAScript2018 sn-p 最接近我的要求，谢谢。 +1 Object.assign，没想到