ES6扩展运算符和rest运算符用法实例分析


Posted in Javascript onMay 23, 2020

本文实例讲述了ES6扩展运算符和rest运算符用法。分享给大家供大家参考,具体如下:

运算符可以很好的为我们解决参数和对象数组未知情况下的编程,让我们的代码更健壮和简洁。

运算符有两种:对象扩展运算符与rest运算符。

ES6扩展运算符和rest运算符用法实例分析

1.对象扩展( spread)运算符(...)

(1)解决参数个数问题

以前我们编程是传递的参数一般是确定,否则将会报错或者异常,如下:

function test(a,b,c,d) {
 console.log(a)
 console.log(b)
 console.log(c)
 console.log(d)
 console.log(e)//e is not defined
}
test(1,2,3,4)

参数固定,多余的参数会出错。

但我们又想传递多个参数,但是不确定参数的个数,这时候可以使用对象扩展运算符来作参数。

function test1(...arg) {
 console.log(arg[0]);//1
 console.log(arg[1]);//2
 console.log(arg[2]);//3
 console.log(arg[3])//4
 console.log(arg[4])//5
 console.log(arg[5])//undefined
}
test1(1,2,3,4,5)

这时候程序是不会报错的,多余取值返回的结果是undefined。这说明是可以传入多个值,并且就算方法中引用多了也不会报错。

(2)解决数组赋值问题

我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

let arr1=['i','love','you'];
let arr2=arr1;
console.log("arr2====",arr2);
arr2.push('too');
console.log("arr1====>",arr1);

控制台输出的结果为:

["i", "love", "you"]

["i", "love", "you", "too"]

这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。

let arr1=['i','love','you'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('too');
console.log(arr1);

最终可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。

2.rest运算符

(1)含义

rest参数作用: 将多余的逗号分隔的参数序列转换为数组参数

注意: rest参数必须是最后一个参数,否则报错。

rest运算符与对象扩展运算符有很多类似之处,它也用…(三个点)来表示,比如:

function test(first,...arg){
 console.log("first==>",first)//0
 console.log("arg=====>",arg)
}
test(0,1,2,3,4,5,6,7);

输出结果为:

first==> 0
arg=====>[1, 2, 3, 4, 5, 6, 7]

(2)如何循环输出rest运算符

用for…of循环来进行打印出arg的值

function test(first,...arg){
 for(let val of arg){
  console.log(val)
 }
}
test(0,1,2,3,4,5,6,7);

结果为:

1,2,3,4,5,6,7

最后总结:

  • 扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
  • rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组
  • 当三个点(...)在等号左边,或者放在形参上。为 rest 运算符
  • 当三个在等号右边,或者放在实参上,是 spread运算符

或者说:放在被赋值一方是rest 运算符。放在赋值一方式 spread运算符。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
谈一谈javascript闭包
Jan 28 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 #Javascript
JavaScript组合模式---引入案例分析
May 23 #Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
May 23 #Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 #Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
May 23 #Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 #Javascript
微信小程序点击滚动到指定位置的实现
May 22 #Javascript
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
促销活动方案模板
2014/02/24 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python