JavaScript中复制数组的14个技巧

来源：twitter功能：Milos译者：前端小智点赞再看，养成习惯本文已收录到GitHubhttps://github.com/qq44924588...更多分类之前好评很多的文章，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。为了保证更好的可读性，本文采用意译而非直译。数组复制经常被误解，不是因为复制过程本身，而是因为缺乏对JS如何处理数组及其元素的理解。JS中的数组是可变的，也就是说数组创建后可以修改数组的内容。这意味着要复制一个数组，我们不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量后，另一个变量也会受到更改的影响。这就是为什么我们需要克隆这个数组。让我们来看看复制和克隆数组的一些有趣的方法和技巧。Tip1-使用Array.slice方法constnumbers=[1,2,3,4,5]constcopy=numbers.slice()copy.push(6)//添加新项，证明原数组不会待修改控制台。log(copy)console.log(numbers)//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧2-使用Array.map方法constnumbers=[1,2,3,4,5]constcopy=numbers.map(num=>num)copy.push(6)//添加新项，证明原数组没有被修改console.log(复制）;控制台日志（数字）；//输出//[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);//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧5-使用Array.of方法和扩展运算符constnumbers=[1,2,3,4,5];constcopy=Array.of(...数字);复制.推送(6);//增加新项证明原数组没有被修改console.log(copy);console.log(numbers);//output//[1,2,3,4,5,6]//[1,2,3,4,5]Array.of()方法创建一个新的数组实例，其数量可变arguments，无论参数的数量或类型Array.of()和Array构造函数之间的区别在于整数参数的处理：Array.of(7)创建一个包含单个元素7的数组，而Array(7)创建anarrayoflength7个空数组（注：这里指的是有7个空位（empty）的数组，不是7个undefined组成的数组）。数组（7）；//[7]Array.of(1,2,3);//[1,2,3]数组(7);//[,,,,,,]数组(1,2,3);//[1,2,3]技巧6-使用数组构造函数和扩展运算符constnumbers=[1,2,3,4,5];constcopy=newArray(...numbers);copy.push(6);//添加新项以证明原始数组未被修改console.log(copy);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧7-使用解构常量数字=[1,2,3,4,5];const[...copy]=数字；复制.推送(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();复制.推送(6);//增加新项证明原数组没有被修改console.log(copy);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧9-使用Array.push方法和扩展运算符constnumbers=[1,2,3,4,5];letcopy=[];copy.push(...numbers);复制.推送(6);//增加新项证明原数组没有被修改console.log(copy);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧10-使用Array.unshift方法和spreadoperatorconstnumbers=[1,2,3,4,5];letcopy=[];copy.unshift(...numbers);copy.push(6);//添加新项以证明不会修改原始数组console.log(copy);控制台日志（数字）；//输出//[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);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧12-使用for循环constnumbers=[1,2,3,4,5];让复制=[];for(leti=0;i{acc.push(x);returnacc;},[]);复制。推（6）；//增加新项证明原数组没有被修改console.log(copy);控制台日志（数字）；//输出//[1,2,3,4,5,6]//[1,2,3,4,5]技巧14-使用旧的应用方法constnumbers=[1,2,3,4,5];letcopy=[];Array.prototype.push.apply(copy,numbers);copy.push(6);//添加新项以证明原始数组不会被修改console.log(copy);控制台日志（数字）；//output//[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如何处理数组及其元素的理解。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://medium.com/better-pro...每周更新交流文章。可以微信搜索“大千世界”立即阅读更新（比博客早一两篇），这篇文章GitHubhttps://github.com/qq449245884/xiaozhi已经收录，还有我的很多文档已经整理好了。欢迎明星和完美。可以参考考点面试。另外关注公众号，后台回复福利就可以看到福利了。你知道。