資訊專欄INFORMATION COLUMN
摘要：就是的逆操作，看代碼計(jì)算一個(gè)數(shù)組大于三個(gè)元素中前三個(gè)元素的和以及所有元素的和。前三個(gè)值為總和為結(jié)果前三個(gè)值為總和為前三個(gè)值為總和為
ES2015為我們帶來(lái)了一個(gè)新的操作符: ...,
用于定義函數(shù)參數(shù)的地方，稱之為 Rest
用于調(diào)用函數(shù)的地方，稱之為 Spread
我們一個(gè)個(gè)來(lái)分析：
Rest
寫(xiě)程序的時(shí)候或多或少都會(huì)有，傳入不定參數(shù)給一個(gè)函數(shù)的需求，如，給一個(gè)班級(jí)加入學(xué)生名單，可以一次給一個(gè)，也可以一次給多個(gè)，以前的做法，可能是傳入數(shù)組，或者定義2個(gè)方法，一個(gè)傳入單個(gè)學(xué)生，一個(gè)傳入學(xué)生數(shù)組，如：
class ClassRoom {
constructor(name) {
this.name = name;
this.students = [];
}
addStudent(name) {
this.students.push(name);
}
addStudents(names) {
this.students = this.students.concat(names);
}
listStudents() {
console.log(this.students);
}
}
const classRoom = new ClassRoom("三年二班");
classRoom.addStudent("張三");
classRoom.addStudents(["李四", "王五"]);
classRoom.listStudents();
有了 Rest 我們的代碼就簡(jiǎn)單了，
class ClassRoom {
constructor(name) {
this.name = name;
this.students = [];
}
addStudents(...names) {
this.students = this.students.concat(names);
}
listStudents() {
console.log(this.students);
}
}
const classRoom = new ClassRoom("三年二班");
classRoom.addStudents("張三");
classRoom.addStudents("李四", "王五");
classRoom.listStudents();
代碼中的...names, 意思就是： 從我開(kāi)始不管后面有多少參數(shù)，請(qǐng)幫我把它們組成數(shù)組給我后面的參數(shù)。 如此一來(lái)，也可以這樣，
function callFriends(via, ...friends) {
console.log("使用" + via + "通知: " + friends.join(",") + "等" + friends.length + "個(gè)好友");
}
callFriends("QQ", "張三");
callFriends("電話", "張三", "李四", "王五");
結(jié)果:
> 使用QQ通知: 張三等1個(gè)好友 > 使用電話通知: 張三,李四,王五等3個(gè)好友
應(yīng)用剛才的解釋到這里，從...開(kāi)始，不管后面有多少個(gè)朋友傳進(jìn)來(lái)，請(qǐng)把他們組成數(shù)組放入friends參數(shù)給我。
Spread
Spread 就是 Rest 的逆操作，看代碼：
計(jì)算一個(gè)數(shù)組(大于三個(gè)元素)中前三個(gè)元素的和以及所有元素的和。
function sum(x, y, z, ...r) {
let firstThree = x + y + z;
let total = x + y + z + r.reduce((left, right) => left + right);
console.log("前三個(gè)值為: " + firstThree);
console.log("總和為: " + total);
}
sum(...[1, 2, 3, 4]);
sum(...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
結(jié)果:
> 前三個(gè)值為: 6 > 總和為: 10 > 前三個(gè)值為: 6 > 總和為: 55
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/83763.html
摘要：用聲明的常量無(wú)法在后面的代碼中改值。表達(dá)式里還有一個(gè)很方便的就是表達(dá)式，舉個(gè)例子運(yùn)行結(jié)果為后聲明的里以數(shù)組的形式存放了函數(shù)的剩余參數(shù)，是不是很方便。 ES6入門(mén)筆記（一） 安裝babel 由于瀏覽器對(duì)ES6的支持還不是很好，編寫(xiě)ES6代碼前我們要安裝一個(gè)babel工具將ES6代碼編譯成ES5代碼，用如下命令安裝babel： npm install -g babel-core ...
摘要：目前前端主要有以下四種方法會(huì)觸發(fā)對(duì)應(yīng)的回調(diào)方法方法客戶端回調(diào)客戶端回調(diào)參考地址每日一瞥是團(tuán)隊(duì)內(nèi)部日常業(yè)界動(dòng)態(tài)提煉，發(fā)布時(shí)效可能略有延后。 showImg(https://segmentfault.com/img/remote/1460000017975436?w=1200&h=630); 「ES2015 - ES2018」Rest / Spread Properties 梳理 Thr...
EcmaScript 其實(shí)是一種語(yǔ)言規(guī)范，常見(jiàn)的 JavaScript, ActionScript 等都是其具體實(shí)現(xiàn)，平時(shí)使用中一般可以將其和Javascript對(duì)等稱呼，本系列教程主要講述 EcmaScript2015(ES6) 為JavaScript帶來(lái)的新的特性，并初步掌握如何利用其進(jìn)行開(kāi)發(fā)。 本系列面向有一定基礎(chǔ)知識(shí)的ES5使用者，不適合初學(xué)者。 先來(lái)看兩段代碼： Human.js exp...
摘要：雖然夠好用，奈何沒(méi)有瀏覽器對(duì)其可以完全支持，本文書(shū)寫(xiě)時(shí)間，開(kāi)發(fā)版號(hào)稱已經(jīng)支持的特性。開(kāi)始安裝本系列假定讀者都有使用經(jīng)驗(yàn)，如果還沒(méi)有，趕緊去這里了解并安裝吧。到此，我們的已經(jīng)準(zhǔn)備就緒。 通過(guò)前面章節(jié)的講解，大家對(duì)ES2015的一些新語(yǔ)法有了初步的理解，之前我們的測(cè)試代碼都可以直接放入 Chrome Console 中直接運(yùn)行，為了更好的學(xué)習(xí)后面的面向?qū)ο蠛湍K開(kāi)發(fā)，我先用一章介紹一下 B...
摘要：為了使程序員能夠一次一個(gè)地處理集合中的元素，引入了迭代器接口。迭代器使用該方法獲取對(duì)象屬性名稱的數(shù)組，然后將其分配給常量。迭代器的缺點(diǎn)是它們不適合表示異步數(shù)據(jù)源。每次循環(huán)時(shí)，都會(huì)調(diào)用迭代器的方法，它返回一個(gè)。 前言 原文地址：https://css-tricks.com/new-es2018-features-every-javascript-developer-should-kno...
閱讀 2773·2023-04-25 17:21
閱讀 2627·2021-11-23 09:51
閱讀 2936·2021-09-24 10:32
閱讀 3899·2021-09-23 11:33
閱讀 2036·2019-08-30 15:44
閱讀 3521·2019-08-30 11:18
閱讀 3628·2019-08-30 10:53
閱讀 701·2019-08-26 13:25
