JavaScript 运算符

不苒
158 阅读9分钟

这是我参与11月更文挑战的第 15 天，活动详情查看：2021最后一次更文挑战

运算符

概述

JavaScript提供 了一组用于操作数据值的运算符， 又称为操作符。这些运算符可以按照作用的不同，或者操作变量数量的不同进行分类。

运算符分类

如果按照作用的不同，运算符的分类如下：

  • 算术运算符（+ - * / % ++ --）

  • 比较运算符（> >= < <= == != `` === !==）

  • 逻辑运算符（&&|| !）

  • 赋值运算符（ = += -= *= /= %=）

  • 字符串运算符(+)

  • 条件运算符(?:)

  • 特殊运算符(typeof instanceof delete)

算术运算符

加法运算符

加法运算符（+）的作用就是用来计算两个操作数的加法计算。前提是这个两个操作数都是数字值（number 类型），如下示例代码所示：

console.log(2 + 3) //5

但如果其中一个或两个操作数是字符串（string 类型）的话，+ 符号则表示为字符串运算符。如下示例代码所示：

console.log(2 + '3') //23
console.log('2' + '3') //23

减法运算符

加法运算符（-）的作用就是用来计算两个操作数的减法计算。

如下代码所示：

console.log(2-1)//1

如果字符串进行减法计算的话 -> 将字符串类型转化为数字值，在进行减法计算

console.log(100-'23');//77
console.log(100-'启嘉班')//NaN

如果是布尔类型进行加法计算 -> 将布尔类型转换为数字值，再进行减法计算

console.log(true-100);//-99

乘法与除法运算法与加法和减法运算符类似，值得注意的是：除法运算法，分母为零的话得到的结果为

Infinity（无穷大）。

求余运算符

求余运算符，用于计算两个运算数整除后的余数。

console.log( 10%3 );//输出1
console.log( -10%3 );//输出-1
console.log( 10%-3 );//输出1
console.log( -10%-3 );//输出-1

自增运算符

自增运算符 ++，用于整数值逐次加1。分别具有两种用法:

  • 前置型:自增运算符位于运算数之前。先加1，再赋值。
  • 后置型:自增运算符位于运算数之后。先赋值，再加1。
var x= 3;
console.log( x++ );//输出3 
console.log(x );//输出4
var y= 3;
console.log( ++y );//输出4
console.log(y );//输出4

自增运算符剖析图：

Uw2vKH.png

自减运算符

自减运算符是 -- 符号，要和减法运算符（-）进行区分。按照具体的用法，自减运算符还可以划分为如下 2 种：

  • 前置自减运算符：自减运算符在操作数的前面。运算时，会先进行自减操作，再返回运算结果。
  • 后置自减运算符：自减运算符在操作数的后面。运算时，会先返回运算结果，再进行自减操作。

如下示例代码展示了 2 种自减运算符的不同：

var x = 3
console.log( x-- ) //输出3
console.log( x ) //输出2

var y = 3
console.log( --y ) //输出2
console.log( y ) //输出2

运算符的优先级

当 JavaScript 语言的表达式中使用了多种运算符时，最终执行的结果可能会有所不同。因为 JavaScript 语言的运算符的优先级别决定了表达式中运算执行的先后顺序，优先级高的运算符最先被执行。

如下示例代码展示了 JavaScript 语言中运算符的优先级别：

console.log(3 + 4 * 5)//23
console.log(2 * 4 / 2)//4

如上图所示，第一个表达式中，是先执行了 4 * 5 运算，再执行了 3 + 20 运算，所以最终的结果为 23。第二个表达式中，是先执行了 2 * 4 运算，再执行了 8 / 2 运算，所以最终的结果为 4。

之所以会出现上述运算结果的原因，在于 JavaScript 语言的运算符是存在优先级别的。具体的优先级别如下表所示：

## 比较运算符

JavaScript语言中的比较运算符，主要用于比较两个操作数的是否相等，或者大小情况。下述表格描述比较运算符:

运算符描述案例
等于运算符（==）当两个操作数的值相等时，返回 true，否则返回 false3 == '3' 返回 true
不等于运算符（!=）当两个操作数的值不等时，返回 true，否则返回 false3 != 1 返回 true
全等运算符（===）当两个操作数的类型和值都相同时，返回 true，否则返回 false3 === 3 返回 true
不全等运算符（!==）当两个操作数的类型或值不相同时，返回 true，否则返回 false3 !== '3' 返回 true
大于运算符（>）当左边操作数大于右边操作数时，返回 true，否则返回 false3 > 2 返回 true
大于等于运算符（>=）当左边操作数大于等于右边操作数时，返回 true，否则返回 false3 >= 2 返回 true
小于运算符（<）当左边操作数小于右边操作数时，返回 true，否则返回 false2 < 3 返回 true
小于等于运算符（<=）当左边操作数小于等于右边操作数时，返回 true，否则返回 false2 <= 3 返回 true

说明:字符串类型的比较，是按照Unicode字符编码的先后顺序进行比较。

等于与不等于运算符

等于运算符（==）与不等于运算符（!=）比较的都是其操作数的值，而不比较类型。换句话讲，只要是值是相等的，比较的结果为 true。如下示例代码所示：

console.log(2 == '2')//true

NaN 与任何值都不相等（包括自身），如下示例代码所示：

