ES6展開運算符

shaonbean 發布于2019-08-20 11:19 / 1940人閱讀

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

語法

用于函數調用

myFunction(...iterableObj);

用于數組字面量

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

函數傳參

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

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

使用es6的展開運算符可以這么寫：

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]

還可以同時展開多個數組：

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

數據解構

let cold = ["autumn", "winter"];
let warm = ["spring", "summer"];
// 析構數組
let otherSeasons, autumn;
[autumn, ...otherSeasons] = cold;
otherSeasons      // => ["winter"]

數據構造

兩個對象連接返回新的對象

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

兩個數組連接返回新的數組

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

在中間插入數組

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

在尾部插入數組

// 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);

數組加上對象返回新的數組

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

數組+字符串

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

帶有數組和對象的結合

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"}}

GPU云服務器云服務器 ES6 es6-系列 ES6入門 es6 js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80504.html

帶你入門 JavaScript ES6 (二)

摘要：上一篇學習下一代語法一，我們學習了關于塊作用域變量或常量聲明和語法新的字符串拼接語法模版字面量數組元素或對象元素的解構賦值和對象字面量簡寫的相關知識。這便是擴展運算符的用途之一。本文同步帶你入門 JavaScript ES6 (二)，轉載請注明出處。上一篇學習下一代 JavaScript 語法: ES6 (一)，我們學習了關于塊作用域變量或常量聲明 let 和 const 語法、...

chanthuang 2019-08-21 18:26 評論0 收藏0
ES6之數組的擴展

摘要：它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為的成員，然后返回該成員。上面代碼中，方法的回調函數可以接受三個參數，依次為當前的值當前的位置和原數組。數組的擴展展開運算符展開運算符（用三個連續的點 ( ... ) 表示）是 ES6 中的新概念，使你能夠將字面量對象展開為多個元素。合并數組展開運算符的一個用途是結合數組。如果你需要結合多個數組，在...

paney129 2019-08-21 18:39 評論0 收藏0
ES6 ...操作符

摘要：在語法中，操作符有兩種意義剩余語法，參數和展開語法，展開數組對象，作為函數數組對象的擴展運算符。使用和參數進行操作其余參數傳給原始函數展開語法運算則可以看作是參數的逆運算。在ES6語法中，...操作符有兩種意義：rest(剩余語法，rest參數) 和 spread(展開語法，展開數組/對象)，作為函數、數組、對象的擴展運算符。從某種意義上說，剩余語法與展開語法是相反的：剩余語法將多...

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
【ES6】迭代器與可迭代對象

摘要：通過生成器創建的迭代器也是可迭代對象，因為生成器默認會為屬性賦值。我們可以用來訪問對象的默認迭代器，例如對于一個數組獲得了數組這個可迭代對象的默認迭代器，并操作它遍歷了數組中的元素。 ES6 新的數組方法、集合、for-of 循環、展開運算符（...）甚至異步編程都依賴于迭代器（Iterator ）實現。本文會詳解 ES6 的迭代器與生成器，并進一步挖掘可迭代對象的內部原理與使用方法 ...

terasum 2019-08-23 12:35 評論0 收藏0
es6 -- 默認參數Default，不定參數Rest，擴展運算符Spread詳解

摘要：將數組中的每個元素展開為函數參數擴展運算符取代方法的一個實際的例子，應用方法，簡化求出一個數組最大元素的寫法。歡迎訪問我的個人博客：http://www.xiaolongwu.cn 前言記錄一下在實際開發中，很有用的三個es6的新方法用法詳解默認參數 function f(x, y=13) { // 如果沒有傳入y或傳入了undefined，y的默認值為13 retur...

Betta 2019-08-23 15:20 評論0 收藏0