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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
JavaScript严格模式详解
Nov 18 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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
德生PL330的评价与改造
2021/03/02 无线电
一个简单计数器的源代码
2006/10/09 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
php实现多城市切换特效
2015/08/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python模块的加载讲解
2019/01/15 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
人事主管的岗位职责
2013/11/16 职场文书
茶叶生产计划书
2014/01/10 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
爱心捐书活动总结
2014/07/05 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
新员工试用期自我评价
2015/03/10 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android