关于前端基础:实用的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…