数组复制三大方法剖析：slice()、concat()、assign()全面解析

2023-10-13 11:58:13

前言

数组是JavaScript中非常重要的数据结构，在实际开发中经常需要对数组进行复制操作。然而，数组的复制并不是简单的值拷贝，而是涉及到内存地址、对象引用、独立对象、原型链、继承、属性覆盖、参数传递、函数作用域、全局作用域、块级作用域等诸多概念。因此，理解数组复制方法的原理对于掌握JavaScript中的数组操作至关重要。

数组复制方法概述

在JavaScript中，有三种常用的数组复制方法：slice()、concat()和assign()。这三种方法都可以实现数组的复制，但它们在原理、用法和适用场景上存在着一定的差异。

slice()方法

slice()方法是JavaScript中最常用的数组复制方法。它的基本语法如下：

array.slice(start, end)

其中，start表示复制的起始位置，end表示复制的结束位置。如果不指定start参数，则默认从数组的开头开始复制。如果不指定end参数，则默认复制到数组的末尾。

slice()方法返回一个新的数组，该数组包含从start到end-1位置的元素。这意味着，slice()方法不会修改原数组。

const array1 = [1, 2, 3, 4, 5];
const array2 = array1.slice(2, 4);

console.log(array1); // [1, 2, 3, 4, 5]
console.log(array2); // [3, 4]

concat()方法

concat()方法也是一种常见的数组复制方法。它的基本语法如下：

array.concat(array2, array3, ..., arrayN)

其中，array2、array3、...、arrayN表示要复制的数组。

concat()方法将所有传入的数组连接成一个新的数组，并返回这个新的数组。这意味着，concat()方法不会修改原数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = array1.concat(array2);

console.log(array1); // [1, 2, 3]
console.log(array2); // [4, 5, 6]
console.log(array3); // [1, 2, 3, 4, 5, 6]

assign()方法

assign()方法是ES6中引入的一种新的数组复制方法。它的基本语法如下：

Array.assign(target, source)

其中，target表示目标数组，source表示源数组。

assign()方法将source数组中的所有元素复制到target数组中。如果target数组中已经存在与source数组中相同索引的元素，则用source数组中的元素覆盖target数组中的元素。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.assign(array1, array2);

console.log(array1); // [4, 5, 6]
console.log(array2); // [4, 5, 6]

数组复制方法对比

这三种数组复制方法各有其特点和适用场景。下表对它们进行了对比：

方法	原理	返回值	是否修改原数组
slice()	从数组中提取指定范围的元素	新数组	否
concat()	将多个数组连接成一个新的数组	新数组	否
assign()	将一个数组中的所有元素复制到另一个数组中	目标数组	是