利用javascript怎么對一個數組進行深度拷貝

本篇文章給大家分享的是有關利用javascript怎么對一個數組進行深度拷貝，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

有兩種數組拷貝類型：淺拷貝 & 深拷貝。淺拷貝只會拷貝數組的第一層，剩下的會引用。如果你需要一個嵌套的數組的拷貝，那需要你去深度拷貝這個數組。深拷貝，選擇JSON方法或者Lodsh庫吧

const numbers = [1, [2], [3, [4]], 5];
// Using JavaScript
JSON.parse(JSON.stringify(numbers));
// Using Lodash
_.cloneDeep(objects);

數組是引用類型

為了搞清楚為什么有兩種類型的拷貝，我們來深度了解一下基礎知識然后解釋什么是引用類型。
與原始類型（number、string）不同，數組是引用類型。這意味著當你把一個數組賦值給一個變量，你是將數組的內存地址而非數組本身賦給變量。

拷貝值類型

這里沒什么大不了的，我們創建一個value的拷貝。當我們改變valueCopy的值，它不會影響原來的value值。同理，當我們改變原來的值它也不會影響拷貝后的值。很好

let value = 3;
let valueCopy = value; // create copy
console.log(valueCopy); // 3
// Change valueCopy
valueCopy = 100
console.log(valueCopy); // 100
//  Original NOT affected 
console.log(value); // 3

拷貝引用類型

好的，這里就會有點奇怪了！我們用同樣的方法拷貝數組。

let array = [1,2,3];
let arrayCopy = array; // create copy
console.log(arrayCopy); // [1,2,3];
// Change 1st element of the array
arrayCopy[0] = '';
console.log(arrayCopy); // [ '', 2, 3 ]
// Original got affected
console.log(array); // [ '', 2, 3 ]

為什么原來的數組也受到了影響呢？好了，是因為：你拷貝的不是你拷貝的。說人話，意思就是你拷貝的只是指向數組內存空間的指針。引用類型不包含值，它們是指向內存中值的指針。

拷貝引用類型的方法

解決方法就是拷貝值而不是指針。

let array = [1,2,3];
let arrayCopy = [...array]; // create TRUE copy
console.log(arrayCopy); // [1,2,3];
// Change 1st element of the array
arrayCopy[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 changes
arrayCopy[0] = ''; // change shallow element
arrayCopy[1][0] = ''; // change nested element
console.log(arrayCopy); // [ '', [ '' ], 3 ]
//  Nested array got affected
console.log(nestedArray); // [ 1, [ '' ], 3 ]

如上，淺拷貝首層數組表現良好，然而，更改了嵌套數組元素，原始數組也受到影響。為了解決這個問題，就要用到深拷貝了。

let nestedArray = [1, [2], 3];
let arrayCopy = JSON.parse(JSON.stringify(nestedArray));
// Make some changes
arrayCopy[0] = ''; // change shallow element
arrayCopy[1][0] = ''; // change nested element
console.log(arrayCopy); // [ '', [ '' ], 3 ]
//  Nested array NOT affected
console.log(nestedArray); // 1, [ 2 ], 3 ]

所以，這就完事了嗎？要不要手寫一個深拷貝引用類型的方法？

const deepClone = obj => {
const isObject = args => (typeof args === 'object' || typeof args === 'function') && typeof args !== null
if (!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
}

以上就是利用javascript怎么對一個數組進行深度拷貝，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。