web前端入门到实战：14个JS数组拷贝技巧

1、web前端入门到实战：14个js数组拷贝技巧数组拷贝常常被误会，但这并不是由于拷贝过程本身，而是由于缺乏对 js 如何处理数组及其元素的理解。js 中的数组是可变的，这解释在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组，咱们不能容易地将旧数组分配给一个新变量，它也是一个数组。假如这样做，它们将分享相同的引用，并且在更改一个变量之后，另一个变量也将受到更改的影响。这就是我们需要克隆这个数组的缘由。接着来看看一些关于拷贝何克隆数组的好玩办法和技巧。技巧 1 - 用法array.slice办法const numbers = 1, 2, 3, 4, 5const copy = number

2、s.slice()copy.push(6) / 添加新项以证实不会修改原始数组console.log(copy)console.log(numbers)/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 2 - 用法array.map办法const numbers = 1, 2, 3, 4, 5const copy = numbers.map( num => num )copy.push(6) / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2

3、, 3, 4, 5技巧 3 - 用法array.from 办法const numbers = 1, 2, 3, 4, 5;const copy = array.from(new set(numbers);copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 4 - 用法绽开操作符const numbers = 1, 2, 3, 4, 5;const copy = .numbers;copy.push(6); / 添加新项以证实不会

4、修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 5 - 用法 array.of 办法和绽开操作符const numbers = 1, 2, 3, 4, 5;const copy = array.of(.numbers);copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5array.of() 办法创建一个具有可变数

5、量参数的新数组实例，而不考虑参数的数量或类型。array.of() 和 array 构造函数之间的区分在于处理整数参数：array.of(7) 创建一个具有单个元素 7 的数组，而 array(7) 创建一个长度为7的空数组（注重：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。array.of(7); / 7array.of(1, 2, 3); / 1, 2, 3array(7); / , , , , , , array(1, 2, 3); / 1, 2, 3技巧 6 - 用法 array 构造函数和绽开操作符const numbers = 1, 2,

6、3, 4, 5;const copy = new array(.numbers);copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 7 - 用法解构const numbers = 1, 2, 3, 4, 5;const .copy = numbers;copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5

7、, 6/ 1, 2, 3, 4, 5技巧 8 - 用法 array.concat 办法const numbers = 1, 2, 3, 4, 5;const copy = 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 办法和绽开操作符const numbers = 1, 2, 3, 4, 5;let copy = ;copy.push(.numbers)

8、;copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 10 - 用法 array.unshift 办法和绽开操作符const numbers = 1, 2, 3, 4, 5;let copy = ;copy.unshift(.numbers);copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/

9、1, 2, 3, 4, 5技巧 11 - 用法 array.foreach 办法和绽开操作符const numbers = 1, 2, 3, 4, 5;let copy = ;numbers.foreach(value) => copy.push(value);copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 12 - 用法 for 循环const numbers = 1, 2, 3, 4, 5;let copy = ;for (let i = 0; i acc.push(x); return acc; , );copy.push(6); / 添加新项以证实不会修改原始数组console.log(copy);console.log(numbers);/ 输出/ 1, 2, 3, 4, 5, 6/ 1, 2, 3, 4, 5技巧 14 - 用法古老的 apply 办法const numbers = 1, 2, 3, 4, 5;let copy = ;atotype.push.apply(copy, numbers);copy.push(6); /