建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
成都創(chuàng)新互聯(lián)公司長(zhǎng)期為超過(guò)千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為江西企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、網(wǎng)站建設(shè)，江西網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
JavaScript 是一種易于學(xué)習(xí)的編程語(yǔ)言，編寫(xiě)運(yùn)行并執(zhí)行某些操作的程序很容易。然而，要編寫(xiě)一段干凈的JavaScript 代碼是很困難的。
在本文中，我們將研究如何讓我們的函數(shù)更清晰明了。
對(duì)對(duì)象參數(shù)使用解構(gòu)
如果我們希望函數(shù)接收很多參數(shù)，那么應(yīng)該使用對(duì)象。在此基礎(chǔ)上，我們就可以使用解構(gòu)語(yǔ)法提取我們需要的參數(shù)。
例如，對(duì)于對(duì)象參數(shù)，我們可能會(huì)這樣使用：
- const greet = (obj) => {
- return `${obj.greeting}, ${obj.firstName}${obj.lastName}`;
- }
上面的語(yǔ)法，我們可以使用解構(gòu)方式會(huì)更優(yōu)雅：
- const greet = ({
- greeting,
- firstName,
- lastName
- }) => {
- return `${greeting}, ${firstName}${lastName}`;
- }
這樣我們可以少寫(xiě)很多重復(fù)的東西，命名也會(huì)更加清晰。
命名回調(diào)函數(shù)
好的命名會(huì)使閱讀代碼更容易，回調(diào)函數(shù)的命名也是一樣的，例如下面不好的命名方式：
- const arr = [1, 2, 3].map(a => a * 2);
我們可以這樣分開(kāi)命名：
- const double = a => a * 2;
- if (score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0) {
- quitGame();
- }
- const arr = [1, 2, 3].map(double);
現(xiàn)在我們知道我們的回調(diào)函數(shù)實(shí)際上是用來(lái)加倍原始數(shù)組的每個(gè)元素的。
讓條件句具有描述性
通過(guò)在自己的函數(shù)的條件語(yǔ)句中編寫(xiě)條件表達(dá)式，可以使條件語(yǔ)句更具描述性。
對(duì)于復(fù)雜的條件判斷， 我們可以單獨(dú)使用函數(shù)來(lái)表示，會(huì)讓條件語(yǔ)句更具描述性，例如下面代碼：
- if (score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0) {
- quitGame();
- }
當(dāng)條件多時(shí)，我們可以用函數(shù)來(lái)表示：
- const winnerExists = () => {
- return score === 100 ||
- remainingPlayers === 1 ||
- remainingPlayers === 0
- }
- if (winnerExists()) {
- quitGame();
- }
這樣，我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。
在第一個(gè)例子中，我們有一個(gè)很長(zhǎng)的表達(dá)式在括號(hào)里，大多數(shù)人可能不知道它在判斷什么。但在第二個(gè)例子中，一旦我們把它放到一個(gè)命名函數(shù)中，我們就知道它大概在判斷什么了。
在條件語(yǔ)句中擁有一個(gè)命名函數(shù)比在擁有一堆布爾表達(dá)式要清晰得多。
用 Map 或 Object替換 switch 語(yǔ)句
由于 switch語(yǔ)句很長(zhǎng)，這樣容易出錯(cuò)。因此，如果可以的話(huà)，我們應(yīng)該用較短的代碼代替它們。許多switch語(yǔ)句可以用map或object替換。例如，如果我們有下面的switch語(yǔ)句:
- const getValue = (prop) => {
- switch (prop) {
- case 'a': {
- return 1;
- }
- case 'b': {
- return 2;
- }
- case 'c': {
- return 3;
- }
- }
- }
- const val = getValue('a');
我們可以將其替換為object或map，如下所示：
- const obj = {
- a: 1,
- b: 2,
- c: 3
- }
- const val = obj['a'];
如我們所見(jiàn)，switch 語(yǔ)法很長(zhǎng)。我們需要嵌套多個(gè)帶有多個(gè)return語(yǔ)句的塊，只是為了獲得給定prop值的返回值。
相反使用對(duì)象，我們僅僅需要一個(gè)對(duì)象就可以了：
- const obj = {
- a: 1,
- b: 2,
- c: 3
- }
使用對(duì)象還有一個(gè)好處，就是對(duì)于鍵不必是有效的標(biāo)識(shí)符號(hào)，這樣這增加了更多的靈活性。
我們還可以使用map替換對(duì)象，如下所示：
- const map = new Map([['a', 1], ['b', 2], ['c', 3]])
- const val = map.get('a')
如我們所見(jiàn)，使用Map時(shí)，代碼也短很多。我們通過(guò)傳遞一個(gè)數(shù)組，數(shù)組中的每項(xiàng)包含鍵和值。然后，我們僅使用Map實(shí)例的get方法從鍵中獲取值。
Map優(yōu)于對(duì)象的一個(gè)好處是，我們可以將數(shù)字，布爾值或?qū)ο蟮绕渌涤米麈I。而對(duì)象只能將字符串或symbol作為鍵。
總結(jié)
使用解構(gòu)語(yǔ)法可以使對(duì)象參數(shù)更清楚，更短。這樣，可以選擇性地將屬性作為變量進(jìn)行訪(fǎng)問(wèn)。
通過(guò)將條件表達(dá)式放在它自己的命名函數(shù)中，可以使條件表達(dá)式更具描述性。同樣，我們應(yīng)該為回調(diào)函數(shù)命名，以便更容易地讀取代碼。
最后，應(yīng)該盡可能用Map和Object替換switch語(yǔ)句。
當(dāng)前文章：JavaScript重構(gòu)技巧-讓函數(shù)簡(jiǎn)單明了
網(wǎng)址分享：http://www.5511xx.com/article/cdjohjd.html
