写JavaScript的小技巧有哪些

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容介绍了“写JavaScript的小技巧有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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()

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

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(...)

注意当解构的时候，通常要赋给它一个默认值。这样确保你不会得到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(...)
}

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

假值：

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

真值

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

逻辑运算与三元运算符

逻辑运算
逻辑运算是基于多个表达式真假的判断，注意到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

condition为进行条件判断的部分，将会得到真值或者假值
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 属性链的调用中，很容易因为某个属性不存在而导致之后出现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 插件来使用它。

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>
                <h2>{this.state.count}</h2>  
                <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版本就开始使用它了，当然那是痛苦的。为了弄懂它所有的配置项，我花了无数的时间才让它正常打包和编译。如果还有选择的机会，我是不会学习webpack的。恰巧几个月前用了 parcel ，从来没有发现配置可以如此简单！你不需要改动什么便能得到你预期的效果，当然你也可以修改配置项。它也是和webpack或babel一样是可配置的，同时也是快速的。如果你不知道parcel，我明确建议你去学习它！

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

9. 写更多你自己的代码

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