有兩種數組拷貝類型：淺拷貝 & 深拷貝。淺拷貝只會拷貝數組的第一層，剩下的會引用。如果你需要一個嵌套的數組的拷貝，那需要你去深度拷貝這個數組。深拷貝，選擇JSON方法或者Lodsh庫吧
const numbers = [1, [2], [3, [4]], 5];// Using JavaScriptJSON.parse(JSON.stringify(numbers));// Using Lodash_.cloneDeep(objects);
數組是引用類型
為了搞清楚為什么有兩種類型的拷貝，我們來深度了解一下基礎知識然后解釋什么是引用類型。
與原始類型（number、string）不同，數組是引用類型。這意味著當你把一個數組賦值給一個變量，你是將數組的內存地址而非數組本身賦給變量。
拷貝值類型
這里沒什么大不了的，我們創建一個value的拷貝。當我們改變valueCopy的值，它不會影響原來的value值。同理，當我們改變原來的值它也不會影響拷貝后的值。很好👍
let value = 3;let valueCopy = value; // create copyconsole.log(valueCopy); // 3// Change valueCopyvalueCopy = 100console.log(valueCopy); // 100// ✅ Original NOT affected console.log(value); // 3
拷貝引用類型
好的，這里就會有點奇怪了！我們用同樣的方法拷貝數組。
let array = [1,2,3];let arrayCopy = array; // create copyconsole.log(arrayCopy); // [1,2,3];// Change 1st element of the arrayarrayCopy[0] = '👻';console.log(arrayCopy); // [ '👻', 2, 3 ]// ❌Original got affectedconsole.log(array); // [ '👻', 2, 3 ]
為什么原來的數組也受到了影響呢？好了，是因為：你拷貝的不是你拷貝的。說人話，意思就是你拷貝的只是指向數組內存空間的指針。引用類型不包含值，它們是指向內存中值的指針。
拷貝引用類型的方法
解決方法就是拷貝值而不是指針。
let array = [1,2,3];let arrayCopy = [...array]; // create TRUE copyconsole.log(arrayCopy); // [1,2,3];// Change 1st element of the arrayarrayCopy[0] = '👻';console.log(arrayCopy); // [ '👻', 2, 3 ]// ✅ Original NOT affected console.log(array); // [ 1, 2, 3 ]
淺 & 深 拷貝
當我使用展開擴展符號...來拷貝一個數組，我只是淺拷貝了一個數組。如果數組是嵌套或者多維的，這就不奏效了。
let nestedArray = [1, [2], 3];let arrayCopy = [...nestedArray];// Make some changesarrayCopy[0] = '👻'; // change shallow elementarrayCopy[1][0] = '💩'; // change nested elementconsole.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]// ❌ Nested array got affectedconsole.log(nestedArray); // [ 1, [ '💩' ], 3 ]
如上，淺拷貝首層數組表現良好，然而，更改了嵌套數組元素，原始數組也受到影響💩。為了解決這個問題，就要用到深拷貝了。
let nestedArray = [1, [2], 3];let arrayCopy = JSON.parse(JSON.stringify(nestedArray));// Make some changesarrayCopy[0] = '👻'; // change shallow elementarrayCopy[1][0] = '💩'; // change nested elementconsole.log(arrayCopy); // [ '👻', [ '💩' ], 3 ]// ✅ Nested array NOT affectedconsole.log(nestedArray); // 1, [ 2 ], 3 ]
所以，這就完事了嗎？要不要手寫一個深拷貝引用類型的方法？
const deepClone = obj => {const isObject = args => (typeof args === 'object' || typeof args === 'function') && typeof args !== nullif (!isObject) throw new Error('Not Reference Types')let newObj = Array.isArray(obj) ? [...obj] : { ...obj }Reflect.ownKeys(newObj).map(key => {newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]})return newObj}文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，
新聞熱點
疑難解答
