javascript
JavaScript中十个一步拷贝数组的方法
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] // 只修改了我們希望修改的，原數組不受影響// ? nestedNumbers = [[1], [2]]; numbersCopy = [...nestedNumbers]; numbersCopy[0].push(300); console.log(nestedNumbers, numbersCopy); // [[1, 300], [2]] // [[1, 300], [2]] // 由于公用引用，所以兩個數組都被修改了，這是我們不希望的 復制代碼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]// ? 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]] // 由于公用引用，所以兩個數組都被修改了，這是我們不希望的復制代碼3、while()循環（淺拷貝）
和for() 類似。
numbers = [1, 2, 3]; numbersCopy = []; i = -1; while (++i < numbers.length) {numbersCopy[i] = numbers[i]; } 復制代碼4、Array.map（淺拷貝）
上面的for和while都是很“古老”的方式，讓我們繼續回到當前，我們會發現map方法。map源于數學，是將一個集合轉換成另一種集合，同時保留結構的概念。
在英語中，它意味著Array.map 每次返回相同長度的數組。
numbers = [1, 2, 3]; double = (x) => x * 2;numbers.map(double); 復制代碼當我們使用map方法時，需要給出一個callback函數用于處理當前的數組，并返回一個新的數組元素。
和拷貝數組有什么關系呢？
當我們想要復制一個數組的時候，只需要在map的callback函數中直接返回原數組的元素即可。
numbers = [1, 2, 3]; numbersCopy = numbers.map((x) => x); 復制代碼如果你想更數學化一點，(x) => x叫做恒等式。它返回給定的任何參數。
identity = (x) => x; numbers.map(identity); // [1, 2, 3] 復制代碼同樣的，處理對象和數組的時候是引用而不是值復制。
5、Array.filter（淺拷貝）
Array.filter方法同樣會返回一個新數組，但是并不一定是返回同樣長度的，這和我們的過濾條件有關。
[1, 2, 3].filter((x) => x % 2 === 0) // [2] 復制代碼當我們的過濾條件總是true時，就可以用來實現拷貝。
numbers = [1, 2, 3]; numbersCopy = numbers.filter(() => true); // [1, 2, 3] 復制代碼同樣的，處理對象和數組的時候是引用而不是值復制。
6、Array.reduce（淺拷貝）
其實用reduce來拷貝數組并沒有展示出它的實際功能，但是我們還是要將其能夠拷貝數組的能力說一下的
numbers = [1, 2, 3]; numbersCopy = numbers.reduce((newArray, element) => {newArray.push(element);return newArray; }, []); 復制代碼reduce() 方法對數組中的每個元素執行一個由您提供的reducer函數，將其結果匯總為單個返回值。
上面我們的例子中初始值是一個空數組，我們在遍歷原數組的時候來填充這個空數組。該數組必須要從下一個迭代函數的執行后被返回出來。
同樣的，處理對象和數組的時候是引用而不是值復制。
7、Array.slice（淺拷貝）
slice?方法根據我們指定的start、end的index從原數組中返回一個淺拷貝的數組。
[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! 復制代碼這個可以安全地拷貝深度嵌套的對象/數組
幾種特殊情況
1、如果obj里面有時間對象，則JSON.stringify后再JSON.parse的結果，時間將只是字符串的形式。而不是時間對象；
var test = {name: 'a',date: [new Date(1536627600000), new Date(1540047600000)], };let b; b = JSON.parse(JSON.stringify(test)) console.log(b) 復制代碼2、如果obj里有RegExp、Error對象，則序列化的結果將只得到空對象；
const test = {name: 'a',date: new RegExp('\\w+'), }; // debugger const copyed = JSON.parse(JSON.stringify(test)); test.name = 'test' console.log('ddd', test, copyed) 復制代碼3、如果obj里有函數，undefined，則序列化的結果會把函數或 undefined丟失；
const test = {name: 'a',date: function hehe() {console.log('fff')}, }; // debugger const copyed = JSON.parse(JSON.stringify(test)); test.name = 'test' console.error('ddd', test, copyed) 復制代碼4、如果obj里有NaN、Infinity和-Infinity，則序列化的結果會變成null
5、JSON.stringify()只能序列化對象的可枚舉的自有屬性，例如 如果obj中的對象是有構造函數生成的， 則使用JSON.parse(JSON.stringify(obj))深拷貝后，會丟棄對象的constructor；
function Person(name) {this.name = name;console.log(name) }const liai = new Person('liai');const test = {name: 'a',date: liai, }; // debugger const copyed = JSON.parse(JSON.stringify(test)); test.name = 'test' console.error('ddd', test, copyed) 復制代碼參考文章：關于JSON.parse(JSON.stringify(obj))實現深拷貝應該注意的坑
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（淺拷貝）
可以將任何可迭代對象轉換為數組。給一個數組返回一個淺拷貝。
console.log(Array.from('foo')) // ['f', 'o', 'o']numbers = [1, 2, 3]; numbersCopy = Array.from(numbers) // [1, 2, 3] 復制代碼同樣的，處理對象和數組的時候是引用而不是值復制。
小結
上面這些方法都是在使用一個步驟來進行拷貝。如果我們結合一些其他的方法或技術能夠發現還有很多的方式來實現數組的拷貝，比如一系列的拷貝工具函數等。
原文地址： How to clone an array in JavaScript
關注微信公眾號同步推送更新
或者可以去Github上面給個Star
轉載于:https://juejin.im/post/5cbd6052e51d456e845b421a
總結
以上是生活随笔為你收集整理的JavaScript中十个一步拷贝数组的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第八周学习进度总结
- 下一篇： Spring Hello World