來自：https://juejin.cn/post/6903852199311310862 侵刪

陣列拷貝經常被誤解，但這並不是因為拷貝過程本身，而是因為缺乏對 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>

複製程式碼
總結
請注意，上面這些方法執行的是淺拷貝，就是陣列是元素是物件的時候，更改物件的值，另一個也會跟著變

作者：就叫王可愛_
連結：https://juejin.cn/post/6903852199311310862
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。