1.数值分割符
ES2021 引入了数值分割符 _
,在数值组之间提供分隔,使一个长数值读起来更容易。
let num = 200_000_000
console.log(num) // 输出结果 200000000
let num2 = 0.1_000_999
console.log(num2) // 输出结果 200000000
除十进制之外,二进制和十六进制也可以使用该分隔符:
0x11_1 === 0x111 // true 十六进制
0b11_1 === 0b111 // true 二进制
2.零合并操作符
零合并操作符 ??
是一个逻辑操作符,当左侧的操作数为 null
或者 undefined
时,返回右侧操作数,否则返回左侧操作数:
params1 ?? params2
与||
的区别:
||
是一个布尔逻辑运算符,左侧操作数会强制转换成布尔值,任何假值都不会被返回,当使用0、‘’、NaN作为有效值时,就会被||
强制转成假值,从而返回右侧值;而??``就能解决这问题,它只会在左侧值为
null、
undefined时才返回右侧值。 **在赋值时,可以结合赋值运算符
??=``` **
let a = {b: null, c: 16}
a.b ??= 3 // 相当于 a.b ?? a.b=3
a.c ??= 3 // 相当于 a.c ?? a.c=3
console.log(a) // 输出 { b: 3, c: 16 }
3.可选链操作符
?.
运算符功能类似于 .
运算符,不同之处在于如果链条上的一个引用是nullish(null或undefined),.
操作符会引起一个错误,?.
操作符取而代之的是会按照短路计算的方式返回一个undefined
。当?.
操作符用于函数调用时,如果该函数不存在也将会返回 undefined
。
const obj = {
a: 'foo',
b: {
c: 'bar'
}
}
console.log(obj.b?.c) // 输出 bar
console.log(obj.d?.c) // 输出 undefined
console.log(obj.func?.()) // 不报错,输出 undefined
可选链操作符:https://www.jianshu.com/p/29df44647c1e
4.私有方法/属性
在一个类里面可以给属性前面增加 # 私有标记的方式来标记为私有,除了属性可以被标记为私有外,getter/setter 也可以标记为私有,方法也可以标为私有。
class Person {
getDesc(){
return `${this.#name} ${this.#getAge()}`
}
#getAge() { return this.#age } // 私有方法
get #name() { return 'Leo' } // 私有访问器
#age = 28// 私有属性
}
const man = new Person()
console.log(man.age) // undefined 直接访问不到
console.log(man.getDesc()) // Leo 28
5.双位运算符
对正数来说 ~~
运算结果与 Math.floor( )
运算结果相同,而对于负数来说与 Math.ceil( )
的运算结果相同
~~3.5 // 3
Math.floor(3.5) // 3
Math.ceil(3.5) // 4
~~-4.5 // -4
Math.floor(-4.5) // -5
Math.ceil(-4.5) // -4
6.复制到剪贴板
navigator.clipboard.writeText('复制的内容')