实用的js 技巧之——空值合并运算符、gloabalThis

前言

ES语法并不是一成不变的，从最初的ES5已经到ES12了，了解语言的新特性，可以简化我们的代码写法或者更高效的实现我们的诉求，今天主要介绍以下两个常用的特性：空值合并运算符、globalThis。

空值合并运算符

当遇到某个属性是空值时需要给默认值的操作，来看一下我们之前的实现：

const opt = {}
const configValue = opt.value|| 'default value';

我们可以看到使用逻辑或(||)操作符会在左侧操作数为假值时返回右侧操作数,那还有其他实现方式么，就是今天讲的控制合并运算符。

??(空值合并操作符): 是一个逻辑操作符，当左侧的操作数为 null或者undefined时，返回其右侧操作数，否则返回左侧操作数。

const foo = undefined ?? "foo"
const bar = null ?? "bar"
console.log(foo) // foo
console.log(bar) // bar

与逻辑或操作符不同，?? 只会在左侧值为 null undefined时才会返回右侧值，如下：

const foo = "" ?? 'default string';
const foo2 = "" || 'default string';
console.log(foo); // ""
console.log(foo2); // "default string"

具体使用场景可以用于显示后端接口返回数据但是又不确定是否有该字段时，这时候可以使用?? 给个默认值。

gloabalThis

以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句:

• 在 Web 中，可以通过 window、self 取到全局对象;
• 在 Node.js 中，必须使用 global；
• 在松散模式下，可以在函数中返回 this 来获取全局对象，但是在严格模式和模块环境下，this 会返回 undefined；

想要适配不同的环境获取全局对象，通常我们会写如下的函数：

//以前想要获取全局对象，可通过一个全局函数
const getGlobal = () => {
    if (typeof self !== 'undefined') {
        return self
    }
    if (typeof window !== 'undefined') {
        return window
    }
    if (typeof global !== 'undefined') {
        return global
    }
    throw new Error('无法找到全局对象')
}
const globals = getGlobal()
console.log(globals)

在globalThis 出现之后，我们可以直接使用 globalThis来获取不同环境下的全局 this 对象（也就是全局对象自身）。

总结

讲了ES11 两个常用语法，其实还有之前写过的可选操作链、 Promise.allSettled、BigInt,感兴趣的读者可以去行去查找相关资料进行阅读。

参考资料

[1] JS中文兴趣组: https://jscig.github.io/#

[2] MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript