『解疑』ES6中扩展运算符的用处，解决数组直接赋值给另一个数组，两个数组内容一起改变的问题

最新推荐文章于 2023-05-05 14:30:32 发布

原创最新推荐文章于 2023-05-05 14:30:32 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ES6 #扩展运算符

javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

ES6

3 篇文章

订阅专栏

本文探讨了JavaScript中数组浅拷贝导致的问题，并介绍了一种使用ES6扩展运算符实现深拷贝的方法，确保源数组不会因操作副本而受影响。

问题

用以下代码把arr1直接赋值给arr2的话，我们会发现arr1也一起发生了改变，这是因为我们这样做，其实是对内存堆栈的引用，而不是真正的赋值。

let arr1 = ['www','demoJx','com']
let arr2 = arr1
console.log(arr2) //打印为 ['www','demoJx','com']
arr2.push('one')
console.log(arr1) //打印为['www','demoJx','com','one']

解决

我们把赋值部分修改成let arr2 = […arr1]

利用ES6的扩展运算符，先将arr1扩展出来，即此时…arr1的内容为’www’,‘demoJx’,‘com’

再赋值给arr2，这样才做到真正的赋值

let arr1 = ['www','demoJx','com']
let arr2 = [...arr1] //这里把arr1扩展出来再组成数组
console.log(arr2) //打印为 ['www','demoJx','com']
arr2.push('one')
console.log(arr1) //打印为['www','demoJx','com']