作者：Yazeed Bzadough

譯者：allen

JavaScript 有很多方法可以做任何事情，現在我們研究數組。

1.擴展運算符(淺拷貝)

自從 ES6 發布以來，這一直是最受歡迎的方法。這是一個簡短的語法，你會發現它在使用像 React 和 Redux 這樣的庫時非常有用。

numbers = [1, 2, 3];

numbersCopy = [...numbers];

注意：這不能安全地復制多維數組。數組/對象值通過引用而不是按值復制。

這可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

這不可以

nestedNumbers = [[1], [2]];

numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

2.for 循環(淺拷貝)

由于我們的圈子中流行的函數式編程，使得這種方法最不受歡迎

numbers = [1, 2, 3];

numbersCopy = [];

for (i = 0; i < numbers.length; i++) {

numbersCopy[i] = numbers[i];

}

注意：這不能安全地復制多維數組。由于你使用的是=運算符，因此它將通過引用而不是值來分配對象/數組。

這可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

這不可以

nestedNumbers = [[1], [2]];

numbersCopy = [];

for (i = 0; i < nestedNumbers.length; i++) {

numbersCopy[i] = nestedNumbers[i];

}

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

3.while 循環(淺拷貝)

同 for 循環一樣，不純的、命令式的, blah, blah, blah... 但有效！

numbers = [1, 2, 3];

numbersCopy = [];

i = -1;

while (++i < numbers.length) {

numbersCopy[i] = numbers[i];

}

注意：這也通過引用而不是按值分配對象/數組。

這可以

numbersCopy.push(4);

console.log(numbers, numbersCopy);

// [1, 2, 3] and [1, 2, 3, 4]

// numbers is left alone

這不可以

????nestedNumbers = [[1], [2]];

numbersCopy = [];

i = -1;

while (++i < nestedNumbers.length) {

numbersCopy[i] = nestedNumbers[i];

}

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1, 300], [2]]

// [[1, 300], [2]]

// They've both been changed because they share references

4.Array.map (淺拷貝)

回到現代領域，我們將找到 map 函數，基于數學，map 是將一組轉換為另一種類型的集合，同時保留結構的概念。

這意味著 Array.map 每次都返回一個長度相同的數組。

要使列表中數字加倍，可以使用 map 帶加倍函數

numbers = [1, 2, 3];

double = (x) => x * 2;

numbers.map(double);

什么是克隆

沒錯，這篇文章是關于克隆數組的。要復制數組，只需返回 map 調用中的元素即可。

numbers = [1, 2, 3];

numbersCopy = numbers.map((x) => x);

如果你想更數學一點，(x)=> x 被稱為身份。它返回給出的任何參數。

map(identity) 復制一個列表

identity = (x) => x;

numbers.map(identity);

// [1, 2, 3]

注意：這也通過引用而不是按值分配對象/數組。

5.Array.filter (淺拷貝)

此函數返回一個數組，就像 map 一樣，但它不能保證長度相同。

如果你要過濾偶數數字怎么辦？

[1, 2, 3].filter((x) => x % 2 === 0)

// [2]

輸入數組長度為3，但結果長度為1。

如果 filter 始終返回 true，就會重復

numbers = [1, 2, 3];

numbersCopy = numbers.filter(() => true);

每個元素都通過測試，因此返回。

注意：這也通過引用而不是按值分配對象/數組。

6.Array.reduce (淺拷貝)

使用 reduce 來克隆數組感覺非常不好，因為它遠比此強大，讓我們開始...

numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {

newArray.push(element);

return newArray;

}, []);

reduce 在循環遍歷列表時轉換初始值。

這里的初始值是一個空數組，我們將逐步填充每個元素。必須從要在下一次迭代中使用的函數返回該數組。

注意：這也通過引用而不是按值分配對象/數組。

7.Array.slice (淺拷貝)

slice 根據你提供的開始/結束索引返回數組的副本。

如果我們想要前3個元素：

[1, 2, 3, 4, 5].slice(0, 3);

// [1, 2, 3]

// Starts at index 0, stops at index 3

如果我們想要所有元素，請不要給出任何參數

numbers = [1, 2, 3, 4, 5];

numbersCopy = numbers.slice();

// [1, 2, 3, 4, 5]

注意：這也通過引用而不是按值分配對象/數組。

8.JSON.parse 和 JSON.stringify (深拷貝)

JSON.stringify 將對象轉換為字符串

JSON.parse 將字符串轉換為對象

組合它們可以將對象轉換為字符串，然后反轉該過程以創建全新的數據結構。

注意：這也通過引用而不是按值分配對象/數組。

nestedNumbers = [[1], [2]];

numbersCopy = JSON.parse(

JSON.stringify(nestedNumbers)

);

numbersCopy[0].push(300);

console.log(nestedNumbers, numbersCopy);

// [[1], [2]]

// [[1, 300], [2]]

// These two arrays are completely separate!

9.Array.concat (淺拷貝)

concat 將數組與值或其他數組組合在一起。

[1, 2, 3].concat(4); // [1, 2, 3, 4]

[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

如果你不提供任何內容或空數組，則返回副本。

[1, 2, 3].concat(); // [1, 2, 3]

[1, 2, 3].concat([]); // [1, 2, 3]

注意：這也通過引用而不是按值分配對象/數組。

10.Array.from (淺拷貝)

這可以將任何可迭代對象轉換為數組。給數組返回一個副本。

numbers = [1, 2, 3];

numbersCopy = Array.from(numbers)

// [1, 2, 3]

注意：這也通過引用而不是按值分配對象/數組。

總結

嗯，這很有趣

我試著只用一步就克隆了。如果你采用多種方法和技術，你會發現更多方法。

總結

以上是生活随笔為你收集整理的hdfs中与file数组类似的数组_如何在 JavaScript 中克隆数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。