JS常見坑：對象賦值會影響原對象

verano 發布于2019-08-23 15:34 / 2760人閱讀

一、現象：直接用=的方式把一個對象賦值給另一個對象，會導致修改新對象時，原對象也發生變化

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

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

通過 Object.assign() 賦值

// 使用 Object.assign() 方法復制對象
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}}

此方法也有不足之處：當修改obj2.b.c的值時，原對象obj1.b.c也跟著發生了變化，Object.assign()只是讓對象里第一層的數據沒有了關聯性，但是對象內的對象則跟被復制的對象有著關聯性的。

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

var function cloneObjectFn (obj){ // 對象復制
    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}}

更多詳細內容請參考：https://www.cnblogs.com/c2016...

GPU云服務器云服務器 js 對象賦值追加 js對象用變量賦值 js聲明對象不賦值往js對象中賦值怎么

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102268.html

前端入坑體驗與分享

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

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

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

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

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

laznrbfe 2019-08-26 13:48 評論0 收藏0
對象的常用方法以及對象的拷貝

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

xfee 2019-08-23 17:56 評論0 收藏0
【進階4-1期】詳細解析賦值、淺拷貝和深拷貝的區別

摘要：展開語法木易楊通過代碼可以看出實際效果和是一樣的。木易楊可以看出，改變之后的值并沒有發生變化，但改變之后，相應的的值也發生變化。深拷貝使用場景木易楊完全改變變量之后對沒有任何影響，這就是深拷貝的魔力。木易楊情況下，轉換結果不正確。一、賦值（Copy）賦值是將某一數值或對象賦給某個變量的過程，分為下面 2 部分基本數據類型：賦值，賦值之后兩個變量互不影響引用數據類型：賦址，兩個...

silvertheo 2019-08-23 14:31 評論0 收藏0