最近開發(fā)碰到多參數(shù)賦值的問題，參數(shù)之間總是互相影響，導(dǎo)致出現(xiàn)一些奇怪的bug，查閱了相關(guān)資料，全部在這里了，記錄一下，希望可以幫到有需要的人

一、= 賦值

let obj1 = {name: '小明', age: 10};
let obj2 = obj1;
obj1.age = 20;
console.log(obj2.age); // 輸出20

上述代碼中，obj1和obj2指向了同一塊內(nèi)存區(qū)域，修改obj1的age屬性，也會(huì)影響到obj2的age屬性。這是因?yàn)閛bj2只是復(fù)制了obj1的引用，指向的是同一塊內(nèi)存地址。

二、淺拷貝

淺拷貝是指將一個(gè)對(duì)象的屬性值復(fù)制到另一個(gè)對(duì)象中，如果屬性值是引用類型，那么只是復(fù)制了它的引用地址，而原對(duì)象和新對(duì)象的引用指向了同一個(gè)地址。這樣，在修改新對(duì)象中的屬性時(shí)，原對(duì)象相應(yīng)的屬性也會(huì)改變。 下面是一個(gè)淺拷貝的例子：

    
const originalObj = {a:1, b:{c:2}};
const newObj = Object.assign({}, originalObj);
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 3
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們使用了Object.assign方法對(duì)原對(duì)象進(jìn)行淺拷貝，并將新對(duì)象賦值給了newObj。然后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性也發(fā)生了改變。

三、深拷貝

深拷貝是指復(fù)制一個(gè)對(duì)象及其對(duì)象的所有子對(duì)象的值，并將它們都復(fù)制到一個(gè)新對(duì)象中，這樣原對(duì)象和新對(duì)象沒有任何關(guān)聯(lián)，修改新對(duì)象中的屬性不會(huì)影響原對(duì)象。 下面是一個(gè)深拷貝的例子：

    
const originalObj = {a:1, b:{c:2}};
const newObj = JSON.parse(JSON.stringify(originalObj));
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 2
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們使用了JSON的parse和stringify方法對(duì)原對(duì)象進(jìn)行深拷貝，并將新對(duì)象賦值給了newObj。然后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性沒有發(fā)生改變。 需要注意的是，深拷貝需要注意循環(huán)引用的問題。如果原對(duì)象中存在循環(huán)引用的情況，深拷貝會(huì)陷入死循環(huán)，需要我們自己手動(dòng)處理。

四、ES6展開運(yùn)算符

展開運(yùn)算符可以將一個(gè)對(duì)象中的所有屬性展開，并將它們作為新對(duì)象的屬性，從而實(shí)現(xiàn)對(duì)象的賦值。 下面是一個(gè)展開運(yùn)算符的例子：

    
const originalObj = {a:1, b:{c:2}};
const newObj = {...originalObj};
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 2
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們使用了展開運(yùn)算符對(duì)原對(duì)象進(jìn)行了復(fù)制，并將新對(duì)象賦值給了newObj。然后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性沒有發(fā)生改變。 需要注意的是，展開運(yùn)算符也只能實(shí)現(xiàn)淺拷貝，和Object.assign一樣，新對(duì)象中的引用類型屬性只是復(fù)制了一個(gè)引用地址。

五、結(jié)合ES6的解構(gòu)賦值

結(jié)合ES6的解構(gòu)賦值，我們可以快捷地對(duì)一個(gè)對(duì)象進(jìn)行賦值。解構(gòu)賦值可以同時(shí)為多個(gè)變量賦值，也可以為對(duì)象中的某個(gè)屬性賦值。使用解構(gòu)賦值，我們可以非常便捷地對(duì)一個(gè)對(duì)象進(jìn)行復(fù)制或者拆分。 下面是一個(gè)解構(gòu)賦值的例子：

    
const originalObj = {a:1, b:{c:2}};
const { ...newObj } = originalObj;
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 2
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們使用了解構(gòu)賦值對(duì)原對(duì)象進(jìn)行了復(fù)制，并將新對(duì)象賦值給了newObj。然后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性沒有發(fā)生改變。

六、使用Object.getOwnPropertyDescriptors

我們還可以使用Object.getOwnPropertyDescriptors方法來拷貝對(duì)象。Object.getOwnPropertyDescriptors方法可以獲取對(duì)象所有屬性的描述符，包括屬性方法、可枚舉性、可配置性、可寫性等等。 下面是一個(gè)使用Object.getOwnPropertyDescriptors方法的例子：

    
const originalObj = {a:1, b:{c:2}};
const newObj = Object.defineProperties({}, Object.getOwnPropertyDescriptors(originalObj));
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 2
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們使用了Object.getOwnPropertyDescriptors方法和Object.defineProperties方法對(duì)原對(duì)象進(jìn)行了復(fù)制，并將新對(duì)象賦值給了newObj。然后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性沒有發(fā)生改變。

七、結(jié)合函數(shù)實(shí)現(xiàn)對(duì)象的賦值

我們還可以結(jié)合函數(shù)來實(shí)現(xiàn)對(duì)象的賦值。函數(shù)在實(shí)現(xiàn)對(duì)象復(fù)制時(shí)，可以調(diào)用Object.assign或者JSON.parse(JSON.stringify())方法實(shí)現(xiàn)淺拷貝和深拷貝。 下面是一個(gè)結(jié)合函數(shù)實(shí)現(xiàn)對(duì)象賦值的例子：

    
function copyObj(obj, flag){
    if(flag){
        return JSON.parse(JSON.stringify(obj));
    }else{
        return Object.assign({}, obj);
    }
}
const originalObj = {a:1, b:{c:2}};
const newObj = copyObj(originalObj, true);
newObj.b.c = 3;
console.log(originalObj.b.c); // 輸出 2
console.log(newObj.b.c); // 輸出 3
    

在上面的例子中，我們通過編寫copyObj函數(shù)來實(shí)現(xiàn)對(duì)象的復(fù)制，并將原對(duì)象和深拷貝標(biāo)識(shí)傳入函數(shù)中。然后，我們使用函數(shù)來復(fù)制原對(duì)象，將新對(duì)象賦值給了newObj。最后，我們修改了新對(duì)象中b屬性的c值，結(jié)果發(fā)現(xiàn)原對(duì)象相應(yīng)的屬性沒有發(fā)生改變。

借鑒于?JS對(duì)象賦值給另一個(gè)對(duì)象_筆記大全_設(shè)計(jì)學(xué)院文章來源地址http://www.zghlxwxcb.cn/news/detail-788341.html

到了這里，關(guān)于js中對(duì)象進(jìn)行賦值操作的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！