😺7个最佳JavaScript小技巧, 看懂即用

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。

Hello, 这里是Link, 今天来推荐7个我在业务开发中常用的JavaScript小技巧, 看懂即上手, 并且有任何问题, 你都可以直接复制我的代码到控制台中跑, 非常方便~😋

简单的向下取整~~

它的作用是向下取整.就类似于Math.foor()

let num = 2.6

Math.floor(a) === 2
~~num === 2

简单的取中 >> 1

这个的作用是帮你把数字除以2, 并且向下取整. 一般我们取数组中位数下标而刚好数组是奇数位的时候就特别好用, 因为如果取出的下标是1.5那肯定是找不到值的

let arr = [1, 2, 3]

Math.floor(arr.length / 2) === 1
arr.length >> 1 === 1

字符转数字 +

还在用Number()?

let str = '1'

Number(str) === 1
+str === 1

注: 这里稍稍提醒一下, 以上方法可能会影响可读性, 请在你的团队的人都清楚的情况下书写或者告知大家.

---

判空的最好做法

我相信你会用! 来对一个值进行判断, 但是这样的做法不够严谨, 假设一个值为 0 那可能会造成以外的bug

function isUndef (v) {
    return v === undefined || v === null
}
isUndef(0) // false

过滤falsy元素

这个我最开始是在react的脚手架配置中看到的, 它的做法是, 将一些plugins放入到一个数组中, 然后再通过一些判断, 例如是否为生产环境? 如果是给数组元素的值设置为 false, 这时候再过滤一下, 就不会存在这个plugin了

let arr = [1, null, 'ok', undefined]
arr = arr.filter(Boolean) // [1, 'ok']

最好的校验

我们都知道无论是 typeof 还是 instanceof 都有它自己的问题. 我们应该用这个函数做检测Object.prototype.toString.call() , 这个函数最为准确, 但是这个检测格式不是特别友好, 所以我推荐你用我这个方法

function checkType (val) {
    return Object.prototype.toString.call(val).split(/\b/g)[3]
}

Object.prototype.toString.call('1') // [Object String]
checkType('1') // String

队列管控请求

试想一下有这样一个场景, 我们有4个请求要发送, 但是要求只有在上一个请求发送完毕的时候, 才可以发送下一个请求. 这时候应该怎么做呢?

• 我们先定义4个请求, 分别设置延时时间, 如果是100个, 那当然我们会用循环. 这里为了方便演示, 我就直接写出来了

// 首先我们的请求都是会用 promise 管控
function post1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("1 success")
            resolve()
        }, 1000)
    })
}
function post2() {
    return new Promise(resolve => {
        console.log("2 success")
        resolve()
    })
}
function post3() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("3 success")
            resolve()
        }, 3000)
        })
}
function post4() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("4 success")
            resolve()
        }, 1000)
    })
}
// 我们将上面的请求放到一个数组里.
let arr = [post1, post2, post3, post4]

• 然后通过reduce的数组方法, 保留上一个的状态, 只有上一个Promise 进入 fulfilled 状态的时候, 才执行下一个请求.

arr.reduce((pre, next) => {
    return pre.then(() => {
        return next()
    })
}, Promise.resolve())
/**
 * 输出:  (注意看我定时器设置的时间是不同的哦)
 *   1 success
 *   2 success
 *   3 success
 *   4 success
 */

(完)