JavaScript中复制数组的14个技巧

数组复制经常被误解，不是因为复制过程本身，而是因为缺乏对JS如何处理数组及其元素的理解。JS中的数组是可变的，也就是说数组创建后可以修改数组的内容。这意味着要复制一个数组，我们不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量后，另一个变量也会受到更改的影响。这就是为什么我们需要克隆这个数组。让我们来看看复制和克隆数组的一些有趣的方法和技巧。Trick1-使用Array.slice方法constnumbers=[1,2,3,4,5]constcopy=numbers.slice()copy.push(6)//添加新项证明原数组不会被修改console.log(copy)console.log(numbers)//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧2-使用Array.mapmethodconstnumbers=[1,2,3,4,5]constcopy=numbers.map(num=>num)copy.push(6)//添加新项证明原数组不会被修改console.log(复制）;console.log(numbers);//output//[1,2,3,4,5,6]//[1,2,3,4,5]技巧3-使用Array.from方法constnumbers=[1,2,3,4,5];constcopy=Array.from(newSet(numbers));copy.push(6);//新增一项证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧4-使用展开运算符constnumbers=[1,2,3,4,5];constcopy=[...numbers];copy.push(6);//新增一项证明不会修改原数组console.log(copy);console.log(numbers);//Output//[1,2,3,4,5,6]//[1,2,3,4,5]技巧5-使用Array.of方法和传播operatorconstnumbers=[1,2,3,4,5];constcopy=Array.of(...numbers);copy.push(6);//新增一项，证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]Array.of()方法创建一个具有可变数量参数的新数组实例，无论参数数量或类型如何Array.of()和Array构造函数之间的区别在于对整数参数的处理：Array.of(7)创建一个包含单个元素7的数组，而Array(7)创建一个长度为7的空数组（注意：this指有7个空位的数组（empty），不是7个undefined组成的数组。Array.of(7);//[7]Array.of(1,2,3);//[1,2,3]Array(7);//[,,,,,,]Array(1,2,3);//[1,2,3]技巧6-使用数组构造函数和展开运算符constnumbers=[1,2,3,4,5];constcopy=newArray(...numbers);copy.push(6);//添加新项，证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧7-使用解构constnumbers=[1,2,3,4,5];const[...copy]=numbers;copy.push(6);//添加新项，证明原数组不会被修改console.log(copy);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧8-使用Array.concat方法constnumbers=[1,2,3,4,5];constcopy=numbers.concat();copy.push(6);//添加新项以证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧9-使用Array.push方法进行传播operatorconstnumbers=[1,2,3,4,5];letcopy=[];copy.push(...numbers);copy.push(6);//添加新项证明原数组是未修改console.log(copy);控制台日志（数字）；//output//[1,2,3,4,5,6]//[1,2,3,4,5]技巧10-使用Array.unshift方法和扩展运算符constnumbers=[1,2,3,4,5];letcopy=[];copy.unshift(...numbers);copy.push(6);//新增一项证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧11-使用Array.forEach方法和展开运算符constnumbers=[1,2,3,4,5];letcopy=[];numbers.forEach((value)=>copy.push(value));copy.push(6);//增加一个新项，证明原数组不会被修改console.log(copy);console.log(numbers);//Output//[1,2,3,4,5,6]//[1,2,3,4,5]Tip12-使用for循环constnumbers=[1,2,3,4,5];letcopy=[];for(leti=0;i{acc.push(x);returnacc;},[]);copy.push(6);//新增一项，证明原数组不会被修改console.log(copy);console.log(numbers);//output//[1,2,3,4,5,6]//[1,2,3,4,5]技巧14-使用旧的应用方法letcopy=[];Array.prototype.push.apply(copy,numbers);copy.push(6);//添加一个newitem证明原数组不会被修改console.log(copy);console.log(numbers);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]代码部署后可能存在的bug无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便给大家推荐一个好用的BUG监控工具Fundebug原文：https://twitter.com/protic_milos总结请注意，以上方法执行的是浅拷贝，即当数组是对象，元素是对象时，我们改变对象的值，而其他也会相应改变。技巧4比如我们的数组元素是对象，如下图：constauthors=[{name:'FrontendXiaozhi',age:25},{name:'WangDaye',age:30},]constcopy=[。..authors]copy[0].name='Changedfront-endxiaozhi'console.log(copy)console.log(authors)输出，所以上面的技巧适用于简单的数据结构，复杂的结构需要使用深拷贝.数组复制经常被误解，不是因为复制过程本身，而是因为缺乏对JS如何处理数组及其元素的理解。