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=

同时传入对象的属性也会被复制到组件内。

它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。

var props={name:'jack'};
var component=
console.log(component.foo.name);//rose

这是我对延展运算符的几点总结，欢迎来踩。