JavaScript一直在變化進(jìn)步著,這兒列舉了一些小技巧幫你在2019年寫出更簡潔，高效的可拓展的代碼。下面共列舉了9個講究使用的小技巧來幫助你成為更好的開發(fā)者。

創(chuàng)新互聯(lián)建站專注于龍沙企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城系統(tǒng)網(wǎng)站開發(fā)。龍沙網(wǎng)站建設(shè)公司,為龍沙等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

1. async / await

如果你還陷入到回調(diào)地獄中，那么你應(yīng)該回到2014年去開發(fā)你的代碼。除非絕對必要(像第三方庫需要或者性能原因)，否則不要使用回調(diào)。Promise是非常好的解決回調(diào)地獄，但是當(dāng)你的代碼變得越來越大時，它也會變得不太好用。我現(xiàn)在的解決方案就是async / await，它極大提高了代碼可讀性以及簡潔性。在所有使用Promise的地方你都可以替換成await，在你需要返回Promise對象，簡單await它并返回，為了使它不報錯，你需要在定義函數(shù)的開頭添加async。事實上，async / await就是Promise的語法糖。下面就是一個簡單的例子：

 
 
 
  
  
  
async function getData() { 
  
  
  
 const result = await axios.get('https://dube.io/service/ping') 
  
  
  
 const data = result.data 
  
  
  
  
  
  
  
 console.log('data', data) 
  
  
  
  
  
  
  
 return data 
  
  
  
} 
  
  
  
getData() 
 
 

await 操作符用于等待一個Promise 對象。它只能在異步函數(shù) async function 中使用。 async / await是屬于ES2017的內(nèi)容，所以可能需要babel編譯你的代碼。不過現(xiàn)在的主流瀏覽器都已經(jīng)支持了。

2. 異步控制流

經(jīng)常地，我們會遇到這樣的需求，請求獲取多個數(shù)據(jù)集并對每個數(shù)據(jù)集進(jìn)行各自處理或者需要等所有異步回調(diào)完成后返回一個值。遇到這些情況，我是這么處理的：

for…of

假設(shè)我們的頁面有多個Pokemon(口袋妖怪)，需要獲取到它們的詳細(xì)的信息。我們不想等所有調(diào)用結(jié)束，特別是不知道它有多少次調(diào)用，我們僅想在它有調(diào)用返回時就更新我們的數(shù)據(jù)集。可以用for…of來遍歷數(shù)組，在代碼塊里執(zhí)行async，這樣的話，只有每次await執(zhí)行成功，代碼才會繼續(xù)往下執(zhí)行。

這里要著重說明，這樣做可能會導(dǎo)致性能瓶頸(當(dāng)請求很多的時候)，但像這樣做才能到達(dá)預(yù)期的效果。請看下面的例子：

 
 
 
  
  
  
import axios from 'axios' 
  
  
  
let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}] 
  
  
  
async function fetchData(dataSet) { 
  
  
  
 for(entry of dataSet) { 
  
  
  
 const result = await axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) 
  
  
  
 const newData = result.data 
  
  
  
 updateData(newData) 
  
  
  
  
  
  
  
 console.log(myData) 
  
  
  
 } 
  
  
  
} 
  
  
  
function updateData(newData) { 
  
  
  
 myData = myData.map(el => { 
  
  
  
 if(el.id === newData.id) return newData 
  
  
  
 return el 
  
  
  
 }) 
  
  
  
} 
 
 

fetchData(myData)

這個代碼是能正常運行，你可以輕松地復(fù)制它到 code sandbox運行。

 
 
 
  
  
  
Promise.all 
 
 

如果你想同時獲取所有口袋妖怪的詳情呢?你需要等待所有的請求的完成返回，這時簡單使用Promise.all：

 
 
 
  
  
  
import axios from 'axios'  
  
  
  
let myData = [{id: 0}, {id: 1}, {id: 2}, {id: 3}] 
  
  
  
