操作符

Frank
  • 前端基石
  • JS基础
  • 操作符
大约 9 分钟约 2601 字...

基础概念

  • 操作符:也叫运算符,是一种符号。通过操作符可以对一个或多个值进行运算,并获取运算结果
  • 表达式:由数字、运算符、变量的组成的式子,一个表达式往往会产生一个值

一元操作符

只操作一个值的操作符叫一元操作符

递增/递减操作符

++是递增操作符,表示在自身基础上加 1

a++先用再加,++a 先加再用

var a = 3
var b = ++a
console.log(b) // 4
var a = 3
var b = a++
console.log(b) // 3

递减操作符同理,不做赘述

另外,这 4 个操作符可以作用于任何值,意思是不限于整数——字符串、布尔值、浮点值,甚至对象都可以。 递增和递减操作符遵循如下规则:

  • 对于字符串,如果是有效的数值形式,则转换为数值再应用改变。变量类型从字符串变成数值
  • 对于字符串,如果不是有效的数值形式,则将变量的值设置为 NaN。变量类型从字符串变成数值。
  • 对于布尔值,如果是 false,则转换为 0 再应用改变。变量类型从布尔值变成数值。如果是 true,则转换为 1 再应用改变。变量类型从布尔值变成数值。
  • 对于浮点值,加 1 或减 1。
  • 如果是对象,则调用其 valueOf()方法取得可以操作的值。对得到的值应用上述规则。如果是 NaN,则调用 toString()并再次应用其他规则变量类型从对象变成数值
let a = {
  valueOf() {
    return -1
  },
}
a-- // 值变成2

一元加和减

一元加由一个加号(+)表示,放在变量前头,对数值没有任何影响

如果将一元加应用到非数值,则会执行与使用 Number()转型函数一样的类型转换:布尔值 false 和 true 转换为 0 和 1,字符串根据特殊规则进行解析,对象会调用它们的 valueOf()和/或 toString()方法以得到可以转换的值。

一元减由一个减号(-)表示,放在变量前头,主要用于把数值变成负值

在应用到非数值时,一元减会遵循与一元加同样的规则,先对它们进行转换,然后再取负值

一元加和减操作符主要用于基本的算术,但也可以像上面的例子那样,用于数据类型转换

布尔操作符

布尔操作符的优先级是:非 → 与 → 或,而在 js 表达式中的优先级是:非 → 数学(乘性,加性)→ 关系 → 布尔,例如:

!5 < 4 + 4 || 3 < 1 // true

逻辑非

逻辑非操作符由一个叹号(!)表示,这个操作符始终返回布尔值,无论应用到的是什么数据类型。逻辑非操作符首先将操作数转换为布尔值,然后再对其取反。 逻辑非操作符会遵循如下规则:

  • 如果操作数是对象,则返回 false。
  • 如果操作数是空字符串,则返回 true。
  • 如果操作数是非空字符串,则返回 false。
  • 如果操作数是数值 0,则返回 true。
  • 如果操作数是非 0 数值(包括 Infinity),则返回 false。
  • 如果操作数是 null,则返回 true。
  • 如果操作数是 NaN,则返回 true。
  • 如果操作数是 undefined,则返回 true。

逻辑非操作符也可以用于把任意值转换为布尔值。同时使用两个叹号(!!),相当于调用了转型函数 Boolean()

逻辑与

逻辑与操作符由两个和号(&&)表示,应用到两个值,两个值都真才真

逻辑或

逻辑或操作符由两个管道符(||)表示,两个值有真就真

短路运算

a&&b

  • 如果 a 是真的,b 的真假决定结果,b 真结果就真,b 假结果就假,所以它的结果就是 b
  • 如果 a 是假的,不用看 b 了,被短路了。结果就是 a
3 && 6 // 6
null && 2 // null

a||b

  • 如果 a 是真的,不用看 b 了,被短路了。结果就是 a
  • 如果 a 是假的,b 的真假决定结果,b 真结果就真,b 假结果就假,所以它的结果就是 b

如果出现布尔运算符连续的情况

先计算前面的结果,拿这个结果和后面的进行计算:

false || false || 123 =>123

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

乘性操作符

ECMAScript 定义了 3 个乘性操作符:乘法、除法和取模。

乘法操作符由一个星号(*)表示,可以用于计算两个数值的乘积。

除法操作符由一个斜杠(/)表示,用于计算第一个操作数除以第二个操作数的商

取模操作符

  • 取模操作符用百分号“%″表示

  • a%b表示求 a 除以 b 的余数,它不关心整数部分,只关心余数

指数操作符

ECMAScript 7 新增了指数操作符Math.pow()现在有了自己的操作符**,结果是一样的:

