编程小知识之 JavaScript 数组拷贝

本篇文章简单介绍了几种在 JavaScript 中进行数组拷贝的方法

浅拷贝

• 迭代拷贝

直接迭代数组进行拷贝可能是最直观的方法,只是性能不高

// use "for"
array = [1, 2, 3];
arrayClone = [];

for (i = 0; i < array.length; ++i) {
    arrayClone[i] = array[i];
}

// use "while"
array = [1, 2, 3];
arrayClone = [];

i = 0;
while (i < array.length) {
  arrayClone[i] = array[i];
  ++i;
}

• 使用 Array.map

Array.map 可以对数组元素进行映射(map)操作,如果提供一个自身到自身的映射函数,我们便可以实现数组的拷贝了.

array = [1, 2, 3];
// identity map
identity = (x) => x;
arrayClone = array.map(identity);

• 使用 Array.filter

同 Array.map 类似, Array.filter 可以对数组元素执行过滤(filter)操作,如果提供一个固定返回真值的过滤函数,我们同样可以实现数组拷贝.

array = [1, 2, 3];
always = () => true;
arrayClone = array.filter(always);

• 使用 Array.slice

Array.slice 可能是最常用的在 JavaScript 中拷贝数组的方法,使用上也比较简洁.

array = [1, 2, 3];
arrayClone = array.slice();

• 使用 Array.concat

Array.concat 方法可以用于合并两个或多个数组,如果我们将空数组作为函数参数,也能实现数组拷贝的目的.

array = [1, 2, 3];
arrayClone = array.concat(); 
arrayClone2 = array.concat([]);
arrayClone3 = [].concat(array);

• 使用 Array.reduce

Array.reduce 可以对数组元素执行化简(reduce)操作,使用他我们同样可以进行数组拷贝,只是代码上比较复杂,个人也不是很推荐这种写法,示例代码如下:

array = [1, 2, 3];
reduce = (newArray, element) => { newArray.push(element); return newArray; }
arrayClone = array.reduce(reduce, []);

• 使用 Array.from

Array.from 类似于 Array.map, 使用该函数也可以进行数组拷贝,并且语义上也是最接近数组拷贝的,代码上亦比较简洁.

array = [1, 2, 3];
arrayClone = Array.from(array);

• 使用 ES6 中的展开(Spread)语法

ES6 引入了展开(Spread)语法,通过将数组元素展开,再将展开元素构造成数组的方式,我们也可以进行数组拷贝:

array = [1, 2, 3];
arrayClone = [...array];

深拷贝

• 使用 JSON.parse 和 JSON.stringify

使用 JSON.stringify 将数组"序列化"为字符串,再通过解析该字符串并"反序列化"成数组,我们便可以完成数组的深拷贝操作.

array = [1, 2, 3];
arrayClone = JSON.parse(JSON.stringify(array));

• 使用 jQuery 的 $.extend

jQuery 的 $.extend 也可以实现数组的深拷贝,只是需要引入 jQuery.

array = [1, 2, 3];
arrayClone = $.extend(true, [], array);

后记

当然,我们还有其他方法在 JavaScript 中进行数组拷贝(Object.create etc.),有兴趣的朋友可以继续了解.

更多资料

• Copy array by value
• JavaScript Deep copy for array and object
• How to clone an array in JavaScript