ES6展開運(yùn)算符

shaonbean 發(fā)布于2019-08-20 11:19 / 1938人閱讀

摘要：語法用于函數(shù)調(diào)用用于數(shù)組字面量函數(shù)傳參目前為止我們都是使用方法來將一個(gè)數(shù)組展開成多個(gè)參數(shù)使用的展開運(yùn)算符可以這么寫選擇性傳參還可以同時(shí)展開多個(gè)數(shù)組數(shù)據(jù)解構(gòu)析構(gòu)數(shù)組數(shù)據(jù)構(gòu)造兩個(gè)對(duì)象連接返回新的對(duì)象兩個(gè)數(shù)組連接返回新的數(shù)組在中間插入數(shù)組在尾部

語法

用于函數(shù)調(diào)用

myFunction(...iterableObj);

用于數(shù)組字面量

[...iterableObj, 4, 5, 6]

函數(shù)傳參

目前為止,我們都是使用Function.prototype.apply方法來將一個(gè)數(shù)組展開成多個(gè)參數(shù):

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

使用es6的展開運(yùn)算符可以這么寫：

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

選擇性傳參

function filter(type, ...items) {
    return items.filter(item => typeof item === type);
}
filter("boolean", true, 0, false);        // => [true, false]
filter("number", false, 4, "Welcome", 7); // => [4, 7]

還可以同時(shí)展開多個(gè)數(shù)組：

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

數(shù)據(jù)解構(gòu)

let cold = ["autumn", "winter"];
let warm = ["spring", "summer"];
// 析構(gòu)數(shù)組
let otherSeasons, autumn;
[autumn, ...otherSeasons] = cold;
otherSeasons      // => ["winter"]

數(shù)據(jù)構(gòu)造

兩個(gè)對(duì)象連接返回新的對(duì)象

let a = {aa:"aa"}
let b = {bb:"bb"}
let c = {...a,...b}
console.log(c)
// {"aa":"aa","bb":"bb"}

兩個(gè)數(shù)組連接返回新的數(shù)組

let d = ["dd"]
let e = ["ee"]
let f = [...d,...e]
console.log(f)
// ["dd","ee"]

在中間插入數(shù)組

var parts = ["shoulder", "knees"];
var lyrics = ["head", ...parts, "and", "toes"]; // ["head", "shoulders", "knees", "and", "toes"]

在尾部插入數(shù)組

// ES5
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 將arr2中的所有元素添加到arr1中
Array.prototype.push.apply(arr1, arr2);

// ES6
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

數(shù)組加上對(duì)象返回新的數(shù)組

let g = [{gg:"gg"}]
let h = {hh:"hh"}
let i = [...g,h]
console.log(i)
// [{"gg":"gg"},{"hh":"hh"}

數(shù)組+字符串

let j = ["jj"]
let k = "kk"
let l = [...j,k]
console.log(l)
// ["jj","kk"]

帶有數(shù)組和對(duì)象的結(jié)合

let state = {
    resultList: [],
    currentPage: 0,
    totalRows: {}
}
let data = {
    resultList: [{new:"new"}],
    currentPage: 2,
    totalRows: {row:"row"}
}
let combile = {
                ...state,
                resultList: [
                    ...state.resultList,
                    ...data.resultList
                ],
                currentPage: data.currentPage,
                totalRows: data.totalRows
            }
console.log(combile)
// {"resultList":[{"new":"new"}],"currentPage":2,"totalRows":{"row":"row"}}