前端JavaScript深拷貝的三種方法,看了不後悔!!!
阿新 • • 發佈:2022-04-21
深拷⻉
深拷⻉開闢⼀個新的棧,兩個物件屬完成相同,但是對應兩個不同的地址,修改⼀個物件的屬性,不會 改變另⼀個物件的屬性
常⻅的深拷⻉⽅式有:
- _.cloneDeep()
- jQuery.extend()
- JSON.stringify()
1. _.cloneDeep()
點選檢視程式碼
const _ = require('lodash'); const obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3] }; const obj2 = _.cloneDeep(obj1); console.log(obj1.b.f === obj2.b.f);// false
2. jQuery.extend()
點選檢視程式碼
const $ = require('jquery');
const obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
const obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f); // false
3. JSON.stringify()
點選檢視程式碼
但是這種⽅式存在弊端,會忽略 undefined 、 symbol 和 函式 const obj2=JSON.parse(JSON.stringify(obj1)); const obj = { name: 'A', name1: undefined, name3: function() {}, name4: Symbol('A') } const obj2 = JSON.parse(JSON.stringify(obj)); console.log(obj2); // {name: "A"}