成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

JavaScript重構技巧-讓函數簡單明了

開發 前端
JavaScript 是一種易于學習的編程語言,編寫運行并執行某些操作的程序很容易。然而,要編寫一段干凈的JavaScript 代碼是很困難的。在本文中,我們將研究如何讓我們的函數更清晰明了。

本文轉載自微信公眾號「大遷世界」,轉載本文請聯系大遷世界公眾號。

JavaScript 是一種易于學習的編程語言,編寫運行并執行某些操作的程序很容易。然而,要編寫一段干凈的JavaScript 代碼是很困難的。

在本文中,我們將研究如何讓我們的函數更清晰明了。

[[327780]]

對對象參數使用解構

如果我們希望函數接收很多參數,那么應該使用對象。在此基礎上,我們就可以使用解構語法提取我們需要的參數。

例如,對于對象參數,我們可能會這樣使用:

  1. const greet = (obj) => { 
  2.   return `${obj.greeting}, ${obj.firstName}${obj.lastName}`; 

上面的語法,我們可以使用解構方式會更優雅:

  1. const greet = ({ 
  2.   greeting, 
  3.   firstName, 
  4.   lastName 
  5. }) => { 
  6.   return `${greeting}, ${firstName}${lastName}`; 

這樣我們可以少寫很多重復的東西,命名也會更加清晰。

命名回調函數

好的命名會使閱讀代碼更容易,回調函數的命名也是一樣的,例如下面不好的命名方式:

  1. const arr = [1, 2, 3].map(a => a * 2); 

我們可以這樣分開命名:

  1. const double = a => a * 2; 
    1. if (score === 100 || 
    2.   remainingPlayers === 1 || 
    3.   remainingPlayers === 0) { 
    4.   quitGame(); 
  2. const arr = [1, 2, 3].map(double); 

現在我們知道我們的回調函數實際上是用來加倍原始數組的每個元素的。

讓條件句具有描述性

通過在自己的函數的條件語句中編寫條件表達式,可以使條件語句更具描述性。

對于復雜的條件判斷, 我們可以單獨使用函數來表示,會讓條件語句更具描述性,例如下面代碼:

  1. if (score === 100 || 
  2.   remainingPlayers === 1 || 
  3.   remainingPlayers === 0) { 
  4.   quitGame(); 

當條件多時,我們可以用函數來表示:

  1. const winnerExists = () => { 
  2.   return score === 100 || 
  3.     remainingPlayers === 1 || 
  4.     remainingPlayers === 0 
  5. if (winnerExists()) { 
  6.   quitGame(); 

這樣,我們就知道這些條件是檢查游戲代碼中是否存在贏家的條件。

在第一個例子中,我們有一個很長的表達式在括號里,大多數人可能不知道它在判斷什么。但在第二個例子中,一旦我們把它放到一個命名函數中,我們就知道它大概在判斷什么了。

在條件語句中擁有一個命名函數比在擁有一堆布爾表達式要清晰得多。

用 Map 或 Object替換 switch 語句

由于 switch語句很長,這樣容易出錯。因此,如果可以的話,我們應該用較短的代碼代替它們。許多switch語句可以用map或object替換。例如,如果我們有下面的switch語句:

  1. const getValue = (prop) => { 
  2.   switch (prop) { 
  3.     case 'a': { 
  4.       return 1; 
  5.     } 
  6.     case 'b': { 
  7.       return 2; 
  8.     } 
  9.     case 'c': { 
  10.       return 3; 
  11.     } 
  12.   } 
  13. const val = getValue('a'); 

我們可以將其替換為object或map,如下所示:

  1. const obj = { 
  2.   a: 1, 
  3.   b: 2, 
  4.   c: 3 
  5. const val = obj['a']; 

如我們所見,switch 語法很長。我們需要嵌套多個帶有多個return語句的塊,只是為了獲得給定prop值的返回值。

相反使用對象,我們僅僅需要一個對象就可以了:

  1. const obj = { 
  2.   a: 1, 
  3.   b: 2, 
  4.   c: 3 

使用對象還有一個好處,就是對于鍵不必是有效的標識符號,這樣這增加了更多的靈活性。

我們還可以使用map替換對象,如下所示:

  1. const map = new Map([['a', 1], ['b', 2], ['c', 3]]) 
  2. const val = map.get('a') 

如我們所見,使用Map時,代碼也短很多。我們通過傳遞一個數組,數組中的每項包含鍵和值。然后,我們僅使用Map實例的get方法從鍵中獲取值。

Map優于對象的一個好處是,我們可以將數字,布爾值或對象等其他值用作鍵。而對象只能將字符串或symbol作為鍵。

總結

使用解構語法可以使對象參數更清楚,更短。這樣,可以選擇性地將屬性作為變量進行訪問。

通過將條件表達式放在它自己的命名函數中,可以使條件表達式更具描述性。同樣,我們應該為回調函數命名,以便更容易地讀取代碼。

最后,應該盡可能用Map和Object替換switch語句。

 

責任編輯:趙寧寧 來源: 大遷世界
相關推薦

2009-11-11 13:13:00

ADO.NET分頁

2023-06-25 12:10:34

Linux文件權限

2015-02-28 11:36:01

FDD

2018-03-19 09:42:33

智能制造

2022-03-22 08:24:10

冒泡排序算法JS

2010-04-15 11:50:14

無線局域網安全配置

2022-08-21 10:21:07

Linux虛擬內存

2018-12-28 10:43:59

5G公式4G

2020-06-01 08:42:11

JavaScript重構函數

2020-06-10 08:37:21

JavaScript重構技巧

2020-02-25 15:00:42

數據分布式架構

2025-02-12 11:59:15

DeepSeekAI語言模型

2020-06-09 09:13:12

JavaScript重構對象

2018-08-14 09:28:40

分布式事務 ACID

2020-06-08 08:46:59

JavaScript條件類名

2023-05-04 23:54:02

JavaScrip代碼技巧

2022-02-25 23:46:54

JavaScript網站開發

2011-06-03 13:48:18

JavaScript重構

2011-09-29 09:50:44

JavaScript

2022-08-16 10:53:56

JavaScript前端技巧
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 国产精品免费一区二区 | 狠狠爱一区二区三区 | 另类亚洲视频 | 成人免费高清 | 免费av观看 | 欧美日本在线观看 | 午夜影视网 | 欧美成人精品一区二区男人看 | 国产成人午夜高潮毛片 | 日韩高清一区 | 欧美日韩不卡在线 | 亚洲视频免费在线观看 | 久久精品视频91 | 亚洲国产欧美在线 | 亚洲免费影院 | 久久久成人免费一区二区 | 狠狠综合网 | 国产日韩一区二区三区 | 人人澡人人爱 | 性欧美xxxx | 亚洲一区二区在线 | 欧美成人在线影院 | 欧美va大片| 久久国产日本 | 日本中出视频 | 国产成人jvid在线播放 | 98成人网 | 综合激情久久 | 亚洲成人精品一区 | 久久精品亚洲一区二区三区浴池 | 狠狠干天天干 | 亚洲国产精品久久人人爱 | www,黄色,com | 日韩成人精品一区二区三区 | 日韩成人免费 | 中文字幕 国产 | 一区天堂 | 免费视频成人国产精品网站 | 成人午夜影院 | 懂色中文一区二区三区在线视频 | 日本精品久久久久久久 |