ES6—擴展運算符和rest運算符（6）

Amio 發布于2019-08-23 17:21 / 2226人閱讀

摘要：擴展運算符簡介擴展運算符是三個點，可以將一個數組轉為用逗號分隔的參數序列。在實際項目中靈活應用擴展運算符運算符，能寫出更精簡易讀性高的代碼。

1、擴展運算符簡介

擴展運算符（ spread ）是三個點（...），可以將一個數組轉為用逗號分隔的參數序列。

說的通俗易懂點，有點像化骨綿掌，把一個大元素給打散成一個個多帶帶的小元素。

基本用法：拆解字符串與數組

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

2、擴展運算符應用

2.1 某些場景可以替代apply

在使用Math.max()求數組的最大值時，ES5可以通過 apply 做到（用一種不友好且繁瑣的方式）

// ES5 apply 寫法
var array = [1,2,3,4,3];
var max1 = Math.max.apply(null,array);
console.log(max1);//4

幸運的是JavaScript的世界在不斷改變，擴展運算符可用于數組的析構，優雅的解決了這個問題。

// ES6 擴展運算符 寫法
var array = [1,2,3,4,3];
var max2 = Math.max(...array);  
console.log(max2);//4

先把 array 打散成 1 2 3 4 3，再在里面找最大的那一個，就顯而易見了。

2.2 代替數組的push、concat 等方法

實現把 arr2 塞到 arr1 中

// ES5 apply 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1    ?[0, 1, 2, 3, 4, 5]

擴展運算符又要施展化骨大法了

// ES6 擴展運算符 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//arr1    ?[0, 1, 2, 3, 4, 5]

通俗的解釋下，擴展運算符先把 arr2 打散成 3 4 5 ，之后再往arr1里push，就輕松多了。

同理可推，concat 合并數組的時候：

var arr1 = ["a", "b"];
var arr2 = ["c"];
var arr3 = ["d", "e"];

// ES5的合并數組
arr1.concat(arr2, arr3)  // [ "a", "b", "c", "d", "e" ]

// ES6的合并數組
[...arr1, ...arr2, ...arr3]  // [ "a", "b", "c", "d", "e" ]

ES5的合并數組寫法，像是 arr1 把 arr2，arr3 給吸收了。

而ES6的合并數組寫法，則是先把 arr1，arr2， arr3 拆解，之后塞到新的數組中。

2.3 拷貝數組或對象

//拷貝數組
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷貝數組
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

無論是像克隆數組還是對象，先用化骨綿掌之擴展運算符，將其打散，之后再拼裝的到一起就可以了，多么簡單易用。

2.4 將偽數組轉化為數組

//偽數組轉換為數組
var nodeList = document.querySelectorAll("div");
console.log([...nodeList]);  // [div, div, div ... ]

上面代碼中，querySelectorAll 方法返回的是一個 nodeList 對象。它不是數組，而是一個類似數組的對象。這時，擴展運算符可以將其轉為真正的數組，原因就在于 NodeList 對象實現了 Iterator。

注意：使用擴展運算符將偽數組轉換為數組有局限性，這個類數組必須得有默認的迭代器且偽可遍歷的。

3、rest 運算符簡介

剩余運算符（the rest operator），它的樣子看起來和展開操作符一樣，但是它是用于解構數組和對象。在某種程度上，剩余元素和展開元素相反，展開元素會“展開”數組變成多個元素，剩余元素會收集多個元素和“壓縮”成一個單一的元素。

說的通俗點，有點像吸星大法，收集多個元素，壓縮成單一的元素。

rest參數用于獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。

例如實現計算傳入所有參數的和使用arguments參數：

function sumArgu () {
     var result = 0;
     for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result
}
console.log(sumArgu(1,2,3));//6

使用rest參數：

function sumRest (...m) {
    var total = 0; 
    for(var i of m){
        total += i;
    }
    return total;
}
console.log(sumRest(1,2,3));//6

上面代碼利用 rest 參數，可以向該函數傳入任意數目的參數。傳遞給 sumRest 函數的一組參數值，被整合成了數組 m。

