【译】2019 年 JavaScript 开发者应该都在用的 9 个棒的技巧

缺乏、安全感 2022-01-20 00:37 133阅读 0赞

原文链接:[ 9 Tricks for Kickass JavaScript Developers in 2019][9 Tricks for Kickass JavaScript Developers in 2019]  
 [github 的地址][github] 欢迎 star!  
当然作者是在今年1月份写的！我感觉大部分功能都已经使用很久啦，大家看看就好啦，就当总结回顾

## 前言 ##

又一年过去了，JavaScript 也一直在变化进步着。这儿列举了一些小技巧帮你在 2019 年写出更简洁，高效的可拓展的代码。下面共列举了 9 个讲究使用的小技巧来帮助你成为更好的开发者。

## 1. 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()
    // 对于在外部要使用getData中数据的话，是要 await getData()取到data的，async总是返回一个Promise对象
    复制代码

> await 操作符用于等待一个 Promise 对象。它只能在异步函数 async function 中使用。 `async / await`是属于 ES2017 的内容，所以可能需要 babel 编译你的代码。不过现在的主流浏览器都已经支持了。

另外推荐 justjavac 大神翻译的 [await、return 和 return await 的陷阱][await_return _ return await]以及[这篇翻译 javascript-async-await-the-good-part-pitfalls-and-how-to-use][javascript-async-await-the-good-part-pitfalls-and-how-to-use] 可以更加详细的理解相关知识。

## 2. 异步控制流 ##

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

### `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 以后提出来的，请确保你的环境能运行。

## 3. 解构（Destructuring ） & 默认值 ##

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

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(...)
    复制代码

