当前位置: 首页 > news >正文

ES6对象展开运算符浅拷贝or深拷贝

ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了,偷懒专用。

1. 合并数组

展开原有数组中的所有元素,可以合并成一个新的数组。

var a=[1,2,3];
var b=[4,5,6];
var c=[...a,...b];
console.log(c) // 输出:[1, 2, 3, 4, 5, 6]
console.log(a) // 输出:[1, 2, 3]
console.log(b) // 输出:[4, 5, 6]

2. 合并对象

展开对象中的所有属性,可以合并成一个新的对象。

var person = {name: '小明',age: 18,sex: '男',
};
var hobby = {play: '篮球',like: '吃饭、睡觉、打游戏',
};
var xiaoMing = {...person,...hobby};
console.log(xiaoMing); // { name: '小明', age: 18, sex: '男', play: '篮球', like: '吃饭、睡觉、打游戏' }

当对象中包含同名参数时,后面的会把前面的同名属性覆盖掉。

// 接上面的代码
var xiaoGang = {...person,...hobby,...{name:'小刚',play:'足球'},
};
console.log(xiaoGang); // { name: '小刚', age: 18, sex: '男', play: '足球', like: '吃饭、睡觉、打游戏' }

3. 对象展开运算符是浅拷贝还是深拷贝?

先来了解下,浅拷贝和深拷贝各自的含义。

数据可以分为两大类:一类是基本数据,一类是引用数据;而数据存储位置又可分为栈和堆。

基本数据:存储在栈中,

引用数据:栈中存储了一个地址,这个地址指向堆中的真实数据。

由此:

浅拷贝:在栈中新开辟了一个空间,复制的是栈中的地址,改地址指向的依旧是原来堆的数据。

深拷贝:在栈和堆中均重新开辟了空间,新的地址指向的是新的数据,老地址指向的是老数据,所以无论新旧数据哪个发生变化,都不会影响另一个。

下面看一个浅拷贝的例子:

var person = {name: '小明',age: 18,sex: '男',
}var xiaoHong = person; // 这里只是将引用变量person1给了xiaoHong
xiaoHong.name = '小红';console.log(person) // 输出:{name: "小红", age: 18, sex: "男"}
console.log(xiaoHong)// 输出:{name: "小红", age: 18, sex: "男"}

由上面的例子,很清楚的看到:当xiaoHong的name属性值变化了之后,person的name属性值也发生变化了,所以两个对象指向的是同一个数据区域,是浅拷贝。

那么对象展开运算符是浅拷贝还是深拷贝呢?看下面例子:

var person = {name: '小明',age: 18,sex: '男',
}var xiaoHong = {...person}
xiaoHong.name = '小红';console.log(person) // 输出: {name: "小明", age: 18, sex: "男"}
console.log(xiaoHong)// 输出: {name: "小红", age: 18, sex: "男"}

诶?用对象展开符的xiaoHong的name属性变化了之后,person的name属性没有变化呀!难道对象扩展符是深拷贝?别急,往下看。

再看下面的例子,对象中包含着第二层数据对象。

var person = {name: '小明',age: 18,sex: '男',hobby: {play: '篮球',like: '吃饭、睡觉、打游戏',}
}var xiaoHong = {...person}
xiaoHong.name = '小红';
xiaoHong.hobby.play = '羽毛球';console.log(person);   // 输出: {name: "小明", age: 18, sex: "男", hobby: {music: "羽毛球",like: "吃饭、睡觉、打游戏"}}
console.log(xiaoHong); // 输出: {name: "小红", age: 18, sex: "男", hobby: {music: "羽毛球",like: "吃饭、睡觉、打游戏"}}

对比新旧两个对象的输出:

      针对name属性: 旧对象没受到影响;针对hobby.play属性:旧对象跟随变化了。

由此可证明对象展开运算符并不是深拷贝,也是浅拷贝,但第一层又不是浅拷贝。

我感觉可以这么理解:

对象展开预算符相当于展开遍历了对象的第一层数据,第一层数据如果是基本数据,就是简单的值;第一层数据若是引用数据,就是浅拷贝。

http://www.lryc.cn/news/5749.html

相关文章:

  • leaflet 上传包含shp的zip文件,在map上解析显示图形(059)
  • CAN总线详细介绍
  • python如何完成对 Excel文件的解密后读取?
  • 微服务实战--高级篇:RabbitMQ高级
  • autoCAD2022 - 设置新的原点
  • spring boot 配置 mybatis-plus多数据源
  • 独立产品灵感周刊 DecoHack #047 - 安卓手机上最有用的APP
  • 【面试题】JavaScript中递归的理解
  • PyTorch学习笔记
  • SpringBoot2知识点记录
  • Mysql
  • Q4营收利润增长背后估值持续偏低,全球支付巨头PayPal前景如何?
  • 【自然语言处理】【大模型】BLOOM:一个176B参数且可开放获取的多语言模型
  • 小红书穿搭博主推广费用是多少?
  • 网络安全-PHPstudy环境搭建
  • operator的两种用法(重载和隐式类型转换)
  • vue常用指令
  • MATLAB | 有关数值矩阵、颜色图及颜色列表的技巧整理
  • C++模板元编程详细教程(之九)
  • PhysioNet2017分类的代码实现
  • 正大期货本周财经大事抢先看
  • html+css综合练习一
  • 安装jdk8
  • 二分法心得
  • Linux安装Docker完整教程
  • 备份基础知识
  • C++学习记录——팔 内存管理
  • Spring事务失效原因分析解决
  • 4个月的测试经验,来面试就开口要17K,面试完,我连5K都不想给他.....
  • python学习之pyecharts库的使用总结