美文网首页
理解ES 6中的rest运算符

理解ES 6中的rest运算符

作者: Summer_DYN | 来源:发表于2017-12-16 23:53 被阅读0次

rest运算符(...)是ES 6中出现的新特性之一,而其使用场景分为如下两种:

  1. 将函数(箭头函数除外)中的一个或多个参数转为数组;
  2. 将数组转为多个参数。

以下,将就这两种使用场景进行举例:

一. 将函数(箭头函数除外)中的一个或多个参数转为数组

如下代码所示,func函数用来将传入的参数依次相加并返回对应的总和。而func函数的参数中用了...arg,表示定义了一个形参数组,并将使用函数时实际传入的参数作为arg的元素。
其类似于函数的arguments类数组对象,但不同之处在于:arguments不是数组,其只有arguments.length以及arguments[index]两种使用方法,不能使用pop、push等数组的操作方法,而...arg中的arg就是一个数组。
如下,func(1, 2, 3, 4, 5)就会将arg赋值为[1, 2, 3, 4, 5]func(6)就会将arg赋值为[6]

function func(...arg){
    return arg.reduce((sum, e)=>{
        return sum+e;
  })
}
func(1, 2, 3, 4, 5);  // 15
使用需求分析
  1. 在实参个数未知的情况下,我们可以使用...arg获取实参数组,进而对其进行进一步的操作处理
  2. 解构某对象时,想要将未解构的其他字段组合为一个变量的情况下,如文末的小例子2所示。

二. 将数组转为多个参数

如下代码所示,sum函数用来返回传入的两个参数的加和。而在sum(...[2, 7])这一sum函数调用过程中,就是将数组[2, 7]中的两个元素取了出来,并分别作为sum函数的两个参数进行了加和运算。

function sum(a, b){
    return a+b;
}
sum(...[2, 7]);  // 9

小例子1

如下代码,是将两种使用场景综合在一起的一个小例子。首先,func函数的参数会先赋值给a数组,而在函数体内,调用Math.max()函数时,又会将数组a的每一个元素取出来,作为Math.max()函数的参数,最终返回了

//参数转换为数组
function func(...a){
    //数组转换为参数
    return Math.max(...a);
}
func(1, 2, 3, 6, 4); // 6
小例子2

如下代码,是第一种使用场景的举例。首先,定义了一个object对象aa中有4个字段,而const {name, ...others}=a则是将除a之外的其他字段赋值给了others变量。

var a={
    'name': 'Summer',
    'gender': 'Female',
    'age': 18,
    'hobby': 'coding',
};

const {name, ...others}=a;  //使用了ES 6中的另一个新特性,即‘解构’
console.log(others);  // {gender: "Female", age: 18, hobby: "coding"}
注意:
  1. rest运算符不能用于箭头函数中
  2. rest运算符后不能再跟其他参数,结合小例子2进行分析,即:...others表示的是取出除name字段外的其他所有字段,如果写为const { ...others, name }=a,就会报错‘Rest element must be last element’

相关文章

网友评论

      本文标题:理解ES 6中的rest运算符

      本文链接:https://www.haomeiwen.com/subject/suiewxtx.html