就像是吸星大法，把分散的元素收集到一起。

所以在某些場景中，無需將arguments轉為真正的數組，可以直接使用rest參數代替。

4、rest 運算符應用

4.1 rest 參數代替arguments變量

// arguments變量的寫法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest參數的寫法
const sortNumbers = (...numbers) => numbers.sort();

上面的兩種寫法，比較后可以發現，rest 參數的寫法更自然也更簡潔。

不過，rest參數和arguments對象有一定的區別：

4.2 與解構賦值組合使用

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

備注：rest參數可理解為剩余的參數，所以必須在最后一位定義，如果定義在中間會報錯。

var array = [1,2,3,4,5,6];
var [a,b,...c,d,e] = array;
//  Uncaught SyntaxError: Rest element must be last element

5、總結

5.1 擴展運算符和rest運算符是逆運算

擴展運算符：數組=>分割序列

rest運算符：分割序列=>數組

5.2 擴展運算符應用場景

由于其繁瑣的語法，apply 方法使用起來并不是很方便。當需要拿一個數組的元素作為函數調用的參數時，擴展運算符是一個不錯的選擇。

擴展運算符還改善了數組字面量的操作，你可以更方便的初始化、連接、復制數組了。

使用析構賦值你可以提取數組的一部分。通過與迭代器協議的組合，你可以以一種更靈活的方式使用該表達式。

5.3 rest運算符應用場景

rest運算符主要是處理不定數量參數，rest參數使得收集參數變得非常簡單。它是類數組對象arguments一個合理的替代品。

rest參數還可以與解構賦值組合使用。

在實際項目中靈活應用擴展運算符、rest運算符，能寫出更精簡、易讀性高的代碼。

GPU云服務器云服務器 java邏輯和或運算 es6字符串擴展運算符其他運算符

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

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

ES6的rest參數和擴展運算符

摘要：參數的形式為變量名擴展運算符是三個點。傳遞給函數的一組參數值，被整合成了數組。擴展運算符的應用普通的函數調用上面代碼中，和這兩行，都是函數的調用，它們的都使用了擴展運算符。這時，擴展運算符可以將其轉為真正的數組，原因就在于對象實現了。 rest參數和擴展運算符都是ES6新增的特性。rest參數的形式為：...變量名；擴展運算符是三個點（...）。 rest參數 rest參數用于獲取函數...

ccj659 2019-08-20 18:05 評論0 收藏0
es6的解構賦值、擴展運算符、rest參數使用

摘要：模板字符串甚至還能嵌套解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。運算符使用場景應該稍少一些，主要是處理不定數量參數，可以避免對象的使用。 es6中較為常用的書寫風格為了書寫的方便，es6中提出了很多比較友好的書寫方式，其中最為常見的屬于以下幾個：字符串模板 `abcdef${test}` 解構賦值 let [a, b, c] = [1,...

xuweijian 2019-08-21 16:47 評論0 收藏0
ES6 ...操作符

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

MorePainMoreGain 2019-08-23 12:12 評論0 收藏0
es6學習筆記-函數擴展_v1.0_byKL

摘要：學習筆記函數擴展函數參數的默認值如果參數默認值是變量，那么參數就不是傳值的，而是每次都重新計算默認值表達式的值。屬性函數的屬性，返回該函數的函數名。箭頭函數詳細鏈接參考引用函數擴展 es6學習筆記-函數擴展_v1.0 函數參數的默認值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = ne...

yuanzhanghu 2019-08-20 15:16 評論0 收藏0
如何使用ES6中的參數

摘要：我們可以利用這一點，如果參數缺失就拋出錯誤在中，我們可以更近一步，使用默認參數來設置強制參數對象在的時候默認參數就被加入，來代替對象，但并沒有實現。隨著的發布，現在官方支持了默認參數。 ECMAScript 6（或者叫 ECMAScript 2015）是 ECMAScript 的最新標準，極大的提高了 JavaScript 中處理參數的能力。現在我們可以使用 rest 參數（rest ...

Hanks10100 2019-08-20 14:50 評論0 收藏0