文档章节

js 对象操作 js 对象和对象赋值 去除关联性 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

xiaogg
 xiaogg
发布于 09/21 08:39
字数 1141
阅读 9
收藏 0

当我们在项目需要 复制一个对象到另一个对象并且  被复制的对象不能受复制后的对象的影响。

我先总结下 我们哪些方法可以复制对象

// 直接赋值

var obj1 = { a: 1 };
var obj2 = obj1;

console.log(obj2); // { a: 1 }

// 通过 Object.assign() 这个属性来进行复制

var obj = { a: 1 };
var obj2 = Object.assign({}, obj);

console.log(obj2); // { a: 1 }

// 通过 for in 循环赋值

var obj1={ a: 1, b: { c: 2 }, c: 0 }
var obj2={}
for( var key in obj1 ){
    obj2[key]=obj[key]
}

console.log(obj2); // { a: 1, b: { c: 2 }, c: 0 }这里写代码片

 以上的方法中 都可以把一个对象的键值赋值给另一个对象(但是我们可以测试出来obj2修改他的键值,obj1的键值也会被修改),

这就跟我家的钥匙刚开始是一把钥匙,然后我到配钥匙的地方配了一把一模一样的钥匙,那么我的这把原来的钥匙可以开我家的门,拿我家的东西,那么配的那把钥匙,也可以打开我家的门,拿走我家的东西。

 其实我们想做的是,我们心买了一个房子,只是房子里的东西摆设跟我原来的房子是一模一样的,唯独不一样的就是,我原来家的钥匙只能开原来家的门,新家的钥匙只能开新家的门,虽然两个房子里的东西是一模一样的,但是都是没有实际的关联关系。那么这样我门需要怎么做呢。

 我们可以先看看下面的这个方法

// 使用 Object.assign() 方法复制对象
let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  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}}

  我们可以看到上面 Object.assign() 的这个方法虽然可以复制我第一层的对象值,并且当我obj2修改第一层的数据时,obj1不会受到影响。

  但是我们在修改obj2 里 b 对象里的c的值得时候,这个时候 obj1 里的 b 对象里的 c 的值也发生了改变,这就说明了,Object.assign()这个方法不是深层的复制对象,只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。那么我们其实可以想象,怎么才能让他们完全没有关联性没呢。

  字符串类型 和 对象类型 肯定是没有关联性的 ,因为它们的类型都不一样,肯定是没有可比性和关联性的。 有了这样的想法我觉得我们就有办法决绝这个问题了;

  

// 这个最简单暴力的处理 两个对象的关联性的问题

  obj1 = { a: 0 , b: { c: 0}};
  let obj3 = JSON.parse(JSON.stringify(obj1));
  obj1.a = 4;
  obj1.b.c = 4;
  console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}

  上面的代码已经可以体现出来我们刚才的一个假设,我们先把obj1 转成了字符串类型, 这样他就失去了对象的属性和一切的特性,然后我们再把它转成一个对象类型,这样我们心生成的对象是通过字符串转换过来的,已经是一个新的对象,然后再赋值给obj2 ,这样就相当于,我把我原来家的布置等东西,用设计稿的方式展现出来,然后我们又买了一个新家,按着原来的设计方式重构了出来,这样两个房子的内饰是一模一样的,但是门的钥匙不一样,这样就失去了以前的关联性。

以上的方法可以封装成方法方便使用

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/xuanyubk/p/7779420.html

xiaogg

xiaogg

粉丝 35
博文 198
码字总数 58859
作品 9
石家庄
技术主管
私信 提问
js 对象赋值 去除关联性。

js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象 我最近在做一个vue 项目的时候,遇到了一个对象的问题。 当我们在项目需要 复制一个对象到另一个对象...

xiaogg
2018/09/19
10
1
ES6之Spread Operater拷贝对象

译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Operator 译者: Fundebug 为了保证可读性,本文采用意译而非...

Fundebug
2017/07/20
18
0
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型

前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话):   有人说拖延症是一个绝症,哎呀治不好了。先不说这是一个每个人都多多少少会有的,也不管它究竟对...

grootzhang
2016/09/24
0
0
前端小知识10点(2019.5.2)

1、为什么 jQuery 整体上是一个匿名函数自调用? 因为匿名函数自执行里面的所有东西都是局部的,这样引用 jQuery 时,能防止和其他的代码冲突。 2、jQuery 静态方法和实例方法的区别 是调用 ...

进击的小进进
05/04
0
0
javascript new 的原理

昨晚看了一篇模拟实现 js new 的文章,今天复盘一下 new 其实做了三件事情,首先它肯定是创建了一个对象 2.将 a 的prototype属性对象通过引用传递赋值给 aa.proto ,相当于:aa.proto = a.pr...

dubox
2018/11/06
90
0

没有更多内容

加载失败,请刷新页面

加载更多

vue vue-router beforeRouteEnter

本文转载于:专业的前端网站➬vue vue-router beforeRouteEnter beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `thi...

前端老手
47分钟前
4
0
Spring Boot 2 实战:结合 Docker 容器化

1. 前言 Docker 是啥?好处是啥? 什么现在如果作为一名开发你还不知道甚至没有用过我都感觉你落伍了。Docker 是一种虚拟化的容器技术,目的为了打造持续集成、版本控制、可移植性、隔离性和...

码农小胖哥
51分钟前
4
0
Linux 常用查询句柄的命令(Too many open files)

摘要 查询命令 进程占用的句柄总数 lsof -n | wc -l 查看哪一个进程占用的句柄最多 lsof -n|awk '{print $2}'|sort|uniq -c|sort -nr|more 第一列 是 占用句柄数; 第二列 是 进程号 PID;...

liangxiao
51分钟前
5
0
JavaScript权威指南笔记5

第五章、语句 0、概述 JS程序是一系列可执行语句的集合。 通过控制语句来改变语句的默认执行顺序。 控制语句:条件、循环和跳转(如return、break和throw) 2、复合语句 当多条语句被当做一条语...

_Somuns
58分钟前
5
0
vmware安装ubuntu18.04总是 panic -not syncing:corrupted stack end detected inside schedule

Vmware 安装ubuntu 总是卡着不动, 提示panic -not synciong 网上提示很多办法,都试了效果不佳, 找到了完美解决办法 你的兼容模式重新选一下为6.0,兼容性对硬件有要求的 即可实现 成功安装...

dragon_tech
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部