async function fetchData(dataSet) { 
  
  
  
 const pokemonPromises = dataSet.map(entry => { 
  
  
  
 return axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) 
  
  
  
 }) 
  
  
  
 const results = await Promise.all(pokemonPromises) 
  
  
  
  
  
  
  
 results.forEach(result => { 
  
  
  
 updateData(result.data) 
  
  
  
 }) 
  
  
  
  
  
  
  
 console.log(myData)  
  
  
  
} 
  
  
  
function updateData(newData) { 
  
  
  
 myData = myData.map(el => { 
  
  
  
 if(el.id === newData.id) return newData 
  
  
  
 return el 
  
  
  
 }) 
  
  
  
} 
  
  
  
  
  
  
  
fetchData(myData) 
 
 

for...of 和 Promise.all都是ES6以后提出來的，請確保你的環(huán)境能運行。

3. 解構(gòu)(Destructuring ) & 默認(rèn)值

我們接著上面的那個例子，提取一部分代碼：

 
 
 
  
  
  
const result = axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`) 
  
  
  
const data = result.data 
 
 

有一種簡單的方法，解構(gòu)從數(shù)組，或?qū)ο笾蝎@取一些屬性(值)。像這樣：

const { data } = await axios.get(...)

注意當(dāng)解構(gòu)的時候，通常要賦給它一個默認(rèn)值。這樣確保你不會得到undefined以及你不用自己手動地檢查變量。

 
 
 
  
  
  
const { id = 5 } = {} 
  
  
  
console.log(id) // 5 
 
 

這個技巧也被運用到了函數(shù)參數(shù)中。例如：

 
 
 
  
  
  
function calculate({operands = [1, 2], type = 'addition'} = {}) { 
  
  
  
 return operands.reduce((acc, val) => { 
  
  
  
 switch(type) { 
  
  
  
 case 'addition': 
  
  
  
 return acc + val 
  
  
  
 case 'subtraction': 
  
  
  
 return acc - val 
  
  
  
 case 'multiplication': 
  
  
  
 return acc * val 
  
  
  
 case 'division': 
  
  
  
 return acc / val 
  
  
  
 } 
  
  
  
 }, ['addition', 'subtraction'].includes(type) ? 0 : 1) 
  
  
  
} 
  
  
  
console.log(calculate()) // 3 
  
  
  
console.log(calculate({type: 'division'})) // 0.5 
  
  
  
console.log(calculate({operands: [2, 3, 4], type: 'multiplication'})) // 24 
 
 

這個例子起初看起來可能有點混亂，但是慢慢觀察。當(dāng)我們沒有給函數(shù)傳遞參數(shù)的時候，就會使用默認(rèn)值。一旦我們開始傳遞參數(shù)，僅會使用那些沒有傳遞的參數(shù)的默認(rèn)值。這樣，減少了你對異常狀態(tài)的處理。

4. 真值 & 假值

當(dāng)使用默認(rèn)值，就可以不用對現(xiàn)有值進(jìn)行一些額外的檢查。但是了解你的變量是真值還是假值是非常棒的。它能提高你的代碼擴展性，更具有說服力的以及簡潔。我?？吹较旅嬉恍懛ǎ?/p>

 
 
 
  
  
  
if(myBool === true) { 
  
  
  
 console.log(...) 
  
  
  
} 
  
  
  
// OR 
  
  
  
if(myString.length > 0) { 
  
  
  
 console.log(...) 
  
  
  
} 
  
  
  
// OR 
  
  
  
if(isNaN(myNumber)) { 
  
  
  
 console.log(...) 
  
  
  
} 
 
 

為了用這些簡潔的判斷，你要充分理解js中真值，假值具體有哪些?這里概述一下：

假值：

1.字符串，但長度為0

2.數(shù)字0

3.false

4.undefined

5.null

6.NaN

真值：

1.空數(shù)組

2.空對象

3.其他有值的數(shù)據(jù).注意：在判斷真/假值，還應(yīng)該注意到你使用的是等于'=='，還是全等'===',這經(jīng)常會導(dǎo)致bug。對我而言，經(jīng)常是數(shù)字0。

邏輯運算與三元運算符

邏輯運算

邏輯運算是基于多個表達(dá)式真假的判斷，注意到j(luò)s是惰性求值的策略。邏輯運算一般返回一個布爾值。&& 和 || 運算符會返回一個指定操作數(shù)的值。來看這里：

 
 
 
  
  
  
console.log(true && true) // true 
  
  
  
console.log(false && true) // false 
  
  
  
console.log(true && false) // false 
  
  
  
console.log(false && false) // false 
  
  
  
console.log(true || true) // true 
  
  
  
console.log(true || false) // true 
  
  
  
console.log(false || true) // true 
  
  
  
console.log(false || false) // false 
 
 

進(jìn)行的邏輯運算，是按照下面的規(guī)則進(jìn)行的：

• &&:第一個值為假值，則直接返回;如果為真值，則直接返回第二的值
• ||:第一個值為真，則直接返回;如果為假，則直接返回第二的值。

console.log(0 && {a: 1}) // 0console.log(false && 'a') // falseconsole.log('2' && 5) // 5console.log([] || false) // []console.log(NaN || null) // nullconsole.log(true || 'a') // true

三元運算符

三元運算符和邏輯運算是相似的，但是它有3個部分：

condition ? expr1 : expr2

condition為進(jìn)行條件判斷的部分，將會得到真值或者假值

expr1為條件判斷為真時返回的值

expr2為條件判斷為假時返回的值

例如：

 
 
 
  
  
  
const lang = 'German' 
  
  
  
console.log(lang === 'German' ? 'Hallo' : 'Hello') // Hallo 
  
  
  
console.log(lang ? 'Ja' : 'Yes') // Ja 
  
  
  
console.log(lang === 'French' ? 'Bon soir' : 'Good evening') // Good evening 
 
 

6. Optional Chaining

過去在 Object 屬性鏈的調(diào)用中，很容易因為某個屬性不存在而導(dǎo)致之后出現(xiàn)Cannot read property xxx of undefined的錯誤。為了確認(rèn)需要向這樣處理：

 
 
 
  
  
  
let data 
  
  
  
if(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData 
 
 

這樣是冗余的，有一個新的提案的方法就是Optional Chaining，如下的形式：

 
 
 
  
  
  
const data = myObj?.firstProp?.secondProp?.actualData 
 
 

我認(rèn)為它是檢查嵌套屬性最佳方法，代碼是如此的簡潔。

這個特性可以說是非常實用了，不過它現(xiàn)在處于 stage-1 階段。你可以在.babelrc文件中引入 @babel/plugin-proposal-optional-chaining插件來使用它。

7. Class properties & binding

在JavaScript中函數(shù)綁定也是經(jīng)常的工作任務(wù)?，F(xiàn)在，大家應(yīng)該都是用箭頭函數(shù)自動綁定this到這個類上的(這里可能有歧義，首先箭頭函數(shù)里面是沒有this 和arguments的，這里的this把它當(dāng)成一個參數(shù)就行)。如果不用箭頭函數(shù)，我們就需要在構(gòu)造函數(shù)綁定this，當(dāng)類的方法很多的時候，這就顯得很冗余。因此，建議和提倡在類里面用箭頭函數(shù)。如：

 
 
 
  
  
  
class Counter extends React.Component { 
  
  
  
 constructor(props) { 
  
  
  
 super(props) 
  
  
  
 this.state = { count: 0 } 
  
  
  
 } 
  
  
  
  
  
  
  
 render() { 
  
  
  
 return( 
  
  
  
 
 
  
  
  
 
{this.state.count}
  
  
  
  
 Increase Count