成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

ES6—擴(kuò)展運(yùn)算符和rest運(yùn)算符（6）

Amio / 2230人閱讀

摘要：擴(kuò)展運(yùn)算符簡(jiǎn)介擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)，可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。在實(shí)際項(xiàng)目中靈活應(yīng)用擴(kuò)展運(yùn)算符運(yùn)算符，能寫(xiě)出更精簡(jiǎn)易讀性高的代碼。

1、擴(kuò)展運(yùn)算符簡(jiǎn)介

擴(kuò)展運(yùn)算符（ spread ）是三個(gè)點(diǎn)（...），可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

說(shuō)的通俗易懂點(diǎn)，有點(diǎn)像化骨綿掌，把一個(gè)大元素給打散成一個(gè)個(gè)多帶帶的小元素。


基本用法：拆解字符串與數(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、擴(kuò)展運(yùn)算符應(yīng)用

2.1 某些場(chǎng)景可以替代apply

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

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

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

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

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

2.2 代替數(shù)組的push、concat 等方法

實(shí)現(xiàn)把 arr2 塞到 arr1 中

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

擴(kuò)展運(yùn)算符又要施展化骨大法了

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

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

同理可推，concat 合并數(shù)組的時(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ù)組寫(xiě)法，像是 arr1 把 arr2，arr3 給吸收了。

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

2.3 拷貝數(shù)組或?qū)ο?/p> 

//拷貝數(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: {…}}

無(wú)論是像克隆數(shù)組還是對(duì)象，先用化骨綿掌之?dāng)U展運(yùn)算符，將其打散，之后再拼裝的到一起就可以了，多么簡(jiǎn)單易用。

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

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

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

注意：使用擴(kuò)展運(yùn)算符將偽數(shù)組轉(zhuǎn)換為數(shù)組有局限性，這個(gè)類(lèi)數(shù)組必須得有默認(rèn)的迭代器且偽可遍歷的。

3、rest 運(yùn)算符簡(jiǎn)介

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

說(shuō)的通俗點(diǎn)，有點(diǎn)像吸星大法，收集多個(gè)元素，壓縮成單一的元素 。

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

例如實(shí)現(xiàn)計(jì)算傳入所有參數(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。

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

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

4、rest 運(yùn)算符應(yīng)用

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

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

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

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

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

4.2 與解構(gòu)賦值組合使用

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ù)，所以必須在最后一位定義，如果定義在中間會(huì)報(bào)錯(cuò)。

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

5、總結(jié)

5.1 擴(kuò)展運(yùn)算符和rest運(yùn)算符是逆運(yùn)算

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

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


5.2 擴(kuò)展運(yùn)算符應(yīng)用場(chǎng)景

由于其繁瑣的語(yǔ)法，apply 方法使用起來(lái)并不是很方便。當(dāng)需要拿一個(gè)數(shù)組的元素作為函數(shù)調(diào)用的參數(shù)時(shí)，擴(kuò)展運(yùn)算符是一個(gè)不錯(cuò)的選擇。

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

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

5.3 rest運(yùn)算符應(yīng)用場(chǎng)景

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

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

在實(shí)際項(xiàng)目中靈活應(yīng)用擴(kuò)展運(yùn)算符、rest運(yùn)算符，能寫(xiě)出更精簡(jiǎn)、易讀性高的代碼。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104221.html

相關(guān)文章

  • ES6的rest參數(shù)和擴(kuò)展運(yùn)算符

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

    ccj659 評(píng)論0 收藏0

  • es6的解構(gòu)賦值、擴(kuò)展運(yùn)算符、rest參數(shù)使用

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

    xuweijian 評(píng)論0 收藏0

  • ES6 ...操作符

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

    MorePainMoreGain 評(píng)論0 收藏0

  • es6學(xué)習(xí)筆記-函數(shù)擴(kuò)展_v1.0_byKL

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

    yuanzhanghu 評(píng)論0 收藏0

  • 如何使用ES6中的參數(shù)

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

    Hanks10100 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<