帮你写好简洁JS代码的6条建议

1.使用 Array.includes 来处理多重条件，使代码更优雅

https://blog.csdn.net/xiasohuai/article/details/85003225

2.JavaScript 复杂if...else,switch判断的更优雅写法

https://blog.csdn.net/xiasohuai/article/details/85691741

3. 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）。

4. 异步控制流

许多时候需要获取多个数据集并在每个数据集上做一些处理，或者在所有异步调用都返回之后执行某项任务。

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+中引用的，所以代码需要编译。

5. 解构和默认值

我们现在回到前面的例子：

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()) // 3
console.log(calculate({type: 'division'})) // 0.5
console.log(calculate({operands: [2, 3, 4], type: 'multiplication'})) // 24

第一眼看上去这个例子可能不太容易理解，但多花些时间研究下是有好处的。当我们不给函数传递参数时，就会使用默认值。如果给函数传递参数，那么不存在的参数就会使用默认值。

解构和默认值是在ES6+中引入的，所以代码需要编译。

6. 类属性和绑定

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才能使用它。