JS高级运算符

Posted 2021-09-28 万年打野易大师

在代码精简优化过程中，我们总会想着要去简练我们的代码，尽量做到用最少的代码完成最好的功能

下面介绍4个JS开发优化的高级运算符使用

1、(param ? res1 : res2)三元运算符

三元运算符，又叫条件运算符

接受三个运算数：条件 ? 条件为真时要执行的表达式 : 条件为假时要执行的表达式

基本示例：

function isChecked(checked) {
    return checked ? \'是\' : \'否\' 
}
console.log(isChecked(true)) // => 是
console.log(isChecked(false)) // => 否

三元运算符用于变量赋值

let time = 0
let have = (time > 23) ? \'睡觉\' : \'工作\' 
console.log(have) // => \'工作\'

三元运算符用于空赋值的行为

let x = 1
let x = (x !== null || x !== undefined) ? x : 2
console.log(x) // => 1

用在函数中

function getValue(x, y) {
    return (x == null || x == undefined) ? y : x 
}
getValue(null, 8) // => 8
getValue(4, 8) // => 4

2、?? 非空运算符

如果第一个参数不是 null/undefined（译者注：这里只有两个假值，但是 JS 中假值包含：未定义 undefined、空对象 null、数值 0、空数字 NaN、布尔 false，空字符串\'\'），将返回第一个参数，否则返回第二个参数。

基本示例：

null ?? 5 // => 5
3 ?? 5 // => 3

开发业务场景优化：
某些时候，数值为0或者为空字符串""，不应该舍弃0和空字符串""

// 优化前
let prev = 1
let current = 0
let noAccount = null
let future = false
function test(param) {
    return param || `不存在`
}
console.log(test(prev)) // => 1
console.log(test(current)) // => 不存在
console.log(test(noAccount)) // => 不存在
console.log(test(future)) // => 不存在

// 优化后
let prev = 1
let current = 0
let noAccount = null
let future = false
function test(param) {
    return param ?? `不存在`
}
console.log(test(prev)) // => 1
console.log(test(current)) // => 0
console.log(test(noAccount)) // => 不存在
console.log(test(future)) // => false

概括地说 ?? 运算符允许我们在忽略错误值（如 0 和空字符串、false）的同时指定默认值。

3、??= 空赋值运算符

与非空运算符相关

let x = null
let y = 5
console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5

仅当值为 null 或 undefined 时，此赋值运算符才会赋值。
上面的例子强调了这个运算符本质上是空赋值的语法糖（译者注，类似的语法糖：a = a + b 可写成 a += b ）。
接下来，让我们看看这个运算符与默认参数（译者注，默认参数是 ES6 引入的新语法，仅当函数参数为 undefined 时，给它设置一个默认值）的区别：

function settingsWithNull(options) {
    options.speed ??= 1
    options.diff ??= \'easy\' 
    return options
}
function settingsWithDefaultParams(speed=1, diff=\'easy\') {
    return {speed, diff}
}
settingsWithNullish({speed: null, diff: null}) // => {speed: 1, diff: \'easy\'}
settingsWithDefaultParams(undefined, null) // => {speed: null, diff: null}

4、?. 链判断运算符

链判断运算符?. 允许开发人员读取深度嵌套在对象链中的属性值，而不必验证每个引用。当引用为空时，表达式停止计算并返回 undefined。

let book = {
    name: \'js高教4\',
    content: {
        first: \'hello world\',
        second: \'good work\'
    }
}
console.log(book.price?.zh) // => undefined