ES6:擴展運算符

REST參數-擴展運算符（三個點）...

function fn(...arg){
    console.log(arg);//[1,2,3,4,5]
    console.log(...arg);//1,2,3,4,5
}
fn(1,2,3,4,5)
複製代碼

1.替換apply

擴展運算符能夠展開數組，代替apply()將數組轉化爲函數參數的需求。

//ES5
Math.max.apply(null, [1, 3, 5]);
//ES6
Math.max(...[1, 3, 5]);  
複製代碼

2.合併數組

//ES5
var arr1 = [8]
var arr2 = [9,11,12,13]
arr1.push(arr2);
//[8,[9,11,12,13]]
Array.prototype.push.apply(arr1,arr2);
//[8,9,11,12,13]

// ES6
arr1.push(...arr2);
console.log(arr1)
//[8,9,11,12,13]

//能夠直接寫
var newArr = [...arr1, ...arr2]
console.log(newArr)
複製代碼

3.結構賦值

var [a, ...b] = [2,3,4,5,6];
console.log(a, b);
//2 [3,4,5,6]
var [c, ...d] = [2];
console.log(c, d);
//2 []
var [...x,y] = [2,3,4,5,6];
//Uncaught SyntaxError: Rest element must be last element
複製代碼

當擴展運算符用於數組賦值，只能放在參數的最後一位，不然會報錯。

*對象的擴展運算符

var {a, b, ...c} = {a : 12, b : 23, d : 34, c : 345}
//c ->{d:34,c:345}

var obj = {name : 'coco'}
var obj1 = {age : 27}
var newObj = {...obj, ...obj1};
var newObj1 = {obj, obj1};
console.log(newObj);//{name: "coco", age: 27}
console.log(newObj1);//{name: "coco"} {age: 27}
複製代碼

*把類數組轉化爲數組

var strArr = [...'kiwi']
console.log(strArr)
//["k","i","w","i"]
複製代碼

擴展運算符還解決了JavaScript 將 32 位 Unicode 字符，識別爲 2 個字符的問題。