本篇文章简单介绍了几种在 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.),有兴趣的朋友可以继续了解.
更多资料