注意当解构的时候，通常要赋给它一个默认值。这样确保你不会得到`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()) // 3
    console.log(calculate({
        type: 'division'})) // 0.5
    console.log(calculate({operands: [2, 3, 4], type: 'multiplication'})) // 24
    复制代码

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

## 4. 真值 & 假值 ##

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

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

可以简洁为：

if(myBool) {
      console.log(...)
    }
    // OR
    if(myString) {
      console.log(...)
    }
    // OR
    if(!myNumber) {
      console.log(...)
    }
    
    复制代码

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

### 假值： ###

1.  字符串，但长度为0
2.  数字0
3.  false
4.  undefined
5.  null
6.  NaN

### 真值 ###

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

## 5. 逻辑运算与三元运算符 ##

### 逻辑运算 ###

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

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
    复制代码

进行的逻辑运算，是按照下面的规则进行的：

*  `&&`:第一个值为假值，则直接返回；如果为真值，则直接返回第二的值
 *  `||`:第一个值为真，则直接返回；如果为假，则直接返回第二的值。

console.log(0 && {a: 1}) // 0
    console.log(false && 'a') // false
    console.log('2' && 5) // 5
    console.log([] || false) // []
    console.log(NaN || null) // null
    console.log(true || 'a') // true
    复制代码

### 三元运算符 ###

三元运算符和逻辑运算是相似的，但是它有3个部分： `condition ? expr1 : expr2`

1.  condition为进行条件判断的部分，将会得到真值或者假值
2.  expr1为条件判断为真时返回的值
3.  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 属性链的调用中，很容易因为某个属性不存在而导致之后出现 Cannot read property xxx of undefined 的错误。为了确认需要向这样处理：

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
    复制代码

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

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

## 7. 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 })
        }
    }
    复制代码

关于必须 bind 传参的情况可以看看我的另外一篇[文章][Link 1]

使用箭头函数声明类中方法，它现在处于 stage-3 阶段。你可以在`.babelrc`文件中引入[@babel/plugin-proposal-class-properties][babel_plugin-proposal-class-properties]插件来使用它。

## 8.使用parcel ##

作为一个前端，你也肯定会遇到打包和编译代码情况。似乎 webpack 成为标准已经很长时间了。我从 webpack 1 版本就开始使用它了，当然那是痛苦的。为了弄懂它所有的配置项，我花了无数的时间才让它正常打包和编译。如果还有选择的机会，我是不会学习webpack的。恰巧几个月前用了 [parcel][]，从来没有发现配置可以如此简单！你不需要改动什么便能得到你预期的效果，当然你也可以修改配置项。它也是和 webpack 或 babel 一样是可配置的，同时也是快速的。如果你不知道 parcel，我明确建议你去学习它！

当然，现在的主流标准还是 webpack，webpack 4 之后配置也简洁了，可以在学习 parcel 之后了解 webpack，不说了，又要开始学习 webpack 5

## 9. 写更多你自己的代码 ##

谈到这个话题，我有很多想要分享讨论的东西。对于css，许多人更倾向于使用第三方组件库像 bootstrap。对于 JavaScript，我也看到很多人喜欢用 jQuery 以及一些小型的验证，滚动的库等等。虽然使用库是方便的，但是我强烈建议你能自己实现它，而不是盲目的安装 npm 包。当它变成一个很大的库或者框架的时候，整个团队都要构建它，像 [moment.js][]或者 [react-datepicker][]，而且当需求发生改变时，你想要改动它是困难的。所以，你应该写更多自己的组件。这将会带来三个重要的优点：

1.  你很清楚你的代码发生了什么
2.  同时，在你自己动手实现的过程中，你也能真正开始明白何为编程，以及库中代码是怎么运行的
3.  你能阻止你的代码变得臃肿

在开始，使用 npm 包是方便的。你能花更多时间去实现自己的业务逻辑。但当那个包没有按照预期运行时，你又换了一个包，这时不得不花更多时间去读它的 API 才能使用它。当是你自己实现的库（组件）时，你能百分百用自己的用例来定制化开发它。

> 我非常赞同这个的[评论][Link 2]:很多人被'不要重复造轮子'的格言所困扰,因为他们把它理解成'不要重复实现轮子',对于一个热爱编程的人,总是要有好奇心和不断钻研的,希望大家和我一样谨记!

实现自己的轮子是多么有成就感的一件事情! 后续我也会把自己的轮子放在github上。

## 总结 ##

文中提到的点其实都是基础，但实用的。对于新手 JavaScript 开发者，其实我更建议应该开始学习 TypeScript 了。因为它实在太好了！这里给出了自己学习 TypeScript 一些[历程][Link 3]

如果有错误或者不严谨的地方，请务必给予指正，十分感谢!

[9 Tricks for Kickass JavaScript Developers in 2019]: https://link.juejin.im?target=https%3A%2F%2Flevelup.gitconnected.com%2F9-tricks-for-kickass-javascript-developers-in-2019-eb01dd3def2a
[github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsundjly%2FlearnPieces
[await_return _ return await]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fdev-reading%2Ffe%2Fblob%2Fmaster%2Farticles%2F2017-12-07-await-vs-return-vs-return-await.md
[javascript-async-await-the-good-part-pitfalls-and-how-to-use]: https://link.juejin.im?target=https%3A%2F%2Fwww.infoq.cn%2Farticle%2Fjavascript-async-await-the-good-part-pitfalls-and-how-to-use
[babel_plugin-proposal-optional-chaining]: https://link.juejin.im?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2Fbabel-plugin-proposal-optional-chaining
[Link 1]: https://juejin.im/post/5c8a03bee51d4535f252bbfa
[babel_plugin-proposal-class-properties]: https://link.juejin.im?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2Fnext%2Fbabel-plugin-proposal-class-properties.html
[parcel]: https://link.juejin.im?target=https%3A%2F%2Fparceljs.org%2F
[moment.js]: https://link.juejin.im?target=https%3A%2F%2Fmomentjs.com%2F
[react-datepicker]: https://link.juejin.im?target=https%3A%2F%2Freactdatepicker.com%2F
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fmedium.com%2F%40scociancich%2Fmany-people-are-stuck-by-the-dont-reinvent-the-wheel-adage-because-they-interpret-it-as-don-t-8308d2d797fc
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsundjly%2FTypeScript-tutorial