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 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
PHP 中的批处理的实现
2007/06/14 PHP
php zend 相对路径问题
2009/01/12 PHP
php下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python对数组进行反转的方法
2015/05/20 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
利用Python获取操作系统信息实例
2016/09/02 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python Django路径配置实现过程解析
2020/11/05 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
银行演讲稿范文
2014/01/03 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
七一党建活动方案
2014/01/28 职场文书
高中历史教学反思
2014/02/08 职场文书
费城故事观后感
2015/06/10 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL