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 相关文章推荐
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
第一篇初识bootstrap
Jun 21 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript与java语言有什么不同
2016/09/22 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
利用Python破解验证码实例详解
2016/12/08 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python 打印中文字符的三种方法
2018/08/14 Python
python梯度下降法的简单示例
2018/08/31 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python适合人工智能的理由和优势
2019/06/28 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
Python气泡提示与标签的实现
2020/04/01 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
大二学生学习个人自我评价
2014/01/19 职场文书
顶撞领导检讨书
2014/01/29 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
少先队中队工作总结
2015/08/14 职场文书
Redis 限流器
2022/05/15 Redis