本文主要是介绍ES6中的延展运算符，让你的代码更简化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先来一段代码
var params=[1,23,53,8,5]
function getNumber(){
for(var i in arguments){
console.log(arguments[i])
}
}
getNumber(...params);//1,23,53,8,5
看了上面的代码，有没有对延展操作符有了一点基本的认识。下面我们来进一步的学习。
延展操作符
延展操作符就是以三点开头的操作符，它已经被ES6数组支持，能解决很多之前arguments解决起来很麻烦的问题。
延展操作符有以下几方面应用：
1.改变函数的调用
将数组作为函数的参数传递进去的时候，通常使用的方法是function.prototype.apply,例如：
var arr=['jack','rose'];
var str=['niulang','zhinv'];
Array.prototype.push.apply(arr,str);
console.log(arr);//jack,rose,niulang,zhinv
这样写很麻烦，有了延展操作符，它可以将数组（可遍历对象）进行展开然后作为函数的参数进行调用。
var arr=['jack','rose'];
var str=['niulang','zhinv'];
arr.push(...str);
console.log(arr);//jack,rose,niulang,zhinv
这样写是不是既简单又易懂。
2.数组构造
在延展运算符之前，我们如果想让一个数组成为另一个数组的一部分，需要用到之前学到的cancat，push等等。现在延展操作符允许我们简单地操作就能实现。
var arr=['jack','rose'];
var str=['niulang',...arr,'zhinv'];
console.dir(str)//['niulang','jack','rose','zhinv']
这是数组之间的合并，还有可以快速复制数组。
var arr=[1,23,4];
var str=[...arr];//str=[1,23,4]
str.push(5);
//str=>1,23,4,5
3.数组解构
除了可以快速构造数组之外，还可以用来实现数组的解构。可以用来提取数组中的部分值，并且提取的结果是一个数组对象。注意延展运算符总是应该位于解构赋值的最后一个位置。来一个栗子
var arr=['Abby', 'Andy', 'Jane', 'Tom'];
var arr_1,arr_2;
[...arr_1,arr_2]=arr;
console.dir(arr_1)//Abby,Andy Jane
console.dir(arr_2)// Tom
4.将类数组对象转换成数组
延展运算符可以将一个类数组对象中索引范围在【0，length】之间的所有属性的值添加到一个数组中，这样可以得到一个真正的数组
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];
5.React里面的延展属性
React里面，延展运算符可以再JSX中，{...props}可以将ReactElement中的props属性展开。
var props={};
props.name='jack'
props.age=34
var component=<Component {...props}/>
同时传入对象的属性也会被复制到组件内。
它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
var props={name:'jack'};
var component=<Component {...props} name={'rose'}/>
console.log(component.foo.name);//rose
这是我对延展运算符的几点总结，欢迎来踩。
这篇关于ES6中的延展运算符，让你的代码更简化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
