又一年過去了，JavaScript發生了許多變化。但是，即使是2019年了，還是需要給一些幫助你編寫干凈、整潔、有效、且具有擴展性的代碼建議。
下面是讓你成為更好的開發者的9條建議。
1. async / await
如果你還在為回調陷阱煩惱不已，那么就應該趕快扔掉這些2014年的代碼了。除非絕對必要（比如某個庫要求回調，或者出于性能的原因），否則不要再用回調了。Promise也不錯，但當代碼規模越來越大時，它們總是有些別扭。
我的解決方案就是async / await，能讓閱讀代碼變得更容易，代碼變得更整潔。實際上，Javascript中的任何Promise都可以await，只要你用的庫能返回Promise，就可以await它。實際上，async/await只不過是promise的語法糖而已。為了讓代碼正確運行，你只需在函數前面加上async即可。
下面是個例子：
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的，await只能在async函數中使用。此外，async / await是在ES2017中引入的，所以務必要對代碼進行編譯（transpile）。
2. 異步控制流
許多時候需要獲取多個數據集并在每個數據集上做一些處理，或者在所有異步調用都返回之后執行某項任務。
for...of
假設網頁上有一些精靈寶可夢，我們需要獲取每一只的詳細信息。我們不能等待所有調用結束，因為我們不知道一共有多少只。我們希望能在獲取一部分數據之后立即更新數據集，這時候就可以使用for...of在一個數組上進行循環，然后在內部加入async的代碼塊，但這樣做會造成阻塞，直到所有調用結束。一定要注意，這樣做有可能會造成性能瓶頸，但這樣做也不失為一種辦法。
例子如下：
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)這些例子實際上都能運行，可以自行復制粘貼到你喜歡的代碼沙盒工具中。
Promise.all
怎樣才能并行獲取所有寶可夢呢？我們可以await所有的promise，只需用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+中引用的，所以代碼需要編譯。
3. 解構和默認值
我們現在回到前面的例子：
const result = axios.get(`https://ironhack-pokeapi.herokuapp.com/pokemon/${entry.id}`)const data = result.data這段代碼有個更簡單的寫法。我們可以使用解構來從一個數組或對象中獲取一個或多個值?？梢赃@樣寫：
const { data } = await axios.get(...)這樣就能節省一行代碼！還可以進行重命名：
const { data: newData } = await axios.get(...)另一個小技巧就是在解構時制定默認值。這樣能保證變量永遠不會為undefine，因此就不需要手工檢查變量了。
const { id = 5 } = {}console.log(id) // 5這些技巧也可以用在函數參數上，例如：
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()) // 3console.log(calculate({type: 'division'})) // 0.5console.log(calculate({operands: [2, 3, 4], type: 'multiplication'})) // 24第一眼看上去這個例子可能不太容易理解，但多花些時間研究下是有好處的。當我們不給函數傳遞參數時，就會使用默認值。如果給函數傳遞參數，那么不存在的參數就會使用默認值。
解構和默認值是在ES6+中引入的，所以代碼需要編譯。
4. 真值和假值
在使用默認值時，經常需要檢查存在的值。但是，你還可以直接使用真值和假值。這樣能改善代碼并節省好多字符，使代碼更加流暢。我經?？吹饺藗冞@樣寫：
if(myBool === true) { console.log(...)}// ORif(myString.length > 0) { console.log(...)}// ORif(isNaN(myNumber)) { console.log(...)}這些代碼可以縮寫成：
if(myBool) { console.log(...)}// ORif(myString) { console.log(...)}// ORif(!myNumber) { console.log(...)}要真正理解這些語句的好處，你必須要理解真值和假值都是什么。下面是部分摘要：
假值
真值
當檢查真值或假值時，不需要明確寫出比較，這相當于使用雙等號 == 而不是三等號 ===。一般來說，這種用法的行為與預想是一致的，但有可能會遇到bug。比如，我最常遇到但就是有關數字0的bug。
5. 邏輯運算符和三元運算符
這些運算符也是用來縮減代碼的，節省下寶貴的代碼行數。經常有許多工具可以保持代碼干凈整潔，但這些工具也會造成混亂，特別是在改變它們時。
邏輯運算符
邏輯運算符可以組合兩個表達式，并返回true或false，或者匹配的值。常用的有&&，意思是“與”，還有 || 意思是“或”。我們來看看：
console.log(true && true) // trueconsole.log(false && true) // falseconsole.log(true && false) // falseconsole.log(false && false) // falseconsole.log(true || true) // trueconsole.log(true || false) // trueconsole.log(false || true) // trueconsole.log(false || false) // false
根據上一部分關于真值和假值的知識，我們可以將邏輯運算符組合起來。在使用邏輯運算符時，會使用以下規則：
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三元運算符
三元運算符很像邏輯表達式，但它由三個部分組成：
下面是例子：
const lang = 'German'console.log(lang === 'German' ? 'Hallo' : 'Hello') // Halloconsole.log(lang ? 'Ja' : 'Yes') // Jaconsole.log(lang === 'French' ? 'Bon soir' : 'Good evening') // Good evening
6. 鏈式操作
你遇到過這個問題嗎？在訪問嵌套對象的屬性時，無法事先確定對象的屬性是否存在？可能不得不寫這樣的代碼：
let dataif(myObj && myObj.firstProp && myObj.firstProp.secondProp && myObj.firstProp.secondProp.actualData) data = myObj.firstProp.secondProp.actualData
這段代碼很荒謬，我們還有更好的辦法，至少是在建議中的辦法（下面說了怎樣啟用該辦法）。這個辦法稱為optional chaining，用法如下：
const data = myObj?.firstProp?.secondProp?.actualData
用這個方法檢查嵌套屬性非常流暢，代碼也能變得更干凈。
目前，optional chaining還不是官方標準的一部分，但它是個stage-1的實驗性功能。需要在babelrc中加入@babel/plugin-proposal-optional-chaining來啟用它。
7. 類屬性和綁定
JavaScript中的函數綁定是個非常常見的任務。由于ES6標準引入了箭頭函數，我們現在可以自動地用定義的形式綁定函數——這方法非常好用，現在的JavaScript開發者都在用它。之前類剛剛出現時是沒辦法使用箭頭函數的，因為類需要用某種特殊的方式來定義。我們需要在某個地方進行綁定，例如在構造函數里（在React.js中最好這樣做）。
我很討厭需要先定義類方法再綁定方法的流程，不過現在可以通過箭頭函數進行自動綁定。箭頭函數現在可以直接在類中使用。
下面是個例子，其中的_increaseCount被綁定了：
class Counter extends React.Component { constructor(props) { super(props) this.state = { count: 0 } } render() { return( <div> <h1>{this.state.count}</h1> <button onClick={this._increaseCount}>Increase Count</button> </div> ) } _increaseCount = () => { this.setState({ count: this.state.count + 1 }) }}目前，類屬性不是官方標準的一部分，但是個stage-3的實驗性功能。必須在babelrc中添加@babel/plugin-proposal-class-properties才能使用它。
8. 使用parcel
作為前端開發者，你肯定會遇到打包和編譯代碼的問題。
長時間以來，實踐中的標準是webpack。我最初用的是webpack版本1，當時用起來很痛苦，需要不斷修改嘗試各種配置選項，我在上面花了無數個小時想辦法讓它工作。一旦弄好我就絕不會再碰它，以免不小心破壞什么。幾個月之后我遇到了parcel，總算松了口氣。它幾乎可以不加任何配置拿來即用，但你依然可以在需要的時候進行改變。它還支持插件，類似于webpack和babel，但非?？臁?/p>
如果你不知道parcel，我建議你一定要試試。
9. 自己寫更多代碼
這一條很有意思，這個話題我已經討論過很多次了。
即使是CSS，許多人也喜歡用現成的庫，比如bootstrap。至于JavaScript，現在還有很多人在用jQuery以及各種小型庫進行表單驗證、跑馬燈等等。雖然使用庫天經地義，但我強烈建議你自己寫更多的代碼，而不是依賴于安裝各種npm包。當然，大型的庫（甚至框架）需要整個團隊去構建，如moment.js或react-dateicker，自己寫是不現實的。
但是，其他的大部分東西都可以自己寫。這樣能帶來三個好處：
你清楚地知道代碼的內容；
在某個點上你開始真正理解編程，知道內部的工作原理；
可以防止代碼膨脹。
最初直接使用npm包很方便。自己實現一些功能會花很多時間。但是，如果安裝的包并不能正常工作，而需要換別的方法，就得花更多的時間去閱讀其API。而在自己實現時，你可以為項目100%地量身定做。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
