对象的延展符

对象的延展符"/>

对象的延展符

1.改变函数的调用

将数组作为函数的参数传递进去的时候，通常使用的方法是obj.prototype.apply 这个方法

var arr=['jack','rose'];
var arr2=['niulang','zhinv'];
Array.prototype.push.apply(arr,arr2);  原型的方法配合的apply
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

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 

--------------------- 本文来自 Z_Diamond_Snow_Boke 的CSDN 博客 ，全文地址请点击：=copy

转载于:.html