12 个拷贝数组的 JS 技巧

12 个拷贝数组的 JS 技巧

数组拷贝经常被误解，但这并不是因为拷贝过程本身，而是因为缺乏对 JS 如何处理数组及其元素的理解。JS 中的数组是可变的，这说明在创建数组之后还可以修改数组的内容。这意味着要拷贝一个数组，咱们不能简单地将旧数组分配给一个新变量，它也是一个数组。如果这样做，它们将共享相同的引用，并且在更改一个变量之后，另一个变量也将受到更改的影响。这就是我们需要克隆这个数组的原因。接着来看看一些关于拷贝何克隆数组的方法和技巧。

方法 1 - 使用Array.slice方法

 <script type="text/javascript">
        const number = [1, 2, 3, 4, 5];
        
        const newNumber = number.slice();
        
        newNumber.push(6);//添加新项证明不会改变原数组
        
        console.log(number);//[1,2,3,4,5]
        
        console.log(newNumber);//[1,2,3,4,5,6]
    </script>

方法 2 - 使用Array.map方法

 <script type="text/javascript">
        const number = [1, 2, 3, 4, 5];
        
        //map有返回值，声明变量接收返回值
        const newNumber = number.map(num => num);
        
        newNumber.push(6);//添加新项证明不会改变原数组
        
        console.log(number);//[1,2,3,4,5]
        
        console.log(newNumber);//[1,2,3,4,5,6]
    </script>

方法 3 - 使用Array.from方法

<script type="text/javascript">
        const number = [1, 2, 3, 4, 5];
        
        /*Array.from():
        作用：将一个类数组对象或者可遍历对象转化成一个真正的数组
        new Set类似数组，但里面不能有重复值*/
        const newNumber = Array.from(new Set(number));
        
        newNumber.push(6);//添加新项证明不会改变原数组
        
        console.log(number);//[1,2,3,4,5]
        
        console.log(newNumber);//[1,2,3,4,5,6]
    </script>

注意：该方法不能用在原数组里有重复项，会被去重

方法 4 - 使用扩展运算符（…）

 <script type="text/javascript">
        const number = [1, 2, 3, 4, 5];
        
        const newNumber = [...number];
        
        newNumber.push(6);//添加新项证明不会改变原数组
        
        console.log(number);//[1,2,3,4,5]
        
        console.log(newNumber);//[1,2,3,4,5,6]
    </script>

方法 5 - 使用 Array.of 方法和扩展运算符

<script type="text/javascript">
        const number = [1, 2, 3, 4, 5];
        // Array.of()：把一组值，转成数组
        const newNumber =Array.of (...number);
        newNumber.push(6);//添加新项证明不会改变原数组
        console.log(number);//[1,2,3,4,5]
        console.log(newNumber);//[1,2,3,4,5,6]
    </script>

注意：Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

        Array.of(7)//[7]
        Array.of(1,2,3)//[1,2,3]

        new Array(7)//这里表示数组长度为7
        new Array(1,2,3)//[1,2,3]

方法 6 - 使用 Array 构造函数和扩展运算符

    <script type="text/javascript">

        const arr = [1, 2, 3, 4, 5];
        
        const newArr = new Array(...arr);
        
        newArr.push(6);
        
        console.log(arr);//[1,2,3,4,5]
        
        console.log(newArr);//[1,2,3,4,5,6]

    </script>

方法 7 - 使用 Array.concat 方法

    <script type="text/javascript">
        const arr = [1, 2, 3, 4, 5];
        
        const newArr = arr.concat();//concat() 方法用于连接两个或多个数组
        
        newArr.push(6);
        
        console.log(arr);//[1,2,3,4,5]
        
        console.log(newArr);//[1,2,3,4,5,6]
    </script>

方法 8 - 使用forEach方法和push方法

<script type="text/javascript">
        let arr = [1, 2, 2, 4, 7];
        let newArr = []
        arr.forEach((item) => newArr.push(item))
        newArr.push(6)
        console.log(arr);//[1,2,2,4,7]
        console.log(newArr);//[1,2,2,4,7,6]
    </script>

方法 9 - 使用 for 循环

<script type="text/javascript">
        let arr = [1, 2, 2, 4, 7];
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            newArr.push(arr[i])
        }
        newArr.push(6)
        console.log(arr);//[1,2,2,4,7]
        console.log(newArr);//[1,2,2,4,7,6]
    </script>

方法10- 使用 Array.push 方法和扩展运算符

 <script type="text/javascript">
        let arr = [1, 2, 2, 4, 7];

        let newArr = []
        
        newArr.push(...arr);
        
        newArr.push(8);
        
        console.log(arr);//[1,2,2,4,7]
        
        console.log(newArr);//[1,2,2,4,7,8]
    </script>

方法 11 - 使用 Array.unshift 方法和展开操作符

 <script type="text/javascript">
        let arr = [1, 2, 2, 4, 7];

        let newArr = []
        
        newArr.unshift(...arr);
        
        newArr.push(8);
        
        console.log(arr);//[1,2,2,4,7]
        
        console.log(newArr);//[1,2,2,4,7,8]
    </script>

方法 12 - 使用解构与扩展运算符

  <script type="text/javascript">
  
        const arr = [1, 2, 3, 4, 5];
        
        const [...newArr] = arr
        
        newArr.push(6);
        
        console.log(arr);//[1,2,3,4,5]
        
        console.log(newArr);//[1,2,3,4,5,6]
    </script>

总结
请注意，上面这些方法执行的是浅拷贝，就是数组是元素是对象的时候，更改对象的值，另一个也会跟着变