JavaScript中拷贝数组的14个小技巧


本文摘自PHP中文网,作者青灯夜游,侵删。

相关推荐:《javascript视频教程》

数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的,这说明在创建数组之后还可以修改数组的内容。

这意味着要拷贝一个数组,咱们不能简单地将旧数组分配给一个新变量,它也是一个数组。如果这样做,它们将共享相同的引用,并且在更改一个变量之后,另一个变量也将受到更改的影响。这就是我们需要克隆这个数组的原因。

接着来看看一些关于拷贝和克隆数组的有趣方法和技巧。

技巧 1 - 使用Array.slice方法

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 3, 4, 5]

 

const copy = numbers.slice()

copy.push(6) // 添加新项以证明不会修改原始数组

 

console.log(copy)

console.log(numbers)

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 2 - 使用Array.map方法

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 3, 4, 5]

 

const copy = numbers.map( num => num )

copy.push(6) // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 3 - 使用Array.from 方法

1

2

3

4

5

6

7

8

9

10

11

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 - 使用展开操作符

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 3, 4, 5];

 

const copy = [...numbers];

copy.push(6); // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 5 - 使用 Array.of 方法和展开操作符

1

2

3

4

5

6

7

8

9

10

11

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, 5]

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。Array.of()Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7undefined组成的数组)。

1

2

3

4

5

Array.of(7);       // [7]

Array.of(1, 2, 3); // [1, 2, 3]

 

Array(7);          // [ , , , , , , ]

Array(1, 2, 3);    // [1, 2, 3]

技巧 6 - 使用 Array 构造函数和展开操作符

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 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 - 使用解构

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 3, 4, 5];

 

const [...copy] = numbers;

copy.push(6); // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 8 - 使用 Array.concat 方法

1

2

3

4

5

6

7

8

9

10

11

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 方法和展开操作符

1

2

3

4

5

6

7

8

9

10

11

12

const numbers = [1, 2, 3, 4, 5];

 

let copy = [];

copy.push(...numbers);

copy.push(6); // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 10 - 使用 Array.unshift 方法和展开操作符

1

2

3

4

5

6

7

8

9

10

11

12

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]

// [1, 2, 3, 4, 5]

技巧 11 - 使用 Array.forEach 方法和展开操作符

1

2

3

4

5

6

7

8

9

10

11

12

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 循环

1

2

3

4

5

6

7

8

9

10

11

12

13

14

const numbers = [1, 2, 3, 4, 5];

 

let copy = [];

for (let i = 0; i < numbers.length; i++) {

    copy.push(numbers[i]);

}

copy.push(6); // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

技巧 13 - 使用 Array.reduce 方法

这个做法是可行,但比较多余,少用

1

2

3

4

5

6

7

8

9

10

11

const numbers = [1, 2, 3, 4, 5];

 

const copy = numbers.reduce((acc, x) => { 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];

1

2

3

4

5

6

7

8

9

10

let copy = [];

Array.prototype.push.apply(copy, numbers);

copy.push(6); // 添加新项以证明不会修改原始数组

 

console.log(copy);

console.log(numbers);

 

// 输出

// [1, 2, 3, 4, 5, 6]

// [1, 2, 3, 4, 5]

总结

请注意,上面这些方法执行的是浅拷贝,就是数组是元素是对象的时候,咱们更改对象的值,另一个也会跟着变,就能技巧4来说,如果咱们的数组元素是对象,如下所示:

1

2

3

4

5

6

7

8

9

10

const authors = [

  { name: '欧阳克', age: 25 },

  { name: '王大冶', age: 30 },

]

 

const copy = [...authors ]

copy[0].name = '被更改过的欧阳克'

 

console.log(copy)

console.log(authors)

输出

1.png

所以上面的技巧适合简单的数据结构,复杂的结构要使用深拷贝。数组拷贝经常被误解,但这并不是因为拷贝过程本身,而是因为缺乏对 JS 如何处理数组及其元素的理解。

更多编程相关知识,请访问:编程教学!!

以上就是JavaScript中拷贝数组的14个小技巧的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

让人眼前一亮的五个前端小技巧

javascript怎么将负数转正

详解javascript扩展运算符的10种用法(总结)

typescript和javascript的区别有哪些

javascript隐藏元素的方法有哪些

javascript怎么去除字符串空格

window.open()弹窗被浏览器拦截的解决方法

javascript如何阻止事件冒泡和事件本身发生

javascript中“===”的用法是什么

javascript怎么实现按钮隐藏div

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...