JavaScript中展开运算符及应用的实例代码


Posted in Javascript onJanuary 14, 2021

展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

let obj1 = {
 value1: 1,
 value2: 2
};
let obj2 = {...obj1
};
console.log(obj2); // {value1: 1, value2: 2}

上面的用法实际相当于

obj2 = {value1: 1, value2: 2}

展开运算符的写法与obj2 = obj1直接赋值的写法的区别在于如果直接赋值的话,对于引用类型来说,相当于只是赋值了obj1的内存空间地址,当obj2发生改变的时候,obj1也会随着发生改变。而是用展开运算符写法的话,由于obj1对象中的属性类型都是基本类型,相当于重新创建了一个对象,此时obj2发生改变的时候,并不会影响obj1这个对象。但是仅限于其属性都为基本类型的情况(或者说只进行了一层的深拷贝)。如果该对象中的属性还有引用类型的话,修改属性中引用类型的值,则两个对象的属性值都会被修改。

let obj1 = {
 attri1: [3, 6, 0],
 attri2: 4,
 attri4: 5
};
let obj2 = {...obj1
};

obj2.attri2 = 888;
obj2.attri1[0] = 7;

console.log('obj1:', obj1);
console.log('obj2:', obj2);

展开运算符的应用

1.在函数中使用展开运算符

function test(a, b, c){};

let arr = [1, 2, 3];
test(...arr);

2.数组字面量中使用展开运算符

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 使用push方法
let arr1 = [1, 2];
let arr2 = [3. 4];
arr1.push(...arr2); // [1, 2, 3, 4]

3.用于解构赋值,解构赋值中展开运算符只能用在最后,否则会报错。

// 解构赋值中展开运算符只能用在最后。
let [a, b, ...c] = [1, ,2, 3, 4]
console.log(a, b, c) // 1, 2, [3, 4]

4.类数组变成数组

let oLis = document.getElementsByTagName("li");
let liArr = [...oLis];

5.对象中使用展开运算符
ES7中的对象展开运算符符可以让我们更快捷地操作对象:

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; // 1
y; // 2
z; // {a:3,b:4}

将一个对象插入另外一个对象当中:

let z={a:3,b:4};
let n={x:1,y:2,...z};
console.log(n); //{x:1,y:2,a:3,b:4}

合并两个对象:

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
console.log(ab); // {x:1,y:2,z:3}

到此这篇关于JavaScript中展开运算符及应用的实例代码的文章就介绍到这了,更多相关js展开运算符内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
json传值以及ajax接收详解
May 24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
原生JS实现相邻月份日历
Oct 13 Javascript
js中延迟加载和预加载的具体使用
Jan 14 #Javascript
JS中箭头函数与this的写法和理解
Jan 14 #Javascript
JavaScript this关键字的深入详解
Jan 14 #Javascript
Vue实现多页签组件
Jan 14 #Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 #Vue.js
Vue中引入svg图标的两种方式
Jan 14 #Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 #Vue.js
You might like
新52大事件
2020/03/03 欧美动漫
php5数字型字符串加解密代码
2008/04/24 PHP
php class类的用法详细总结
2013/10/17 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
微信小程序云开发之数据库操作
2019/05/18 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
django实现后台显示媒体文件
2020/04/07 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
英语专业应届生求职信范文
2013/11/15 职场文书
毕业生找工作推荐信
2013/11/21 职场文书
英语演讲稿范文
2014/01/03 职场文书
买卖协议书范本
2014/04/21 职场文书
银行委托书范本
2014/09/28 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle