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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 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
php中使用sftp教程
2015/03/30 PHP
为你总结一些php信息函数
2015/10/21 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序页面渲染实现方法
2019/11/06 Javascript
python内存管理分析
2015/04/08 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python中创建二维数组
2018/10/17 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
python中update的基本使用方法详解
2019/07/17 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
三个儿子教学反思
2014/02/03 职场文书
高中物理教学反思
2014/02/08 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
如何做好员工培训计划?
2019/07/09 职场文书