JavaScript中合并和克隆對象的示例分析

小編給大家分享一下JavaScript中合并和克隆對象的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

當(dāng)我們想要復(fù)制原始值和引用值（對象）時，它們的行為會大不相同。

原始值

我們假設(shè)一個變量 name 具有一個與之關(guān)聯(lián)的原始值（number，string，boolean，undefined 和null）。 如果我們將此變量 name 復(fù)制到另一個變量name2 ，則原始變量的任何修改都不會影響到第二個變量，因?yàn)樗鼈兪窃贾怠?/p>

let name="前端小智";
let name2= name;
console.log (name, name2); // 前端小智, 前端小智
name="王大冶";
console.log (name,name2); // 王大冶 前端小智

引用值

但是，如果我們對引用類型的值進(jìn)行相同的操作，則我們對一個變量所做的任何更改也將反映在另一個變量中，因?yàn)閮蓚€變量都指向同一對象。

數(shù)組

要拷貝數(shù)組，slice()方法用于創(chuàng)建數(shù)組的新副本。 可以獨(dú)立修改此副本，而不會影響原始數(shù)組。

如果未傳遞任何參數(shù)，則它會精確復(fù)制數(shù)組，但數(shù)字也可以作為參數(shù)傳遞。 如果僅傳遞一個數(shù)字，它將確定我們要從其進(jìn)行復(fù)制的索引的值，而如果傳遞兩個數(shù)字，則將標(biāo)記開始和結(jié)束。

// 示例1
const names = ['前端小智', '王大冶', '小力'];
const names2 = names;
console.log(names, names2);
// ["前端小智", "王大冶", "小力"] 
// ["前端小智", "王大冶", "小力"] 

// 示例2
names2[2] = '前端小力';
console.log(names, names2);
//  ["前端小智", "王大冶", "前端小力"] 
//  ["前端小智", "王大冶", "前端小力"] 

// 示例3
const name2 = names.slice();
names[2] = '我是隔壁老智';
console.log(name2, names2)
// ["前端小智", "王大冶", "前端小力"]
//  ["前端小智", "王大冶", "我是隔壁老智"]

對象

當(dāng)引用值是一個對象時，也會發(fā)生同樣的情況，對其屬性之一的任何修改都會影響這兩個變量。 若要克隆對象，請使用 Object.assign() 方法，該方法會將一個或多個源對象的所有可枚舉屬性的值復(fù)制到目標(biāo)對象，但是此方法僅對對象的一個淺拷貝。

// 示例1
const names = {
  name: '前端小智',
  surname: '隔壁老智'
}

const names2 = names;
console.log(names, names2) // 打印結(jié)果是一模一樣的

// 示例2
names2.surname ='隔壁老王';
console.log(names, names2)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老王"}

// 示例3
const names3 = Object.assign({}, names);
names3.surname = '隔壁老色P';
console.log(names, names3)

// {name: "前端小智", surname: "隔壁老王"}
// {name: "前端小智", surname: "隔壁老色P"}

要對對象進(jìn)行深拷貝，需要使用其他方法。

正如我們所說，Object.assign()方法只是一個淺拷貝（即，當(dāng)我們的對象沒有其他對象作為屬性時）才有效。 在這些情況下，必須對對象進(jìn)行深拷貝。

與淺拷貝不同，深拷貝以遞歸方式復(fù)制每個子對象，直到所有涉及的對象都被復(fù)制為止。

我們可以使用什么方法復(fù)制對象的深層副本？

JSON.parse(JSON.stringify(obj))

此方法使用JSON.stringify()將對象轉(zhuǎn)換為字符串，然后再用JSON.parse()將其轉(zhuǎn)換回對象。 此方法對簡單對象有效，但如果對象屬性是函數(shù)時無效。

const names = {
  name: '前端小智',
  surname: '隔壁老智',
  social: {
    wx: '大遷世界',
    url: 'www.lsp.com'
  }
}
const names2 = JSON.parse(JSON.stringify(names));
names2.social.url = 'www.baidu.com';
console.log(names, names2);

/** 
{
  name: "前端小智"
  social: {wx: "大遷世界", url: "www.lsp.com"}
  surname: "隔壁老智"
}
*/

/** 
{
  name: "前端小智"
  social: {wx: "大遷世界", url: "www.baidu.com"}
  surname: "隔壁老智"
}
*/

深度拷貝

另一種非常有趣和優(yōu)雅的對象深度復(fù)制方法是使用遞歸函數(shù)。

我們創(chuàng)建了一個deepClone(object)函數(shù)，將想要克隆的對象作為參數(shù)傳遞給它。在函數(shù)內(nèi)部，將創(chuàng)建一個局部變量克隆，這是一個空對象，其中將從起始對象克隆的每個屬性都將添加到該對象中。

具體思路：

• 如果該屬性不是對象，則將其簡單地克隆并添加到新的克隆對象中。

• 如果屬性是對象，則再次執(zhí)行deepClone（value）函數(shù)，并將屬性的值（在這種情況下為對象）作為參數(shù)傳遞，并重復(fù)相同的過程。

function deepClone(object) {
  var clone = {};
  for (var key in object) {
    var value = object[key];
    if (typeof(value) !== 'object') {
      clone[key] = value;
    } else {
      clone[key]=deepClone(value);
    }
  }
  return clone;
} 

deepClone({value1:1,value2:{value3:2}});
//{value1:1,value2:{value3:2}}
deepClone({value1:1,value2:{value3:{value3b:3}}});
//{value1:1,value2:{value3:{value3b:3}}}

看完了這篇文章，相信你對“JavaScript中合并和克隆對象的示例分析”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！