JavaScript中一步复制数组的十种方法的详细说明

我们经常会遇到在JavaScript中复制数组的场景，但我们不妨把它整理一下。

1.扩展运算符(轻型副本)

自从ES6出现以来，它已经成为最流行的方法。这是一个非常简单的语法，但是当你使用像React和Redux这样的类库时，你会发现它非常非常有用。

numbers=[1，2，3]；数字检验=[.数字]；此方法不能有效复制多维数组。数组/对象值的副本是通过引用而不是值来复制的。//numberphogence . push(4)；控制台日志(数字、数字检查)；//[1，2，3]和[1，2，3，4]//只修改我们想修改的，不影响原数组//nestedNumbers=[[1]，[2]]；数字检验=[.nested numbers]；数字检查[0]。推送(300)；控制台日志；//[[1，300]，[2]]///[[1，300]，[2]]//由于公共引用，两个数组都被修改了，这对于()循环(轻拷贝)来说是不需要的2

考虑到函数式编程越来越流行，我认为这种方法可能是最不受欢迎的。

numbers=[1，2，3]；number PHOENICS=[]；for(I=0；一、数字.长度；I){ number PHOENICS[I]=numbers[I]；}此方法无法有效复制多维数组。因为我们使用=运算符，所以它通过引用而不是值来复制数组/对象值。//numberphogence . push(4)；控制台日志(数字、数字检查)；//[1，2，3]和[1，2，3，4]//nestedNumbers=[[1]，[2]]；number PHOENICS=[]；for(I=0；我嵌套了数字。I){ number PHOENICS[I]=nested numbers[I]；}号码检查[0]。推送(300)；控制台日志；//[[1，300]，[2]]///[[1，300]，[2]]//因为有了公共引用，两个数组都做了修改，这是我们不希望的。3.而()循环(浅拷贝)类似于()。

numbers=[1，2，3]；number PHOENICS=[]；I=-1；while(I numbers . length){ numbers PHOENICS[I]=numbers[I]；}4.Array.map(浅色副本)

以上暂时和暂时都是非常“老”的方式。让我们回到现在，我们会找到地图方法。地图源于数学，数学将一个集合转化为另一个集合，同时保留了结构的概念。

在英语中，它意味着Array.map每次都会返回一个相同长度的数组。

numbers=[1，2，3]；double=(x)=x * 2；numbers.map(双精度)；当我们使用map方法时，我们需要给出一个回调函数来处理当前数组并返回一个新的数组元素。

和复制数组有什么关系？

当我们想要复制一个数组时，我们只需要在map的回调函数中直接返回原始数组的元素。

numbers=[1，2，3]；number PHOENICS=numbers . map((x)=x)；如果你想更数学一点，(x)=x就叫恒等式。它返回任何给定的参数。

恒等式=(x)=x；numbers.map(标识)；//[1，2，3]同样，在处理对象和数组时，使用引用来代替值复制。

5.Array.filter(灯光复制)

Array.filter方法也将返回一个新的数组，但它不一定返回相同的长度，这与我们的过滤条件有关。

[1,2,3].filter ((x)=x% 2===0)//[2]当我们的filter条件始终为true时，可以用来实现复制。

numbers=[1，2，3]；numberphoenics=numbers . filter(()=true)；//[1，2，3]同样，在处理对象和数组时，使用引用来代替值复制。

6.Array.reduce(轻度复制)

事实上，使用reduce来复制数组并没有显示它的实际功能，但是我们仍然要谈论它复制数组的能力

numbers=[1，2，3]；numberforce=numbers . reduce((new array，element)={ new array . push(element)；返回新数组；}, []);reduce()方法执行您为数组中的每个元素提供的reduce函数，并将其结果汇总成一个返回值。

在我们上面的例子中，初始值是一个空数组，我们在遍历原始数组时填充它。数组必须在下一个迭代函数执行后返回。

同样，在处理对象和数组时，使用引用代替复制值。

7.Array.slice(轻型副本)

Slice方法根据我们指定的开始和结束索引，从原始数组返回一个浅拷贝数组。

[1, 2, 3, 4, 5].切片(0，3)；//[1，2，3]//从索引0开始，到索引3结束//当没有给定参数时，返回原始数组numbers=[1，2，3，4，5]的副本；number PHOENICS=numbers . slice()；//[1，2，3，4，5]同样，在处理对象和数组时，使用引用而不是复制值。

8.JSON.parse JSON.stringify(深度复制)

JSON.stringify将对象转换为字符串；JSON.parse将转换后的字符串转换回对象。

将它们组合在一起可以将一个对象转换成一个字符串，然后反过来创建一个全新的数据结构。

nestedNumbers=[[1]，[2]]；number PHOENICS=JSON . parse(JSON . stringify(nested numbers))；数字检查[0]。推送(300)；控制台日志；//[[1]，[2]]//[[1，300]，[2]]//这两个数组是完全分开的！这可以安全地复制深度嵌套的对象数组

几个特例

1.如果obj中有一个时间对象，那么JSON.parse的结果将是JSON.stringify，时间也只会是字符串的形式。而不是时间对象；

var测试={ name: 'a '，Date :[new Date(1536627600000)，new Date(1540047600000)]，}；让b；B=JSON。解析(JSON。stringfy (test))控制台。日志(b) 2。如果obj中有RegExp和Error对象，序列化的结果只会得到空对象；

const test={ name: 'a '，date: new RegExp('\\w ')，}；//debugger const copy ed=JSON . parse(JSON . stringify(test))；测试。name=' test '控制台。日志(' DDD '，测试，复制)3。如果obj中有函数且未定义，序列化结果将丢失函数或未定义；

const test={ name: 'a '，date : function heh(){ console . log(' fff ')}，}；//debugger const copy ed=JSON . parse(JSON . stringify(test))；测试。name=' test '控制台。错误(' DDD '，测试，复制)4。如果obj中有NaN、Infinity和-Infinity，序列化的结果将变成null

5.JSON.stringify()只能序列化对象的可枚举自有属性。例如，如果obj中的对象是由构造函数生成的，则在使用JSON.parse(JSON.stringify(obj))进行深度复制后，该对象的构造函数将被丢弃。

函数Person(name){ this . name=name；const李艾=new Person('李艾')；const test={ name: 'a '，date:李艾，}；//debugger const copy ed=JSON . parse(JSON . stringify(test))；Test.name=' test '控制台.错误(' DDD '，测试，复制)9，Array.cancat(浅复制)

Concat将数组与值或其他数组组合在一起。

[1, 2, 3].concat(4)；//[1, 2, 3, 4][1, 2, 3].concat([4，5])；//[1, 2, 3, 4, 5]

如果我们不指定参数或者提供一个空数组作为参数，我们可以做一个浅拷贝。

[1, 2, 3].concat()；//[1, 2, 3][1, 2, 3].concat([])；//[1, 2, 3]

同样，在处理对象和数组时，使用引用代替复制值。

10.Array.from(轻型副本)

您可以将任何可迭代对象转换为数组。返回数组的浅拷贝。

console . log(array . from(' foo ')/[' f '，' o '，' o']numbers=[1，2，3]；数字复制=数组。from (numbers)//[1，2，3]同样，在处理对象和数组时，它是引用而不是值复制。摘要

以上方法都是一步复制。如果我们结合一些其他的方法或者技术，可以发现复制数组的方法有很多，比如一系列的复制工具功能。

以上是边肖介绍的JavaScript中一步复制数组的十种方法的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！