JS 中的操作符和小技巧

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作为有效值时,就会被||强制转成假值,从而返回右侧值;而??``就能解决这问题,它只会在左侧值为nullundefined时才返回右侧值。 **在赋值时,可以结合赋值运算符??=``` **

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('复制的内容')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容