console.log(Math.pow(3, 2); // 9
console.log(3 ** 2);// 9

加性操作符

加性操作符,即加法和减法操作符

加法操作符有“加法”和“连字符”两种作用,如果加号两边的操作数都是数字,则为“加法”

如果有一方是字符串的话,加号的作用就是将他们进行拼接,在这种情况下,另一操作数是对象、数值或布尔值,则调用它们的 toString()方法以获取字符串,对于 undefined 和 null ,则调用 String() 函数, 分别获取 "undefined"和"null"

如果加号两边均是布尔值、null 或 undefined,则先在后台使用 Number()将其转换为数值,然后再执行数学运算。如果转换结果是 NaN,则计算的结果是 NaN;如果有任一操作数是对象,则调用其 valueOf()open in new window方法取得表示它的数值。如果该值是 NaN,则计算的结果是 NaN。如果对象没有 valueOf()方法(Math 和 Error 对象没有 valueOf 方法),则调用其 toString()方法,然后再将得到的字符串转换为数值

减法操作符,除了基本的数学运算外,只要有一个操作数是字符串、布尔值、null 或 undefined,则先在后台使用 Number()将其转换为数值,然后再执行数学运算。如果转换结果是 NaN,则减法计算的结果是 NaN;如果有任一操作数是对象,则调用其 valueOf()方法取得表示它的数值。如果该值是 NaN,则减法计算的结果是 NaN。如果对象没有 valueOf()方法,则调用其 toString()方法,然后再将得到的字符串转换为数值

一道 NT 面试题

'a' + +'b' // -> "aNaN"

因为 + 'b' 等于 NaN,所以结果为 "aNaN"

关系操作符

关系操作符执行比较两个值的操作,包括小于(<)、大于(>)、小于等于(<=)和大于等于(>=),这几个操作符都返回布尔值

  • 如果操作数都是数值,则执行数值比较。
  • 如果操作数都是字符串,则逐个比较字符串中对应字符的编码。
  • 如果有任一操作数是数值,则将另一个操作数转换为数值,执行数值比较。
  • 如果有任一操作数是对象,则调用其 valueOf()方法,取得结果后再根据前面的规则执行比较。如果没有 valueOf()操作符,则调用 toString()方法,取得结果后再根据前面的规则执行比较。
let a = {
  valueOf() {
    return 0
  },
  toString() {
    return '1'
  },
}
a > -1 // true

在以上代码中,因为 a 是对象,所以会通过 valueOf 转换为原始类型再比较值。

  • 如果有任一操作数是布尔值,则将其转换为数值再执行比较。

js 中没有连比

2 < a <= 15 // ❌

a > 2 && a <= 15 // √

相等操作符

  • 两个等号==运算符不比较值的类型,它会进行隐式转换后比较值是否相等

  • 三个等号===运算符,不仅比较值是否相同,也比较类型是否相同,只有两个操作数在不转换的前提下相等才返回 true。

在转换操作数的类型时,相等不相等操作符遵循如下规则:

  • 如果任一操作数是布尔值,则将其转换为数值再比较是否相等。false 转换为 0,true转换为 1。
  • 如果一个操作数是字符串,另一个操作数是数值,则尝试将字符串转换为数值,再比较是否 相等。
  • 如果一个操作数是对象,另一个操作数不是,则调用对象的 valueOf()方法取得其原始值,再根据前面的规则进行比较。

在进行比较时,这两个操作符会遵循如下规则:

  • null 和 undefined 相等
  • null 和 undefined 不能转换为其他类型的值再进行比较
  • 如果有任一操作数是 NaN,则相等操作符返回 false,不相等操作符返回 true。记住:即使两 个操作数都是 NaN,相等操作符也返回 false,因为按照规则,NaN 不等于 NaN。
  • 如果两个操作数都是对象,则比较它们是不是同一个对象。如果两个操作数都指向同一个对象,则相等操作符返回 true。否则,两者不相等。 全等和不全等操作符与相等和不相等操作符类似,只不过它们在比较相等时不转换操作数

条件操作符

var a = b ? 1 : 2

上面的代码执行了条件赋值操作,即根据条件表达式 b 的值决定将哪个值赋 给变量 a 。如果 b 是 true ,则赋值 1 ;如果 b 是 false,则赋值 2。

赋值操作符

简单赋值用等于号(=)表示,将右手边的值赋给左手边的变量

每个数学操作符以及其他一些操作符都有对应的复合赋值操作符:

  • 乘后赋值(*=)
  • 除后赋值(/=)
  • 取模后赋值(%=)
  • 加后赋值(+=)
  • 减后赋值(-=)
上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1