提高效率篇--运算符

75 阅读2分钟
JavaScript作为一门火爆的语言,每年都会有一些新的功能加入进来,下面对一些常用运算符进行整理,希望能通过文字整理,帮助理解。

一 常用运算符

  1. &&,逻辑与,真值传递,返回第一个不为真的值,或最后一个值
2 && null && undefined // null
({name: 'aws'}) && 2 // 2
undefined && 2 && 3 // undefined
  1. ||,逻辑或,假值传递,返回第一个为真的值,或最后一个值
 undefined || 2 || null // 2
 undefined || null || 0 // 0
 undefined || null || NaN // NaN
  1. ! ,逻辑非,用于取反,常用Boolean转换
 !undefined  // true
 !null // true
  1. + ,一元加运算符,将操作数转换为Number类型,等价于Number()方法,日常替代Number()
+'232'  // 232
+'ad'   // NaN
+undefined  // NaN
+null   // 0   ??
+true  // 1
+[]  // 0     [].toString() => ''

对象到数字的转换规则:

  • 如果对象有valueOf()方法并返回原始值,则将返回值转换为数字
  • 如果对象有toString()方法并返回原始值,则将返回值转换为数字

二 提效运算符

  1. !!,双非运算符。强制Boolean转换
 !!-2 // true
 !!0  // false
 !!({name: 'as'}) // true
  1. ~,按位非运算符。按位取反。~a = -a - 1
~1 = -2
~-1 = 0

使用按位非替代indexOf判断

if(name.indexOf('n') === -1) {}
// 替换成
if(!~name.indexOf('n')) {}
  1. ~~,双位非运算符。根据位非运算符的运算特性,可对数字进行转换,舍弃型保留符号位和整数部分,对正数使用时,功能与Math.floor()相同,对负数使用时,功能与Math.ceil()相同。
~~4.5 = 4
~~-5.6 = -5
  1. ?.,可选链运算符。object?.key,相较于平时常用的空值判断,这种方式更优雅。
//a. 臃肿判断
if(data && data.errMsg && data.errMsg == "getLocation:ok"){}
// 优雅
if(data?.errMsg == "getLocation:ok")

//b. 
list && list.length && list[i] && list[i].key
//
list?.[i]?.key

//c.
wx.getUserInfo && wx.getUserInfo()
//
wx.getUserInfo?.()
  1. ??,空值合并。nullish值筛选,包含 undefinednull的筛选,返回第一个非nullish的值或最后一个值。x ?? y,当x不为nullish值时,y永不执行。
undefined ?? 2 // 2
null ?? 2 // 2
"" ?? 2 // ""
undefined ?? null // null
null ?? undefined // undefined

与可选链进行结合使用:

list?.[i]?.key ?? 2
  1. ??=,逻辑空分配。只有当前值为nullish时,才被赋值。已x ??= y为例,当且仅当xundefinednull时,才将y赋值给x。等效逻辑为x ?? (x = y),而不是x = x ?? y,因为后者当x为nullish时,y永不执行,如果y是需要执行的语句(如函数),则会被阻断。
a = undefined
a ??= 2     //  a = 2

b = null
b ??= (a = 10)  // a = 10   b = 10

c = ''
c ??= 9   // c = ''
  1. ||=,逻辑或分配。只有当左侧值为falsy时,才会被赋值。x ||= y,等效x || (x = y)
a = undefined
a ||= 8  // a = 8

b = ''
b ||= 7  // b = 7
  1. &&=,逻辑与分配。x && (x = y)

后续继续补充