console.log(NaN == NaN)//false
console.log(NaN != NaN)//true

还有值得注意的是，undefined 和 null 值的比较，如下示例代码所示：

console.log(undefined == undefined)//true
console.log(null == null)//true
console.log(undefined == null)//true

得出结论：undefined与null是相等的

全等与不全等运算符

全等与不全等运算符不仅比较值是否相等，还比较类型是否相同。

例如上述等于与不等于运算符的第一个示例代码，如果改为全等运算符的话，则结果会有所不同：

console.log(2 === '2')//false   类型不同一个是数字一个是字符串

isNaN() 函数

描述: isNaN( )函数用于判断其参数是否为 NaN (非数字值)。

**作用:**多用于检测使用类型转换函数进行数据类型转换后的结果是否为合法的数字值。

注意: NaN与任何值(包括自身)进行比较，结果都是false。不能使用“= = =”或者"=="运算符判断 某个值是否是NaN，而只能使用isNaN( )函数。

console.log(isNaN(parselnt("123")));//输出true
console.log(isNaN'123.45a');//输出true
console.log(isNaN(Number(123.53)));//输出true

逻辑运算符

JavaScript语言中的逻辑运算符，基本用法是用于布尔类型的计算。具体运算符如下:

运算符描述例子
&&逻辑与运算符。如果两个运算符都为true，则返回true。否则返回false。A&& B 为true
||逻辑或运算符。如果两个运算符中任何一个是true，则返回true。A||B为 true
！逻辑非运算符。用于改变运算数的逻辑状态。如果逻辑状态为true，则通过逻辑非运算符是逻辑状态改为false！(A&&B)为false

逻辑与运算符

逻辑与运算符是使用两个 & 符号，用来运算两个操作数并返回一个 boolean 类型的结果。这两个操作数可以是 boolean 类型的，也可以是其他数据类型的。

console.log(true && true);//true
console.log(true && false);//false
console.log(false && true);//false
console.log(false && false);//false

逻辑或运算符

逻辑或运算符是使用两个 | 符号，用来运算两个操作数并返回一个 boolean 类型的结果。这两个操作数可以是 boolean 类型的，也可以是其他数据类型的。

console.log(true || true);//true
console.log(true || false);//true
console.log(false || true);//true
console.log(false || false);//false

逻辑非运算符

逻辑非运算符使用的是 ! 符号，该符号放置在操作数之前，表示取反。如果操作数的数据类型转换为 boolean 类型后的值为 true 的话，则返回 false；如果操作数的数据类型转换为 boolean 类型后的值为 false 的话，则返回 true。

console.log(!true);//false
console.log(! 1);//false
console.log(!'abc');//false

逻辑短路原则

所谓逻辑短路原则，主要是为了简化逻辑与运算符和逻辑或运算符的运算规则的。其是通过确定运算符左边操作数为 true 或 false，来确定运算结果返回的是 true 还是 false。具体原则如下：

  • 逻辑与运算符
    • 如果左边操作数的值为 false，则运算结果返回左边操作数。
    • 如果左边操作数的值为 true，则运算结果返回右边操作数。
  • 逻辑或运算符
    • 如果左边操作数的值为 false，则运算结果返回左边操作数。
    • 如果左边操作数的值为 true，则运算结果返回右边操作数。

赋值扩展运算符

JavaScript语言中的赋值扩展运算符实际就是赋值运算符与算数运算符配合使用的简写形式。

运算符简写形式含义
加赋值运算符（+=）x += yx = x + y
减赋值运算符（-=）x -= yx= x - y
乘赋值运算符（*=）x *= yx = x * y
除赋值运算符（/=）x /= yx = x / y
求余赋值运算符（%=）x %= yx = x % y
求幂赋值运算符（**=）x **= yx = x ** y

如下代码展示了加赋值运算符和减赋值运算符的用法：

//加赋值运算符
var num1 = 10;
console.log(num1 += 20);//30
num1 = 10;
console.log(num1+='abc');//10abc
num1 = 10;
console.log(num1+=true);//11

//减赋值运算符
var num2 = 50;
console.log(num2 -= 20);//30
num2 = 50;
console.log(num2 -= '这是一个测试内容.'); //NaN
num2 = 50;
console.log(num2 -= true);//49

注意：赋值扩展运算符的性能要比赋值运算符更高。

条件运算符

条件运算符，首先判断一个表达式是真或假，然后根据判断结果执行两个给定指令中的一个。

运算符描述说明
?:条件表达式如果条件为真? X值: Y

UBvCxe.png

**说明:**作为条件的表达式可以是任何表达式，并且计算结果为布尔类型。

如下代码展示了条件运算符的用法：

var age= 20; 
var msg =age> 18?"成年人" :"未成年人";
console.log(msg)//成年人

嵌套条件运算符

条件运算符不仅是唯一一个三元运算符，条件运算符的第三个表达式可以是另一个条件运算符如此类推，形成一种嵌套，成为嵌套条件运算符。

优点：扩展了条件运算符本身的计算能力

缺点:

  • 可读性比较差

  • 性能随着嵌套的层级越多越差

var fwtd = '*';

var result = fwtd  > '****' ? '五星'
                                    :fwtd > '***'?'三星'
                                    :fwtd > '**'?'二星':'差评!';
console.log(result)//差评!
avatar
文章
阅读
粉丝