JS常见坑：对象赋值会影响原对象

verano 发布于2019-08-23 15:34 / 2723人阅读

一、现象：直接用=的方式把一个对象赋值给另一个对象，会导致修改新对象时，原对象也发生变化

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对象中赋值怎么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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