自我学习之es6(5)

es6新增了三个点的功能，三个点有展开（spread）和剩余（rest）这2个功能，先来看一下展开

先来看个例子，创建一个函数

function fn(a,b,c){
	console.log(a,b,c);
}

fn(1,2,3);

这个打印出来是1,2,3，再看如果建一个数组，参数传的是数组呢

function fn(a,b,c){
	console.log(a,b,c);
}

let arr=[2,3,4];
fn(arr);

这个打印出来是[2, 3, 4] undefined undefined，后面b和c因为没传参所以打印出来都是undefined

再来看看es6的新特性，数组前加三个点，展开数组

function fn(a,b,c){
	console.log(a,b,c);
}
let arr=[2,3,4];
fn(...arr);

调用fn函数，传参的参数在数组arr前加三个点的作用就是展开数组，最后打印的结果就是2,3,4

上面的例子是在函数的参数里展开数组，再来看下如何在数组里展开一个数组

let arr=[2,3,4];
console.log([...arr]);

这样写，原数组就会在新的数组里铺开打印出来就是2,3,4，这便是在一个数组里展开另一个数组，当然还可以在数组前或后添加新的元素

let arr=[2,3,4];
console.log(['a','b',...arr,'c','d']);

打印出来就是["a", "b", 2, 3, 4, "c", "d"]

创建一个新的对象，然后在另一个对象中展开这个对象

let obj={a:1,b:2};
console.log(
     {
     ...obj

     }
	)

这个打印出来就是{a: 1, b: 2}，和数组一样，展开的对象前面可以插入另一个元素

let obj={a:1,b:2};
console.log(
     {
     name:'flowke',
     ...obj

     }
	)

打印出来是{name: "flowke", a: 1, b: 2}

展开的另一对象可能会覆盖前面的元素，

let obj={a:1,b:2};
console.log(
     {
     a:3,
     name:'flowke',
     ...obj

     }
	)

这个打印出来的结果是{a: 1, name: "flowke", b: 2}，虽然在打印的新对象前面新建了一个a的属性，但是obj这对象展开后的a的属性值覆盖了之前的a的值，如果在展开的obj 对象后再新建一个a的值，这个值又会替换obj里a的值

let obj={a:1,b:2};
console.log(
     {
     a:3,
     name:'flowke',
     ...obj,
     a:4

     }
	)

说完了展开再来说下剩余，

function fun2(a,...b){
	console.log(a,b)
}

fun2(1);

如果fun2这个函数调用的时候只传了一个参数1，打印出来是1,[]而不再是1和undefined

function fun2(a,...b){
	console.log(a,b)
}

fun2(1,2,3,4);

最后打印出来的结果是1、 [2, 3, 4]，剩余的意思是传入1，最后a打印出来是1，其余剩下的参数都给了b，打印出来就是 1、 [2, 3, 4]

function fun2(a,dd,...b){
	console.log(a,dd,b)
}

fun2(1,2,3,4);

如果在参数a后面增加一个d，那最后打印出来就是1 、2 、[3, 4]，因为2对应分配给了dd，剩余3和4再分配给b
如何在解构一个对象的时候使用rest

let obj={a:1,b:2,c:3,d:4};
let{a,c,...rest}=obj;
console.log(a,c,rest);

最后打印出来的就是1、3、 {b: 2, d: 4}，a和c的值都匹配到了，最后剩余的就都分给了rest这个对象