编程小知识之 JavaScript 数组拷贝

ゝ一纸荒年。 2021-12-18 07:43 240阅读 0赞

> 本篇文章简单介绍了几种在 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][]

[Copy array by value]: https://stackoverflow.com/questions/7486085/copy-array-by-value
[JavaScript Deep copy for array and object]: https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a
[How to clone an array in JavaScript]: https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/