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

Amio 發(fā)布于2019-08-23 17:21 / 2221人閱讀

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

1、擴展運算符簡介

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

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

基本用法：拆解字符串與數(shù)組

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()求數(shù)組的最大值時，ES5可以通過 apply 做到（用一種不友好且繁瑣的方式）

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

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

// 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 代替數(shù)組的push、concat 等方法

實現(xiàn)把 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 合并數(shù)組的時候：

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

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

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

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

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

2.3 拷貝數(shù)組或對象

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

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

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

2.4 將偽數(shù)組轉化為數(shù)組

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

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

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

3、rest 運算符簡介

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

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

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

例如實現(xiàn)計算傳入所有參數(shù)的和使用arguments參數(shù)：

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參數(shù)：

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

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

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

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

4、rest 運算符應用

4.1 rest 參數(shù)代替arguments變量

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

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

上面的兩種寫法，比較后可以發(fā)現(xiàn)，rest 參數(shù)的寫法更自然也更簡潔。

不過，rest參數(shù)和arguments對象有一定的區(qū)別：

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參數(shù)可理解為剩余的參數(shù)，所以必須在最后一位定義，如果定義在中間會報錯。

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運算符是逆運算

擴展運算符：數(shù)組=>分割序列

rest運算符：分割序列=>數(shù)組

5.2 擴展運算符應用場景

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

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

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

5.3 rest運算符應用場景

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

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

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

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

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

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

ES6的rest參數(shù)和擴展運算符

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

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

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

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

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

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

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

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

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

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