摘要:這些方法將會(huì)被使用擴(kuò)展運(yùn)算符,三個(gè)點(diǎn)擴(kuò)展操作符擴(kuò)展運(yùn)算符用于把一個(gè)數(shù)組展開(kāi)變?yōu)橐粋€(gè)數(shù)組元素序列一系列逗號(hào)隔開(kāi)的值。
這些JavaScript方法將會(huì)在幾分鐘內(nèi)提高你的技能
現(xiàn)在創(chuàng)建的大多數(shù)應(yīng)用都會(huì)需要對(duì)一些數(shù)據(jù)集合做修改。處理集合中的元素是你最可能遇到的操作。不要再使用常規(guī)的像是(const i; i < value.length; i++ )的for-loop方式。
如果你想要展示一個(gè)商品列表,并且對(duì)這個(gè)數(shù)據(jù)集合做分類、篩選、搜索、修改和更新。或者你想做一些快速計(jì)算比如求和,相乘等等。實(shí)現(xiàn)這些操作的最佳方式是什么?
可能你不喜歡箭頭函數(shù),你也不想花費(fèi)太多時(shí)間去學(xué)習(xí)這些新東西,或者它們跟你沒(méi)有關(guān)系。放心,并不是只有你這樣。我會(huì)同時(shí)在ES5(普通函數(shù))和ES6(箭頭函數(shù))中展示給你看怎么實(shí)現(xiàn)。
注意:箭頭函數(shù)和函數(shù)聲明/表達(dá)式不是等價(jià)的,而且也不能盲目替換。你要記得this關(guān)鍵字在兩者之間的作用不一樣的。
Spread operator(擴(kuò)展運(yùn)算符,三個(gè)點(diǎn))
for…of iterator
includes()
some()
every()
filter()
map()
reduce()
1. 擴(kuò)展操作符擴(kuò)展運(yùn)算符用于把一個(gè)數(shù)組展開(kāi)變?yōu)橐粋€(gè)數(shù)組元素序列(一系列逗號(hào)隔開(kāi)的值)。也可以展開(kāi)對(duì)象字面量。
為什么我應(yīng)該用它?簡(jiǎn)單且快速的方式列出數(shù)組元素
同時(shí)用于數(shù)組和對(duì)象
快速且直觀的方式傳遞參數(shù)
只需要寫三個(gè)點(diǎn)
例子:假如你想展示一個(gè)喜愛(ài)的水果列表,但不是通過(guò)一個(gè)循環(huán)函數(shù)的方式。你可以用一個(gè)擴(kuò)展操作符,像這樣:
const favoriteFood = ["Pizza", "Fries", "Swedish-meatballs"]; console.log(...favoriteFood); //Pizza Fries Swedish-meatballs2. for…of 迭代器
for...of利用循環(huán)/迭代器表達(dá)式遍歷集合,為你提供了修改特定元素的能力。它可以替代常規(guī)的for-loop方式。
為什么我應(yīng)該用它?一種簡(jiǎn)單的方式添加、更新一個(gè)元素
執(zhí)行計(jì)算(累加、相乘)
代碼簡(jiǎn)單,可讀性高
例子:如果你有一個(gè)工具箱,你想要展示里面所有的工具。for...of迭代器會(huì)讓它變得更簡(jiǎn)單。
const toolBox = ["Hammer", "Screwdriver", "Ruler"] for(const item of toolBox) { console.log(item) } // Hammer // Screwdriver // Ruler3. Includes() 方法
include()方法被用來(lái)檢查數(shù)集合中是否包含指定元素,如果存在則返回true,否則返回false。記得,他是區(qū)分大小寫的:如果集合中的這個(gè)元素是SCHOOL,但你查詢的是school,那么它將會(huì)返回false。
為什么我應(yīng)該用它?可以構(gòu)建簡(jiǎn)單的查詢代碼塊
一種直觀的方法來(lái)確定元素是否存在
它使用條件語(yǔ)句來(lái)修改、過(guò)濾等等
代碼可讀性高
例子:假如,無(wú)論什么原因,你不知道車庫(kù)里有什么車,你需要一個(gè)系統(tǒng)檢查你想要的車在不在車庫(kù)里。includes()可以拯救你!
const garge = ["BMW", "AUDI", "VOLVO"]; const findCar = garge.includes("BMW"); console.log(findCar); // true4. Some() 方法
some()方法檢查在數(shù)組中是否存在某些元素,如果存在返回true否則返回false。這跟includes方法有幾分相似,但是參數(shù)是一個(gè)函數(shù),而不是一個(gè)字符串。
為什么我應(yīng)該用它?可以確保某些項(xiàng)測(cè)試通過(guò)
用函數(shù)執(zhí)行條件表達(dá)式
使你的代碼更直觀
它非常好用
例子:假如你是一個(gè)酒吧老板,也不在乎誰(shuí)進(jìn)入這家酒吧。但是某些人是不允許進(jìn)來(lái)的,因?yàn)樗麄円呀?jīng)喝了很多酒了。下面分別用ES5和ES6檢查他們的不同:
ES5const age = [16, 14, 18]; age.some(function(person) { return person >= 18; }); // Output: trueES6
const age = [16, 14, 18]; age.some((person) => person >= 18); // true5. Every() 方法
every()方法遍歷數(shù)組,檢查數(shù)組中的每一項(xiàng)是否都可以通過(guò),如果都通過(guò)返回true否則返回false。與some()方法概念有些相似。但是每一項(xiàng)都必須通過(guò)條件表達(dá)式,否則,它會(huì)返回false。
為什么我應(yīng)該用它?可以確保所有項(xiàng)測(cè)試通過(guò)
可以用函數(shù)執(zhí)行條件表達(dá)式
使代碼更直觀
例子:上次你用some()方法讓某些未成年學(xué)生進(jìn)了酒吧,有人舉報(bào)了這事,并且警察逮捕了你。這次你害怕還會(huì)發(fā)生這樣的事情,你將用every()方法確保每一個(gè)進(jìn)來(lái)酒吧的人都是滿足年齡限制的。
ES5const age = [15, 20, 19]; age.every(function(person) { return person >= 18; }) // Output: falseES6
const age = [15, 20, 19]; age.every((person)=> person >= 18); //false6. Filter() 方法
filter()方法會(huì)創(chuàng)建一個(gè)包含所有滿足條件的元素的新數(shù)組。
為什么我應(yīng)該用它?可以避免對(duì)原始數(shù)組的修改
可以讓你過(guò)濾掉那些你不需要的元素
讓你的代碼可讀性更高
例子:假如你只想要大于或者等于30的價(jià)格,過(guò)濾掉其他價(jià)格。
ES5//array const prices = [25, 30, 15, 55, 40, 10]; prices.filter(function(price){ return price >= 30; }) // Output:?[30, 55, 40]ES6
const prices = [25, 30, 15, 55, 40, 10]; prices.filter((price) => price >= 30); // [30, 55, 40]7. Map() 方法
map()方法跟filter()方法想似,也是會(huì)返回一個(gè)新數(shù)組。但是,唯一的區(qū)別是它用于修改數(shù)組中的元素。
為什么我應(yīng)該用它?可以避免對(duì)原始數(shù)組的修改
可以修改你想修改的元素
代碼可讀性更高
例子:假如你有一個(gè)商品的價(jià)格列表,你的經(jīng)理要展示一個(gè)被征收25%的稅之前的價(jià)格列表。map()方法可以幫你實(shí)現(xiàn)它。
ES5const productPriceList = [200, 356, 1500, 5000]; productPriceList.map(function(item){ return item * 0.75; }) //?[150, 267, 1125, 3750]ES6
const productPriceList = [200, 356, 1500, 5000]; productPriceList.map((item) => item * 0.75); //?[150, 267, 1125, 3750]8. Reduce() 方法
reduce()方法用來(lái)把一個(gè)數(shù)組轉(zhuǎn)化為一個(gè)int值,一個(gè)對(duì)象,一個(gè)promises串(順序執(zhí)行的promises)等等。實(shí)際上,一個(gè)簡(jiǎn)單的用例就是對(duì)一系列int值求和。簡(jiǎn)單來(lái)說(shuō),它就是把數(shù)組中的所有值最終"縮短"為一個(gè)值。
為什么我應(yīng)該用它?合并計(jì)算為一個(gè)值
重復(fù)執(zhí)行計(jì)算
把對(duì)象按照屬性分組
順序執(zhí)行promises代碼塊
一種快速的執(zhí)行運(yùn)算函數(shù)的方式
例子:假如你想得到這一周的消費(fèi)總和,reduce()可以幫你實(shí)。
ES5const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350] weeklyExpenses.reduce(function(first, last) { return first + last; }) // 8530ES6
const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350] weeklyExpenses.reduce((first, last) => first + last); // 8530
原文鏈接:These JavaScript methods will boost your skills in just a few minutes
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/95069.html
摘要:對(duì)于許多年輕的計(jì)算機(jī)或相關(guān)專業(yè)畢業(yè)生,在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到第一份全職工作可能是你在職業(yè)生涯中遇到的最大的挑戰(zhàn)。總結(jié)畢業(yè)后在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到你的第一份工作是一個(gè)艱巨的任務(wù)。 原文:How to Land a Development Job Without Experience作者:Paddy Sherry譯者:LeviDing聲明:轉(zhuǎn)載請(qǐng)注明出處。 ??許多...
摘要:對(duì)于許多年輕的計(jì)算機(jī)或相關(guān)專業(yè)畢業(yè)生,在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到第一份全職工作可能是你在職業(yè)生涯中遇到的最大的挑戰(zhàn)。總結(jié)畢業(yè)后在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到你的第一份工作是一個(gè)艱巨的任務(wù)。 原文:How to Land a Development Job Without Experience作者:Paddy Sherry譯者:LeviDing聲明:轉(zhuǎn)載請(qǐng)注明出處。 ??許多...
摘要:對(duì)于許多年輕的計(jì)算機(jī)或相關(guān)專業(yè)畢業(yè)生,在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到第一份全職工作可能是你在職業(yè)生涯中遇到的最大的挑戰(zhàn)。總結(jié)畢業(yè)后在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到你的第一份工作是一個(gè)艱巨的任務(wù)。 原文:How to Land a Development Job Without Experience作者:Paddy Sherry譯者:LeviDing聲明:轉(zhuǎn)載請(qǐng)注明出處。 ??許多...
摘要:對(duì)于許多年輕的計(jì)算機(jī)或相關(guān)專業(yè)畢業(yè)生,在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到第一份全職工作可能是你在職業(yè)生涯中遇到的最大的挑戰(zhàn)。總結(jié)畢業(yè)后在沒(méi)有實(shí)際項(xiàng)目開(kāi)發(fā)經(jīng)驗(yàn)的情況下找到你的第一份工作是一個(gè)艱巨的任務(wù)。 原文:How to Land a Development Job Without Experience作者:Paddy Sherry譯者:LeviDing聲明:轉(zhuǎn)載請(qǐng)注明出處。 ??許多...
摘要:全棧開(kāi)發(fā)是一個(gè)學(xué)習(xí)實(shí)現(xiàn)提高的過(guò)程。解除對(duì)開(kāi)發(fā)人員的限制所有的職業(yè)都在持續(xù)的進(jìn)化。哪怕是爆炸和擁擠的印度招聘市場(chǎng),全棧工程師在年也非常的搶手。印度的創(chuàng)業(yè)公司已經(jīng)開(kāi)發(fā)意識(shí)到全棧工程師的重要意義,全棧會(huì)越來(lái)越重要。 在不斷壯大的招聘市場(chǎng)上,最需要的是有非常廣泛技術(shù)棧的人。 前言 敬愛(ài)的讀者,大家好。大家經(jīng)常討論的話題是作為一個(gè)軟件工程師是一個(gè)持續(xù)學(xué)習(xí)的過(guò)程。因?yàn)楝F(xiàn)有的趨勢(shì)和技術(shù)在軟件領(lǐng)域會(huì)很...
閱讀 1416·2021-09-02 09:53
閱讀 2678·2021-07-29 13:50
閱讀 1726·2019-08-30 11:07
閱讀 1584·2019-08-30 11:00
閱讀 1461·2019-08-29 14:00
閱讀 1855·2019-08-29 12:52
閱讀 2573·2019-08-29 11:11
閱讀 3430·2019-08-26 12:23