ES6中的rest参数与扩展运算符详解


Posted in Javascript onJuly 18, 2017

前言

本文主要给大家介绍了关于ES6中rest参数与扩展运算符的相关内容,rest参数和扩展运算符都是ES6新增的特性。rest参数的形式为:...变量名;扩展运算符是三个点(...)。下面话不多说了,来一起看看详细的介绍:

rest参数

rest参数用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

function add(...values) {
 let sum = 0;
 for (var val of values) {
 sum += val;
 }
 return sum;
}

add(1, 2, 3) // 6

传递给 add 函数的一组参数值,被整合成了数组 values。

下面是一个 rest 参数代替arguments变量的例子。

// arguments变量的写法
function sortNumbers() {
 return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

rest参数和arguments对象的区别

  • rest参数只包含那些没有对应形参的实参;而 arguments 对象包含了传给函数的所有实参。
  • arguments 对象不是一个真实的数组;而rest参数是真实的 Array 实例,也就是说你能够在它上面直接使用所有的数组方法。
  • arguments 对象对象还有一些附加的属性 (比如callee属性)。

另外,使用rest参数时应注意一下两点:

1、rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

function f(a, ...b, c) { ... } // 报错

2、函数的length属性,不包括 rest 参数。

(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1

扩展运算符

扩展运算符可以看做是 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5

扩展运算符的应用

普通的函数调用

function push(array, ...items) {
 array.push(...items);
}

function add(x, y) {
 return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

上面代码中,array.push(...items)add(...numbers)这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。

替代 apply 方法调用函数

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);
// ES5 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

合并数组

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3) // [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest // []

const [first, ...rest] = ["foo"];
first // "foo"
rest // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错

将字符串转为数组

var str = 'hello';

// ES5 
var arr1 = str.split(''); // [ "h", "e", "l", "l", "o" ] 

// ES6 
var arr2 = [...str]; // [ "h", "e", "l", "l", "o" ]

实现了 Iterator 接口的对象

任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 。

总结

从上面的例子可以看出,rest参数使用场景应该稍少一些,主要是处理不定数量参数,可以避免arguments对象的使用。而扩展运算符的应用就比较广了,在实际项目中灵活应用,能写出更精简的代码。

好了,以上就是这篇文章的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
jQuery事件详解
Feb 23 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 #Javascript
vue实现表格增删改查效果的实例代码
Jul 18 #Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 #Javascript
vue深入解析之render function code详解
Jul 18 #Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 #jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 #Javascript
iscroll实现下拉刷新功能
Jul 18 #Javascript
You might like
深入理解PHP中的Session和Cookie
2013/06/21 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
javascript数组详解
2014/10/22 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
心得体会范文
2014/01/04 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
Go timer如何调度
2021/06/09 Golang
Python爬取某拍短视频
2021/06/11 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers