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中使用开平方根的sqrt()方法
Jun 15 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
php写入txt乱码的解决方法
2019/09/17 PHP
javascript Excel操作知识点
2009/04/24 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
从零学Python之引用和类属性的初步理解
2014/05/15 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python使用knn实现特征向量分类
2018/12/26 Python
Python绘图实现台风路径可视化代码实例
2020/10/23 Python
python lambda的使用详解
2021/02/26 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
影视制作岗位职责
2013/12/04 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
酒店总经理助理职责
2014/02/12 职场文书
2014年工程工作总结
2014/11/25 职场文书
青涩记忆观后感
2015/06/18 职场文书
小学英语听课心得体会
2016/01/14 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
Nginx内网单机反向代理的实现
2021/11/07 Servers