7个JavaScript小技巧，让前端的代码更高效！

JavaScript是前端开发人员必学的一门语言。本文知了姐共列举了7个小技巧来让你的代码更加简洁、更加高效！

 

01

async / await

如果你还陷入到回调地狱中，那么你应该回到2014年去开发你的代码。除非绝对必要（像第三方库需要或者性能原因），否则不要使用回调。Promise是非常好的解决回调地狱，但是当你的代码变得越来越大时，它也会变得不太好用。我现在的解决方案就是async / await，它极大提高了代码可读性以及简洁性。

 

在所有使用Promise的地方你都可以替换成await，在你需要返回Promise对象，简单await它并返回，为了使它不报错，你需要在定义函数的开头添加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 对象。它只能在异步函数 async function 中使用。async / await是属于ES2017的内容，所以可能需要babel编译你的代码。不过现在的主流浏览器都已经支持了。

 

02

异步控制流

经常地，我们会遇到这样的需求，请求获取多个数据集并对每个数据集进行各自处理或者需要等所有异步回调完成后返回一个值。遇到这些情况，我是这么处理的：

•  

for…of

假设我们的页面有多个Pokemon（口袋妖怪），需要获取到它们的详细的信息。我们不想等所有调用结束，特别是不知道它有多少次调用，我们仅想在它有调用返回时就更新我们的数据集。可以用for…of来遍历数组，在代码块里执行async，这样的话，只有每次await执行成功，代码才会继续往下执行。

 

这里要着重说明，这样做可能会导致性能瓶颈（当请求很多的时候），但像这样做才能到达预期的效果。请看下面的例子：

 （代码可以左右滑动查看哟）

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

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)

 

这个代码是能正常运行，你可以轻松地复制它到 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以后提出来的，请确保你的环境能运行。

 

03

解构（Destructuring ） & 默认值

我们接着上面的那个例子，提取一部分代码：

（代码可以左右滑动查看哟）

•  
•  

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

有一种简单的方法，解构从数组，或对象中获取一些属性（值）。像这样：

•  

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

注意当解构的时候，通常要赋给它一个默认值。这样确保你不会得到undefined以及你不用自己手动地检查变量。

•  
•  

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

这个例子起初看起来可能有点混乱，但是慢慢观察。当我们没有给函数传递参数的时候，就会使用默认值。一旦我们开始传递参数，仅会使用那些没有传递的参数的默认值。这样，减少了你对异常状态的处理。

 

04

真值 & 假值

当使用默认值，就可以不用对现有值进行一些额外的检查。但是了解你的变量是真值还是假值是非常棒的。它能提高你的代码扩展性，更具有说服力的以及简洁。我常看到下面一些写法：

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

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

为了用这些简洁的判断，你要充分理解js中真值，假值具体有哪些？这里概述一下：

假值：

•  
•  
•  
•  
•  
•  

1.字符串，但长度为02.数字03.false4.undefined5.null6.NaN

真值

•  
•  
•  
•  

1.空数组2.空对象3.其他有值的数据.注意：在判断真/假值，还应该注意到你使用的是等于'=='，还是全等'===',这经常会导致bug。对我而言，经常是数字0。

 

 

05

逻辑运算与三元运算符

 

逻辑运算

逻辑运算是基于多个表达式真假的判断，注意到js是惰性求值的策略。逻辑运算一般返回一个布尔值。&& 和 || 运算符会返回一个指定操作数的值。来看这里：

•  
•  
•  
•  
•  
•  
•  
•  

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

 

三元运算符

三元运算符和逻辑运算是相似的，但是它有3个部分：

•  

condition ? expr1 : expr2

condition为进行条件判断的部分，将会得到真值或者假值

expr1为条件判断为真时返回的值

expr2为条件判断为假时返回的值

例如：

（代码可以左右滑动查看哟）

•  
•  
•  
•  

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

 

 

06

Optional Chaining

 

过去在 Object 属性链的调用中，很容易因为某个属性不存在而导致之后出现Cannot read property xxx of undefined的错误。为了确认需要向这样处理：

（代码可以左右滑动查看哟）

•  
•  

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

我认为它是检查嵌套属性最佳方法，代码是如此的简洁。

 

这个特性可以说是非常实用了，不过它现在处于 stage-1 阶段。你可以在.babelrc文件中引入 @babel/plugin-proposal-optional-chaining插件来使用它。

 

07

Class properties & binding

在JavaScript中函数绑定也是经常的工作任务。现在，大家应该都是用箭头函数自动绑定this到这个类上的（这里可能有歧义，首先箭头函数里面是没有this 和arguments的，这里的this把它当成一个参数就行）。

 

如果不用箭头函数，我们就需要在构造函数绑定this，当类的方法很多的时候，这就显得很冗余。因此，建议和提倡在类里面用箭头函数。如：

（代码可以左右滑动查看哟）

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

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插件来使用它。