JS常見坑：對(duì)象賦值會(huì)影響原對(duì)象

verano 發(fā)布于2019-08-23 15:34 / 2749人閱讀

一、現(xiàn)象：直接用=的方式把一個(gè)對(duì)象賦值給另一個(gè)對(duì)象，會(huì)導(dǎo)致修改新對(duì)象時(shí)，原對(duì)象也發(fā)生變化

var obj1 = {"name": "1111"};
var obj2 = obj1;
obj2.name = "2222";
console.log(obj1.name); //"2222"

二、原因：JavaScript 中對(duì)象的賦值是默認(rèn)引用賦值的（兩個(gè)對(duì)象指向相同的內(nèi)存地址） 三、解決方法: JSON.parse(JSON.stringify(obj))

通過 Object.assign() 賦值

// 使用 Object.assign() 方法復(fù)制對(duì)象
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

此方法也有不足之處：當(dāng)修改obj2.b.c的值時(shí)，原對(duì)象obj1.b.c也跟著發(fā)生了變化，Object.assign()只是讓對(duì)象里第一層的數(shù)據(jù)沒有了關(guān)聯(lián)性，但是對(duì)象內(nèi)的對(duì)象則跟被復(fù)制的對(duì)象有著關(guān)聯(lián)性的。

終極解決方案：JSON.parse(JSON.stringify(obj))

var function cloneObjectFn (obj){ // 對(duì)象復(fù)制
    return JSON.parse(JSON.stringify(obj))
}
 
var obj1={a:2,b{c:0}}
var obj2=cloneObjectFn(obj1)
console.log(obj2)    // {a:2,b{c:0}}

更多詳細(xì)內(nèi)容請(qǐng)參考：https://www.cnblogs.com/c2016...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/102268.html

相關(guān)文章

前端入坑體驗(yàn)與分享

摘要：同源策略同源策略是一種約定，由公司年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到等攻擊。一、Vue變化檢測(cè) 背景初始化對(duì)象，屬性未知；某些事件觸發(fā)時(shí)，對(duì)象改變（新增屬性），Vue監(jiān)聽不到原因 Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除，因?yàn)閂ue.js 在初始化實(shí)例時(shí)將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 dat...

hss01248 2019-08-22 18:09 評(píng)論0 收藏0
JS專題之深淺拷貝

摘要：在之前的文章專題之?dāng)?shù)據(jù)類型和類型檢測(cè)中我有講過，中的數(shù)據(jù)類型分為兩種，基本數(shù)據(jù)類型和引用數(shù)據(jù)類型，基本數(shù)據(jù)類型是保存在棧的數(shù)據(jù)結(jié)構(gòu)中的是按值訪問，所以不存在深淺拷貝問題。前言在開發(fā)過程中，偶爾會(huì)遇到這種場(chǎng)景，拿到一個(gè)數(shù)據(jù)后，你打算對(duì)它進(jìn)行處理，但是你又希望拷貝一份副本出來，方便數(shù)據(jù)對(duì)比和以后恢復(fù)數(shù)據(jù)。那么這就涉及到了 JS 中對(duì)數(shù)據(jù)的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，...

ASCH 2019-08-23 15:07 評(píng)論0 收藏0
JavaScript系列--淺析JavaScript解析賦值、淺拷貝和深拷貝的區(qū)別

摘要：它將返回目標(biāo)對(duì)象。有些文章說是深拷貝，其實(shí)這是不正確的。深拷貝相比于淺拷貝速度較慢并且花銷較大。拷貝前后兩個(gè)對(duì)象互不影響。使用深拷貝的場(chǎng)景完全改變變量之后對(duì)沒有任何影響，這就是深拷貝的魔力。一、賦值（Copy）賦值是將某一數(shù)值或?qū)ο筚x給某個(gè)變量的過程，分為： 1、基本數(shù)據(jù)類型：賦值，賦值之后兩個(gè)變量互不影響 2、引用數(shù)據(jù)類型：賦址，兩個(gè)變量具有相同的引用，指向同一個(gè)對(duì)象，相互之間有...

laznrbfe 2019-08-26 13:48 評(píng)論0 收藏0
對(duì)象的常用方法以及對(duì)象的拷貝

摘要：淺拷貝是按位拷貝對(duì)象，它會(huì)創(chuàng)建一個(gè)新對(duì)象，這個(gè)對(duì)象有著原始對(duì)象屬性值的一份精確拷貝。兩個(gè)對(duì)象引用都引用了同一個(gè)對(duì)象。對(duì)于字符串?dāng)?shù)字及布爾值來說不是或者對(duì)象，會(huì)拷貝這些值到新的數(shù)組里。 1、對(duì)象的理解對(duì)象是一個(gè)包含相關(guān)數(shù)據(jù)和方法的集合（通常由一些變量和函數(shù)組成，我們稱之為對(duì)象里面的屬性和方法） 1.1 對(duì)象可以看成是Object對(duì)象構(gòu)造出來的 showImg(https://user...

xfee 2019-08-23 17:56 評(píng)論0 收藏0
【進(jìn)階4-1期】詳細(xì)解析賦值、淺拷貝和深拷貝的區(qū)別

摘要：展開語法木易楊通過代碼可以看出實(shí)際效果和是一樣的。木易楊可以看出，改變之后的值并沒有發(fā)生變化，但改變之后，相應(yīng)的的值也發(fā)生變化。深拷貝使用場(chǎng)景木易楊完全改變變量之后對(duì)沒有任何影響，這就是深拷貝的魔力。木易楊情況下，轉(zhuǎn)換結(jié)果不正確。一、賦值（Copy）賦值是將某一數(shù)值或?qū)ο筚x給某個(gè)變量的過程，分為下面 2 部分基本數(shù)據(jù)類型：賦值，賦值之后兩個(gè)變量互不影響引用數(shù)據(jù)類型：賦址，兩個(gè)...

silvertheo 2019-08-23 14:31 評(píng)論0 收藏0