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這個物件