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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
关于JSON与JSONP简单总结
Aug 16 Javascript
js给table赋值的实例代码
Oct 13 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Vuex 进阶之模块化组织详解
Jan 12 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
第一个无线电台是由谁发明的
2021/03/01 无线电
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
php微信开发之图片回复功能
2018/06/14 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python数据持久化shelve模块用法分析
2018/06/29 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
CSS3 简写animation
2012/05/10 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
给领导的感谢信范文
2015/01/23 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang