怎样拷贝数组(深/浅拷贝)

前端技术文章:如何拷贝数组(深/浅拷贝)

在前端开发中,有时需要复制一个数组并对其进行修改,这时候就需要学会如何拷贝数组。拷贝数组分为两种类型:浅拷贝和深拷贝。本文将介绍这两种拷贝方式的区别以及如何在JavaScript中实现它们。

浅拷贝

浅拷贝是指只复制数组的一层内容,如果数组中包含对象或其他引用类型数据,则只复制它们的引用地址而不是真正的值。这意味着当原数组中的引用类型数据发生改变时,拷贝后的数组也会随之改变。因此,浅拷贝只适用于简单的一维数组。以下是几种常见的浅拷贝方法:

1. 手动遍历复制

可以使用for循环手动复制原数组的每个元素到新的数组中:

----- ------------- - --- -- -- - ----- ------ ---
----- ----------- - ---

--- ---- - - -- - - --------------------- ---- -
  -----------------------------------
-

------------------------- -- --- -- -- - ----- ------ --

2. 使用slice()方法

可以使用slice()方法截取数组的全部元素来进行浅拷贝:

----- ------------- - --- -- -- - ----- ------ ---
----- ----------- - ----------------------

------------------------- -- --- -- -- - ----- ------ --

3. 使用spread运算符

ES6中新增了spread运算符,可以将数组展开成一系列参数,也可以用于数组的复制:

----- ------------- - --- -- -- - ----- ------ ---
----- ----------- - -------------------

------------------------- -- --- -- -- - ----- ------ --

深拷贝

深拷贝是指不仅复制数组的内容,还要递归复制数组中包含的所有引用类型数据。这意味着即使原数组中的引用类型数据发生改变,拷贝后的数组也不会改变。因此,深拷贝适用于多维数组和包含对象等引用类型数据的数组。

以下是几种常见的深拷贝方法:

1. 手动递归复制

手动递归复制是实现深拷贝的最基本方式。它通过遍历数组的每个元素并检查是否为引用类型数据,如果是,则递归调用自身对其进行复制。

-------- ------------- -
  -- ------- --- --- -------- -- --- --- ----- -
    ------ ----
  -
  ----- ------ - ------------------ - -- - ---
  --- ------ --- -- ---- -
    -- -------------------------------- ----- -
      ----------- - -------------------
    -
  -
  ------ -------
-

-- --
----- ------------- - --- -- -- - ----- ------ ---
----- ----------- - ------------------------

------------------------- -- --- -- -- - ----- ------ --

2. 使用JSON.parse()和JSON.stringify()

可以将数组先转换为JSON字符串,再通过JSON.parse()方法解析为新的数组。这种方式的缺点是无法复制函数、日期、正则表达式等特殊类型数据。

----- ------------- - --- -- -- - ----- ------ ---
----- ----------- - ------------------------------------------

------------------------- -- --- -

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------