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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript与cookie 的问题详解
Nov 11 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 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
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP多态代码实例
2015/06/26 PHP
利用php-cli和任务计划实现刷新token功能的方法
2017/05/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
angular4自定义组件详解
2017/09/28 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
破解安装Pycharm的方法
2018/10/19 Python
Python正则表达式和元字符详解
2018/11/29 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
村委会主任先进事迹
2014/01/15 职场文书
施工安全责任书范本
2014/07/24 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS