ES6基础之展开语法(Spread syntax)
展开语法用"..."进行表示，展开语法将可迭代的对象拆分成独立的值（语法层面展开）。扩展语法通常用于将可迭代的对象的值传递到函数的参数中。今天小编将从以下方面进行介绍：
- 函数传参中的应用
- 数组的相关应用
- 剩余参数的应用
- 函数传参中的应用
ES6之前，如果我们希望将数组作为参数分别传递给函数中的参数，我们可以使用Function的apply()方法。如下段代码所示：
functionmyFunction(a,b){
returna+b;
}
vardata=[1,4];
varresult=myFunction.apply(null,data);
console.log(result);//Output"5”
从上述代码，apply方法接受一个数组，将它们分拆成单独参数传递函数进行调用。
ES6的展开语法能让我们以更简洁的方式进行调用，如下段代码所示：
functionmyFunction(a,b){
returna+b;
}
letdata=[1,4];
letresult=myFunction(...data);
console.log(result);//Output"5”
代码运行期间，JavaScript解释器调用myFunction之前，将会用1,4表达式替换...运算符:
letresult=myFunction(...data);
上述代码将会进行如下转换：
letresult=myFunction(1,4);
替换后，函数中的代码将会继续执行。
数组的相关应用
数组的合并
展开语法可将数组添加到另外一个数组中，成为其中的一部分。
letarray1=[2,3,4]; letarray2=[1,...array1,5,6,7]; console.log(array2);//Output"1,2,3,4,5,6,7”
代码运行期间，如下代码：
letarray2=[1,...array1,5,6,7];
上述代码将会替换成如下代码：
letarray2=[1,2,3,4,5,6,7];
在push方法中的运用
有时候，我们需要将一个数组的内容追加到另一个数组中，ES6之前我们可以这么做，如下段代码所示：
vararray1=[2,3,4]; vararray2=[1]; Array.prototype.push.apply(array2,array1); console.log(array2);//Output"1,2,3,4”
ES6的展开语法能以更简洁的形式实现，如下段代码所示：
letarray1=[2,3,4]; letarray2=[1]; array2.push(...array1); console.log(array2);//Output"1,2,3,4”
代码运行期间，如下代码：
array2.push(...array1);
上述代码将会替换成如下代码:
array2.push(2,3,4);
传递多个数组参数
我们可以使用展开语法传递多个数组进行参数传递，如下段代码所示：
letarray1=[1];
letarray2=[2];
letarray3=[...array1,...array2,...[3,4]];//multiarrayspread
letarray4=[5];
functionmyFunction(a,b,c,d,e){
returna+b+c+d+e;
}
letresult=myFunction(...array3,...array4);//multiarrayspread
console.log(result);//Output"15”
剩余参数的应用
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数，我们可以使用展开语法...进行获取。
ES6之前，我们可以这样获取剩余参数，如下段代码所示：
functionmyFunction(a,b){
constargs=Array.prototype.slice.call(arguments,myFunction.length);
console.log(args);
}
myFunction(1,2,3,4,5);//Output"3,4,5”
ES6中，上述代码我们可以这样改下，如下段代码所示：
functionmyFunction(a,b,...args){
console.log(args);//Output"3,4,5"
}
myFunction(1,2,3,4,5);
是不是很简单，有个我们需要注意的事，一旦函数中的参数第一个参数使用剩余参数，就不能声明第二个非剩余参数，否则将会抛出错误。例如下段代码所示:
functionfn(...rest,foo){}
//Output"SyntaxError:Restparametermustbelastformalparameter"
小节
今天的内容就到这里，展开语法是不是特别的酷啊，在日后的开发中，我们尽量使用新的语法糖替代旧的写法。让我们代码看起来更加干净、整洁、易懂。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。