运算符用于对数字和字符串等值和变量进行四次算术运算和比较等某种处理。运算符可以以一个或两个值为目标,但也有以三个值为目标的运算符。作为运算符目标的值称为操作数。在这里,我们将解释 JavaScript 中提供的运算符类型以及如何使用它们。
目录
9-1 运算符优先级和结合性
9-2 算术运算符
9-3 一元减运算符/一元加运算符
9-4 自增/自减运算符
9-5 按位运算符/移位运算符
9-6 赋值运算符
9-7 关系运算符
9-8 相等运算符
9-9 逻辑运算符
9-10 条件运算符(三元运算符)
9-11 typeof运算符
9-12 连接字符串
9-13 逗号运算符
当在一个表达式中使用多个运算符时,结果可能会有所不同,具体取决于执行运算的顺序。因此,在JavaScript中,运算符的优先级是确定的,从优先级高的开始依次进行运算。还定义了运算符关联规则,以确定在使用具有相同优先级的运算符时执行操作的顺序。在这里,我将解释 JavaScript 中的运算符优先级和关联规则。
操作按什么顺序执行?
让我们从一个简单的例子开始,以确认当在同一个表达式中使用多个运算符时,结果可能会有所不同,具体取决于先执行哪个运算。
运算符优先级
首先是运算符具有不同的优先级。看看下面的示例。
let num;
num = 5 + 4 * 3;
此示例使用两个运算符 + 和 *。例如,如果先进行+操作,则会如下所示。
5 + 4 = 9
9 * 3 = 27
这次反过来,如果先进行*操作,则会如下。
4 * 3 = 12
5 + 12 = 17
根据是先执行 + 操作还是先执行 * 操作,结果会有所不同。在这种情况下,执行操作的顺序是根据运算符的优先级确定的。在本示例中,* 运算符的优先级高于 + 运算符,因此首先执行 * 运算符。
let num;
num = 5 + 4 * 3;
console.log(num);
>> 17
运算符结合规则
那么运算符优先级是一样的。看看下面的示例。
let num;
num = 12 / 4 * 3;
此示例中使用了两个运算符:/ 和 *。例如,如果先进行/操作,则会如下所示。
12 / 4 = 3
3 * 3 = 9
这次反过来,如果先进行*操作,则会如下。
4 * 3 = 12
12 / 12 = 1
同样,结果会有所不同,具体取决于是先执行 * 操作还是先执行 / 操作。但是,在这种情况下,* 和 / 运算符具有相同的优先级。如果运算符具有相同的优先级,则运算顺序根据运算符结合性规则确定。在这个示例中,*运算符和/运算符从左到右组合在一起,因此先执行写在左侧的/运算符。
let num;
num = 12 / 4 * 3;
console.log(num);
>> 9
运算符优先级和结合性规则列表
以下是 JavaScript 中可用的运算符优先级和结合性规则的列表:
优先顺序 | 组合规则 | 运算符 | 解释 |
21 | — | () | 分组 |
20 | 左 | . | 访问属性 |
20 | 左 | [] | 访问属性 |
20 | — | new | 有参数 |
20 | 左 | () | 函数调用 |
20 | 左 | ?. | |
19 | 右 | new | 没有参数 |
18 | — | ++ | 后缀增量 |
18 | — | ++ | 后缀增量 |
17 | 右 | ! | 逻辑否定 |
17 | 右 | ~ | Bit否定 |
17 | 右 | + | 单项递加算符 |
17 | 右 | – | 单项递减算符 |
17 | 右 | ++ | 前缀增量 |
17 | 右 | — | 前缀增量 |
17 | 右 | delete | 删除属性 |
17 | 右 | typeof | 类型检查 |
17 | 右 | void | 返回undefined |
17 | 右 | await | |
16 | 右 | ** | 求幂 |
15 | 左 | * | 乘法 |
15 | 左 | / | 除法 |
15 | 左 | % | 余 |
14 | 左边 | + | 添加 |
14 | 左边 | – | 减法 |
13 | 左 | << | 左位移位 |
13 | 左 | >> | 右移位(有符号) |
13 | 左 | >>> | 右移位(无符号) |
12 | 左 | > | 大于 |
12 | 左 | >= | 以上 |
12 | 左 | < | 大于 |
12 | 左 | <= | 以下 |
12 | 左 | instanceof | 检查原型属性 |
12 | 左 | in | 检查属性 |
11 | 左 | == | 相同的 |
11 | 左 | != | 不等于 |
11 | 左 | === | 完全相同的 |
11 | 左 | !== | 不相同 |
10 | 左 | & | BitAND |
9 | 左 | ^ | BitNOT |
8 | 左 | | | BitOR |
7 | 左 | && | 逻辑積 |
6 | 左 | || | 逻辑和 |
5 | 左 | ?? | Null并运算符 |
4 | 右 | ..?..:.. | 三元运算符 |
3 | 右 | = | 代入 |
3 | 右 | ope= | ※1 |
2 | 右 | yield | |
2 | 右 | yield | |
1 | 左 | , | 逗号运算符 |
*1 ope= 是“+=” “-=” “**=” “*=” “/=” “%=” “<<=” “>>=” “>>>=” “&=” “|=”“^=”“&&=”“||=”“??=”。
顺序越高,优先级越高,顺序越低,优先级越低。
使用括号更改优先级
当一个表达式中使用多个运算符时,运算符的优先级和结合性决定了运算的执行顺序。您可以为某些运算赋予优先级,而不管 .
看看下面的示例。
let num;
num = 10 + 5 * 4;
console.log(num);
>> 30
使用两个运算符 + 和 *。由于*的优先级较高,所以进行了5 * 4次操作,然后对20的结果进行了10 + 20次操作。这种情况下,如果想优先+操作,使用括号,写成如下。
let num;
num = (10 + 5) * 4;
console.log(num);
>> 60
无论优先级如何,括在括号中的操作都优先。所以在做了10+5次操作后,对15的结果做了15*4次操作。
如果括号包含多个运算符,则运算顺序通常由运算符优先级和结合性决定。看看下面的示例。
let num;
num = (10 + 8 / 2) * 4;
console.log(num);
>> 56
由于使用了括号,因此首先执行括号内的 10 + 8 / 2 操作。括号内还使用了多个运算符+和/,由于/具有更高的优先级,进行了8 / 2次运算,得到的4经过10 + 4次运算增加。最后对14进行14 * 4运算,就是括号中的运算结果。
括号内也可以写括号。看看下面的示例。
let num;
num = ((10 + 8) / 2) * 4;
console.log(num);
>> 36
在这种情况下,首先执行内部括号内的 10 + 8 操作,然后将得到的 18 进行 18 / 2 操作。最后对外括号中的结果9进行9 * 4运算。
通过像这样将表达式的一部分括在括号中,可以优先执行括号内的操作。
在JavaScript提供的运算符中,我们将解释执行加法和乘法等四种算术运算的算术运算符的类型和用法。
算术运算符的类型和用法
提供了以下六种类型的算术运算符。
+ 加法运算符
- 减法运算符
* 乘法运算符
/ 除法运算符
% 余数运算符
** 求幂运算符
算术运算符是二元运算符,在运算符前后取一个值。我将解释如何使用每个。
加法运算符 (+)
如果运算符前后的值都是数字,则加法运算符 (+) 会添加数字。
console.log(10 + 5);
>> 15
console.log(4.24 + 6);
>> 10.24
console.log(2.5 + 14.523);
>> 17.023
在 JavaScript 中所有数值都被视为浮点数,因此您可以执行整数和浮点数的加法以及整数和浮点数的加法而没有任何特别的区别。
请注意,如果加法运算符之前或之后的值是字符串,则执行字符串连接而不是加法。
减法运算符 (-)
减法运算符 (-) 从它前面的数字中减去它后面的数字。
console.log(10 - 5);
>> 5
console.log(8.24 - 2);
>> 6.24
console.log(7.3 - 14.228);
>> -6.928
乘法运算符 (*)
乘法运算符 (*) 将运算符前后的数字相乘。
console.log(10 * 5);
>> 50
console.log(7.71 * 4);
>> 30.84
console.log(4.6 * 3.7);
>> 17.02
除法运算符 (/)
除法运算符 (/) 将运算符前面的数字除以它后面的数字。
console.log(10 / 5);
>> 2
console.log(10 / 3);
>> 3.3333333333333335
console.log(8.2 / 4.1);
>> 2
余数运算符 (%)
余数运算符 (%) 是取运算符前面的数字除以后面的数字的余数。
console.log(10 % 3);
>> 1
console.log(8 % 4);
>> 0
console.log(7.5 % 3);
>> 1.5
求幂运算符 (**)
求幂运算符 (**) 取运算符之前的数字的值乘以它之后的数字的幂。
console.log(2 ** 3);
>> 8
console.log(3.5 ** 2);
>> 12.25
console.log(16 ** 0.5);
>> 4
※ 求幂运算符可从 ECMAScript 2016 (ES 7) 获得。与传统上可用的 Math.pow() 方法相同。
计算包含小数位的数值时的注意事项
在 JavaScript 中,计算包含小数位的数值时可能会出现错误。看看下面的示例。
console.log(0.2 + 0.1);
>> 0.30000000000000004
console.log(8.2 * 1.73);
>> 14.185999999999998
console.log(14.186 / 8.2);
>> 1.7300000000000002
console.log(8.2 % 3);
>> 2.1999999999999993
例如,第一个样本应该是 0.2 + 0.1 = 0.3,但实际上有点不同。这是因为在 JavaScript 中数字是以二进制数处理的,如果用二进制数表示小数点后的数字,可能会出错。
作为一种变通方法,有一种方法是转换为整数然后进行运算,但是由于转换为整数时是对小数点进行运算,因此可能会成功也可能不会成功。如果我找到合适的方法,我会添加它。
在 JavaScript 提供的运算符中,我们将解释如何使用一元减号运算符和一元加号运算符来反转数字的符号。
使用一元减运算符
一元减号运算符 (-) 转换运算符后写入的数字的符号。通常用来表示负数。
-数值
用法与常用的负数表示方法相同。
console.log(-8);
>> -8
console.log(-17.245);
>> -17.245
它也可以用于分配数值的变量。对负数使用一元减号运算符会得到正数。
let num1 = 16;
let num2 = -8;
console.log(-num1);
>> -16
console.log(-num2);
>> 8
使用一元加运算符
一元加号运算符 (+) 保留运算符后写入的数字的符号。
+数値
如果一个数前面既没有一元加号也没有一元减号运算符,则将其视为正数,因此一元加号运算符一般不用于表示正数。前面的例子和简单的写法完全一样:
数値
即使实际用一元加号运算符表示,也与不附加任何内容时一样处理。
console.log(+8);
>> 8
console.log(+17.245);
>> 17.245
将非数字值转换为数字
如果为一元加号或一元减号运算符指定非数字操作数,则任何可以转换为数字的都将转换为数字,而任何不能转换为数字的将转换为 NaN。
console.log(+'80');
>> 80
console.log(-['12.34']);
>> -12.34
console.log(+null);
>> 0
console.log(+'Flower');
>> NaN
然而,虽然它可以写得简洁,但乍一看很难理解它是使用“+”或“-”运算符转换为数值。尝试使用全局函数 parseInt 或 Number 类构造函数将非数值转换为数值。
加 1 或减 1 的运算常用于数值运算中。也可以使用加法和减法运算符,但递增和递减运算符作为可以更简洁地编写的运算符提供。加 1 或减 1 的时机取决于此运算符是放在操作数之前还是之后。这里我们将解释如何在 JavaScript 中使用自增和自减运算符。
递增和递减运算符
可以使用加法运算符 (+) 和减法运算符 (-) 描述诸如将数字的数量增加 1 或减少 1 的操作,如下所示。
let num = 5;
num = num + 1; // 1 を加える
num = num - 1; // 1 を減らす
专用于加1的运算符是自增运算符,专用于减1的运算符是自减运算符。
增量运算符 (++) 在操作数的右侧或左侧写为 ++。
数值++
++数值
自减运算符 (–) 在操作数的右侧或左侧写为 –。
数値--
--数値
当运算符放在操作数(++数)之前时,称为前缀,当运算符放在操作数(数++)后时,称为后缀。稍后将解释这种差异。
让我们使用递增和递减运算符重写前面的示例。
let num = 5;
num++;
console.log(num);
>> 6
num--;
console.log(num);
>> 5
通过使用递增和递减运算符,我们能够将存储在变量中的值加 1 或减 1。
递增和递减运算符经常用在迭代 for 语句的变量表达式中。
for (let i = 0; i < 3; i++){
console.log("i = " + i);
}
>> i = 0
>> i = 1
>> i = 2
在迭代过程中,变量在每次迭代后执行。在这个例子中,i++被写成一个变量表达式,每次执行迭代过程时,变量i中存储的值都会加1。
前缀和后缀
自增运算符和自减运算符有两种类型,分别是前缀和后缀。
++ 数值前缀
-- 数值前缀
数值++ 后缀
数值-- 后缀
无论是前缀还是后缀,自增运算符都是将目标变量的值加1,自减运算符是将目标变量的值减1。请参阅以下示例。
let num = 5;
num++;
console.log(num);
>> 6
++num;
console.log(num);
>> 7
在此用法中,前缀和后缀将产生相同的结果。
看看下面的例子。它使用后缀增量运算符。
let numA = 5;
let numB;
numB = numA++;
console.log(numA);
>> 6
console.log(numB);
>> 5
它使用后缀递增运算符将 numA 的值加 1,然后再将其分配给 numB。当我把变量的值打印到控制台时,numA的值是原来的值加1,而numB的值是加1前的值。
对于后缀递增运算符,递增运算符将目标数加 1(变为 6),但返回前一个值 (5) 作为运算结果。在本例中,运算的结果赋值给了变量numB,所以运算前的5赋值给了numB。
这实际上与编写相同:
let numA = 5;
let numB;
let temp = numA;
numA = numA + 1;
numB = temp;
console.log(numA);
>> 6
console.log(numB);
>> 5
现在看下面的示例。它使用前缀增量运算符。
let numA = 5;
let numB;
numB = ++numA;
console.log(numA);
>> 6
console.log(numB);
>> 6
前缀增量运算符用于在将 numA 的值分配给 numB 之前将其加 1。当我把变量的值打印到控制台时,numA的值是原值加1,numB的值是原值加1。
对于前缀自增运算符,自增运算符将目标数加 1(变为 6),但返回运算后的值(6)作为执行操作的结果。本例中,运算的结果赋值给了变量numB,所以运算后的6赋值给了numB。
这实际上与编写相同:
let numA = 5;
let numB;
numA = numA + 1;
numB = numA;
console.log(numA);
>> 6
console.log(numB);
>> 6
如您所见,自增运算符和自减运算符单独使用时没有区别,但与其他运算符组合使用时,运算可能会有所不同,具体取决于它是前缀还是后缀。请。
在JavaScript提供的运算符中,我们将解释为对整数值进行按位处理而提供的按位运算符的类型和用法。
按位运算符的类型和用法
按位运算符有七种类型。
& Bit逻辑积(AND)
| Bit逻辑和(OR)
^ Bit排他逻辑和(XOR)
~ Bit逻辑否定(NOT)
<< 左移
>> 有符号右移
>>> 无符号右移
JavaScript 在内部将所有数字视为 64 位浮点数。但是,按位运算符在处理之前会转换为 32 位整数。所以请注意小数部分被截断,超过32位的部分也被截断。
按位运算以二进制形式表示数字并对每一位进行运算。例如,十进制数 27543 用二进制表示如下。
十进制 : 27543
二进制: 0b110101110010111
0000 0000 0000 0000 0110 1011 1001 0111
现在,让我们检查位运算符之间的逻辑积、逻辑和、异逻辑和和逻辑非。移位运算符将在后面解释。
Bit逻辑积(AND)
Bit逻辑积(&)是比较运算符前后操作数中相同位置的位,只有当两个位都为 1 时才产生 1。否则设置为 0。看看下面的示例。
let num1 = 27543;
let num2 = 19024;
console.log(num1 & num2);
>> 18960
将数字 27543 和 19024 按位与运算的结果输出到控制台。它逐位比较两个数字,只有当两个位在同一位置都为 1 时才将其设置为 1。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
0000 0000 0000 0000 0100 1010 0101 0000 = 19024
---------------------------------------
0000 0000 0000 0000 0100 1010 0001 0000 = 18960
控制台的结果输出为 0b100101000010000(十进制为 18960)。
Bit逻辑和(OR)
Bit逻辑和(OR)是(|)比较运算符前后操作数中相同位置的位,如果至少有一位为1,则为1。否则设置为 0。看看下面的示例。
let num1 = 27543;
let num2 = 19024;
console.log(num1 | num2);
>> 27607
将数字 27543 和 19024 按位或运算的结果输出到控制台。它将两个数逐位比较,如果相同位置的至少有一位为1,则为1。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
0000 0000 0000 0000 0100 1010 0101 0000 = 19024
---------------------------------------
0000 0000 0000 0000 0110 1011 1101 0111 = 27607
控制台的结果输出为 0b110101111010111(十进制为 27607)。
Bit排他逻辑和(XOR)
Bit排他逻辑和(^)是比较运算符前后操作数中相同位置的位,如果只有一位为 1,则产生 1。否则设置为 0。看看下面的示例。
let num1 = 27543;
let num2 = 19024;
console.log(num1 ^ num2);
>> 8647
将数字 27543 和 19024 按位异或的结果输出到控制台。它将两个数逐位比较,如果相同位置只有一位为1,则置1。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
0000 0000 0000 0000 0100 1010 0101 0000 = 19024
---------------------------------------
0000 0000 0000 0000 0010 0001 1100 0111 = 8647
结果是打印到控制台的 0b10000111000111(十进制为 8647)。
Bit逻辑否定(NOT)
对于运算符后的操作数,按位取反 (~) 如果该位为 1 则为 0,如果该位为 0 则为 1。看看下面的示例。
let num1 = 27543;
console.log(~num1);
>> -27544
将数字 27543 按位求反的结果输出到控制台。如果该位为 1,则为 0,如果为 0,则为 1。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
---------------------------------------
1111 1111 1111 1111 1001 0100 0110 1000 = -27544
结果是 0b11111111111111111001010001101000(十进制 -27544)打印到控制台。
负值在 JavaScript 中使用补码表示法表示。最高位为符号位,如果最高位为1,则值为负。
移位运算符的类型和用法
以下三个按位运算符也称为移位运算符:
<< 左移
>> 有符号右移
>>> 无符号右移
移位运算符将运算符的前一个操作数向左或向右移动后一个操作数。
让我们检查左移、右移(有符号)和右移(无符号)。
左移
左移 (<<) 将运算符的前一个操作数左移后一个操作数的量。任何超过 32 位的都将被丢弃。最右边因移位而腾出的位用 0 填充。看看下面的示例。
let num = 27543;
console.log(num << 3);
>> 220344
将数字 27543 左移 3 位的结果输出到控制台。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
---------------------------------------
0000 0000 0000 0000 1101 0111 0010 1110 // 左移一位
0000 0000 0000 0001 1010 1110 0101 1100 // 左移 2 位
0000 0000 0000 0011 0101 1100 1011 1000 // 左移 3 位
控制台的结果输出为 0b110101110010111000(十进制为 220344)。
有符号右移
有符号右移 (>>) 将运算符的前一个操作数右移后一个操作数的量。从右边缘突出的部分被丢弃。如果最高位为0,则移位腾出的最左边位在移位后为0,如果最高位为1,则移位后为1。因此,右移不会改变符号。
看看下面的示例。第一种是最高有效位为 0 时。
let num = 27543;
console.log(num >> 3);
>> 3442
将数字 27543 右移 3 位的结果输出到控制台。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
---------------------------------------
0000 0000 0000 0000 0011 0101 1100 1011 // 1 ビット分右へシフト
0000 0000 0000 0000 0001 1010 1110 0101 // 2 ビット分右へシフト
0000 0000 0000 0000 0000 1101 0111 0010 // 3 ビット分右へシフト
由于最高位为0,右移后最高位为0。控制台的结果输出为 0b110101110010(十进制为 3442)。
如果最高有效位为 1:
let num = -27544;
console.log(num >> 3);
>> -3443
将数字-27544右移3位的结果输出到控制台。
1111 1111 1111 1111 1001 0100 0110 1000 = -27544
---------------------------------------
1111 1111 1111 1111 1100 1010 0011 0100 // 右移一位
1111 1111 1111 1111 1110 0101 0001 1010 // 右移 2 位ト
1111 1111 1111 1111 1111 0010 1000 1101 // 右移 3 位
由于最高有效位为 1,因此右移后的最高有效位将包含 1。控制台的结果输出是 0b1111111111111111111001010001101(-3443 十进制)。
无符号右移
无符号右移 (>>>) 将运算符的前一个操作数右移后一个操作数的量。从右边缘突出的部分被丢弃。移位腾出的最左边的位用0补上。结果,如果原始值为负,则右移会产生正值。
看看下面的示例。第一种是最高有效位为 0 时。
let num = 27543;
console.log(num >>> 3);
>> 3442
将数字 27543 右移 3 位的结果输出到控制台。
0000 0000 0000 0000 0110 1011 1001 0111 = 27543
---------------------------------------
0000 0000 0000 0000 0011 0101 1100 1011 // 1 ビット分右へシフト
0000 0000 0000 0000 0001 1010 1110 0101 // 2 ビット分右へシフト
0000 0000 0000 0000 0000 1101 0111 0010 // 3 ビット分右へシフト
如果原始值为正,则结果与带符号右移的结果相同。控制台的结果输出为 0b110101110010(十进制为 3442)。
如果最高有效位为 1:
let num = -27544;
console.log(num >>> 3);
>> 536867469
将数字-27544右移3位的结果输出到控制台。
由于在最高位输入了 0,因此原始值为负值,但移位后的结果为正值。控制台的结果输出为 0b1111111111111111001010001101(十进制为 536867469)。
在JavaScript提供的运算符中,我们将讲解给变量赋值时使用的赋值运算符的类型和用法。
赋值运算符的类型和用法
赋值运算符(=)用于将写在运算符之后的操作数赋值给写在运算符之前的变量。
变量 = 值
一个值被分配给变量。整个表达式的评估与分配的值相同。
看看下面的示例。
let num;
num = 10;
console.log(num);
>> 10
console.log(num = 15);
>> 15
为变量赋值后,我将变量值打印到控制台。它还将对为变量分配不同值的表达式的求值打印到控制台。
多重赋值
多重赋值
变量 1 = 变量 2 = 变量 3 = 值
此类分配称为多重分配。
在多重赋值的情况下,所有变量都被赋予最右边的值。看看下面的示例。
let num1;
let num2;
num1 = num2 = 18;
console.log(num1);
>> 18
console.log(num2);
>> 18
变量 num1 和 num2 已被分配了赋值运算符最右侧描述的值。
赋值运算符结合算术运算符
赋值运算符包括为变量赋值的 = 运算符,以及与算术运算符组合的运算符。看看下面的示例。
let num = 10;
num = num + 5; // 变量值加5,再次赋值给变量
console.log(num);
>> 15
将10赋给变量num作为初始值后,下面的语句将变量num的当前值加5得到的值赋给变量num。在这种情况下使用加法赋值运算符 += 可以写成如下形式。
let num = 10;
num += 5; // 使用赋值运算符重写
console.log(num);
>> 15
这次我们使用了加法,但是当将原始变量值中指定的值的乘法或除法结果再次存储到变量中时,您可以使用结合了赋值运算符和算术运算符的运算符。可以使用以下类型。
a += b 加法 a = a + b
a -= b 减去 a = a - b
a *= b 乘法 a = a * b
a /= b 除法 a = a / b
a %= b 余数 a = a % b
a &= b Bit逻辑积 a= a & b
a |= b Bit逻辑和 a = a | b
a ^= b Bit排他的逻辑和 a = a ^ b
a <<= b 左移 a= a << b
a >>= b 有符号右移 a = a >> b
a >>>= b 无符号右移 a = a >>> b
a &&= b 逻辑积 a && (a = b)
a ||= b 逻辑和 a || (a = b)
a ??= b Null联合 a ?? (a = b)
通过使用这些运算符,您可以简洁地编写。
在JavaScript提供的运算符中,我们将解释比较两个值的大小并返回true或false的关系运算符的类型和用法。
关系运算符的类型和用法
有四种类型的关系运算符:
< 小于
<= 以下
> 大于
>= 以上
关系运算符比较两个值并返回真或假。关系运算符常用于条件表达式,例如 if 语句和 for 语句。看看下面的示例。
let score = 78;
if (score > 70){
console.log('通过');
}else{
console.log('失败');
}
>> 通过
上面,条件表达式被写为 score > 70 并且使用了关系运算符之一 >。关系运算符比较运算符前后的值,返回真或假。这次变量score中存储的值大于70,所以条件表达式为真,执行if语句块中的处理。
让我们来看看如何使用每个关系运算符。在这个例子中,要比较的值都是数值。我们稍后会讨论比较非数值的情况。
小于 (<)
如果运算符之前的值小于运算符之后的值,则小于 (<) 返回真。
console.log(8 < 10);
>> true
console.log(8 < 8);
>> false
console.log(8 < 6);
>> false
小于或等于 (<=)
如果运算符之前的值小于或等于运算符之后的值,则小于 (<=) 返回真。
console.log(8 <= 10);
>> true
console.log(8 <= 8);
>> true
console.log(8 <= 6);
>> false
大于 (>)
如果运算符之前的值大于之后的值,则大于 (>) 返回真。
console.log(8 > 10);
>> false
console.log(8 > 8);
>> false
console.log(8 > 6);
>> true
大于或等于 (>=)
如果运算符之前的值大于或等于运算符之后的值,则大于或等于 (>=) 返回真。
console.log(8 >= 10);
>> false
console.log(8 >= 8);
>> true
console.log(8 >= 6);
>> true
如何比较非数值
如果受关系运算符约束的两个值都是数字,则简单比较数字的大小,否则比较如下:
字符串与字符串比较
如果关系运算符的两个目标值都是字符串,则使用字符串中包含的字符的 Unicode 代码点值进行比较。(代码点是分配给在 Unicode 中注册的字符的编号)。
可以使用 String 对象的 codePointAt 方法获取字符的 Unicode 代码点。以下示例获取“a”和“A”的代码点并使用关系运算符比较这两个字符。
console.log('a'.codePointAt(0));
>> 97
console.log('A'.codePointAt(0));
>> 65
console.log('A' > 'a');
>> false
‘A’ > ‘a’ 为假,因为 ‘a’ 的代码点大于 ‘A’ 的代码点。
请注意,对于字符串到字符串的比较,即使字符串是表示数字的字符串,也会比较 Unicode 代码点。
console.log('1'.codePointAt(0));
>> 49
console.log('3'.codePointAt(0));
>> 51
console.log('120' > '3');
>> false
在此示例中,比较第一个字符的“1”和“3”代码点,并且“120”>“3”为假,因为“3”代码点大于“1”代码点。
比较数字和字符串
如果关系运算符的目标值是数字和字符串,则将字符串转换为数字,然后作为数字进行比较。如果字符串无法转换为数字,它将被转换为 NaN,关系运算符将始终返回 false。
console.log('120' > 3);
>> true
由于比较是在数字和字符串之间进行,因此字符串’120’首先转换为数字120,然后与数字3进行比较。结果 120 > 3 返回真。
如果字符串包含非数字字符,则在比较之前将它们转换为 NaN,因此两者均为假。
console.log('flower' > 3);
>> false
console.log('flower' <= 3);
>> false
比较数字值和非字符串值
该对象首先被转换为原始类型值,然后进行比较。
除了数字和字符串之外的值在比较之前被转换为下一个值。
true 1
false 0
null 0
undefined NaN
看看下面的示例。
console.log(true > false);
>> true
console.log(true > 0);
>> true
console.log(false > 0);
>> false
console.log(null >= 0);
>> true
console.log(null < 0);
>> false
console.log(undefined > 0);
>> false
console.log(undefined <= 0);
>> false
True 和 false 在比较之前转换为数值 1 和 0。null 转换为 0。两者都是假的,因为 undefined 被转换为 NaN。
在JavaScript提供的运算符中,我们将解释检查两个值是否相等时使用的相等运算符的类型和用法。相等运算符有两种类型:检查两个值和数据类型是否相同的严格相等运算符,以及检查是否仅值相同的相等运算符。
相等运算符的类型和用法
有四种类型的相等运算符:
== 等于
!= 不等于
=== 严格相等
!== 严格不相等
相等运算符评估两个值是否相等(或不相等)并返回 true 或 false。相等运算符常用于条件表达式,例如 if 语句和 for 语句。
看看下面的示例。
let hobby = '电影';
if (hobby == '电影'){
console.log('我们去看电影吧');
}else{
console.log('我们去散散步吧');
}
>> 我们去看电影吧
上面 hobby == ‘电影’ 被写成条件表达式,并使用了等于运算符之一的 == 。相等运算符比较运算符前后的值,返回真或假。这次,变量 hobby 中存储的值为 ‘movie’,因此条件表达式为真,执行 if 语句块中的处理。
对于两个值的相等(或不等),JavaScript 分别提供了两个运算符 == 和 === 。后面会解释,相等运算符检查值是否相等,严格相等运算符除了检查值外还检查数据类型是否相等。请注意,如果该值是一个对象,则两个运算符只有在它们引用同一对象时才为真。
相等运算符(==)、不等运算符(!=)
如果被比较的两个值是相同的值,则相等运算符为真。如果两个值具有不同的数据类型,则在比较之前将它们转换为相同的类型。另外,如果值是对象类型,如果两个值引用同一个对象则为真。
- 不等式运算符产生与等式运算符完全相反的结果。
第一个是值是基本类型且具有相同数据类型时的示例。
console.log(10 == 10);
>> true
console.log(10 == 8);
>> false
console.log('Apple' == 'Apple');
>> true
console.log('Apple' == 'apple');
>> false
console.log(true == true);
>> true
console.log(true == false);
>> false
console.log(null == null);
>> true
console.log(undefined == undefined);
>> true
console.log(NaN == NaN);
>> false
如果值相同,则相同数据类型比较为真,但两种情况下只有 NaN 为假。
如果两个值的数据类型是number和string,则将string转换为number后再进行比较。
console.log(10 == '10');
>> true
console.log(10 == '8');
>> false
console.log(10 == 'Apple');
>> false
如果两个值的数据类型是数值型和逻辑型,则在进行比较之前,将true转换为1,将false转换为0。如果两个值的数据类型是string和boolean,则在比较前都先转为数字。
console.log(1 == true);
>> true
console.log(0 == false);
>> true
console.log(1 == false);
>> false
console.log('1' == true);
>> true
console.log('true' == true);
>> false
比较 null 和 undefined 会得出 true。与数字和字符串相比,null 和 undefined 为假。
console.log(null == undefined);
>> true
console.log(null == 0);
>> false
console.log(null == 1);
>> false
接下来是当值是对象类型时。对于对象类型,仅当两个值引用同一个对象时才为真。看看下面的示例。
let obj1 = {red:'赤', blue:'青'};
let obj2 = {red:'赤', blue:'青'};
let obj3;
obj3 = obj1;
console.log(obj1 == obj2);
>> false
console.log(obj1 == obj3);
>> true
obj1 和 obj2 虽然属性配置完全一样,但它们是不同的对象,所以用相等运算符比较会得到 false。obj3 赋给 obj1 并且这两个变量引用同一个对象,所以相等运算符比较真。
如果两个值其中一个是原始类型,另一个是对象类型,则将对象类型值转换为数字或字符串后进行比较。
console.log(10 == [10]);
>> true
console.log(10 == [10, 20]);
>> false
console.log(10 == ['10']);
>> true
console.log(10 == {num:'10'});
>> false
console.log(10 == new Number(10));
>> true
严格相等运算符(===)、严格不等运算符(!==)
如果被比较的两个值具有相同的数据类型并且具有相同的值,则严格相等运算符为真。如果两个值具有不同的数据类型,则始终为 false。另外,如果值是对象类型,如果两个值引用同一个对象则为真。
* 严格不等运算符产生与严格相等运算符完全相反的结果。
第一个是值是基本类型且具有相同数据类型时的示例。如果数据类型相同,则它与相等运算符的结果相同。
console.log(10 === 10);
>> true
console.log(10 === 8);
>> false
console.log('Apple' === 'Apple');
>> true
console.log('Apple' === 'apple');
>> false
console.log(true === true);
>> true
console.log(true === false);
>> false
console.log(null === null);
>> true
console.log(undefined === undefined);
>> true
console.log(NaN === NaN);
>> false
与相等运算符一样,在这两种情况下只有 NaN 为假。
对于两个值的数据类型不同的所有情况都是假的。
console.log(10 === '10');
>> false
console.log(1 === true);
>> false
console.log(0 === false);
>> false
console.log(null === undefined);
>> false
console.log(null === 0);
>> false
console.log(10 === [10]);
>> false
console.log(10 === new Number(10));
>> false
如果两个值都是对象类型,只有当两个值引用同一个对象时才为真。看看下面的示例。
let obj1 = {red:'赤', blue:'青'};
let obj2 = {red:'赤', blue:'青'};
let obj3;
obj3 = obj1;
console.log(obj1 === obj2);
>> false
console.log(obj1 === obj3);
>> true
obj1 和 obj2 虽然属性配置完全一样,但它们是不同的对象,所以用严格相等运算符比较会得到 false。obj3 给 obj1 赋值,两个变量引用同一个对象,所以严格相等运算符比较真。
这样,相等运算符和严格相等运算符可能会给出不同的结果,所以需要根据需要进行什么样的比较来考虑使用哪种运算符。
在 JavaScript 提供的运算符中,我们将解释用于通过组合多个关系运算符来创建更复杂的条件表达式的逻辑运算符的类型和用法。
逻辑运算符的类型和用法
逻辑运算符分为三种类型:
&& 逻辑积
|| 逻辑和
! 逻辑否定
如果运算符前后的表达式都为真,则合取为真。如果运算符之前或之后的至少一个表达式为真,则析取为真。如果运算符后的表达式为真,则逻辑否定为假,如果为假,则为真。
看看下面的示例。
let old = 28;
if (old > 20 && old < 30){
console.log('成年人');
}else{
console.log('未成年');
}
>> 成年人
上面,为两个使用关系运算符作为条件表达式的表达式编写了连词 &&。这次连词前后的表达式都为真,所以整个条件表达式也为真,执行if语句块中的处理。
注意,逻辑运算符前后的值不一定非得是true或false,如果写入了其他值(如数字或字符串),会根据规则判断为true或false。
因此,逻辑运算符是将一个或两个逻辑值组合起来并作为一个整体返回单个逻辑值的运算符。不过实际处理起来稍微复杂一些,我们一一查看。
逻辑积(&&)
如果运算符前后的值都为真,则合取为真。否则就是假的。
前 | 後 | 全体 |
true | true | true |
true | false | false |
false | true | false |
false | false | false |
以下是 JavaScript 计算包含连词的表达式 a && b 的方式:
a && b
它首先在运算符之前评估 a 。如果 a 为假,则无论 b 的求值如何,整个表达式的求值都为假。)按原样返回。
看两个样本。
let x = 10;
console.log(x > 20 && x < 40);
>> false
本例中x > 20为false,所以x < 40不求值,整个表达式求值返回false,即x > 20的值。
let x = 10;
console.log(null && x < 30);
>> null
在此示例中,null 被视为 false,因此不对 x < 30 求值,整个表达式的求值返回 null。请注意,作为逻辑运算符的结果,JavaScript 会返回许多不同的值,而不仅仅是真或假。
接下来,如果运算符之前的 a 评估为真。在这种情况下,b被评估,但如果b也被评估为真,则整体评估为真,如果b为假,则整体评估为假。此时,不再返回 true 或 false 作为整体评估,而是原样返回 b 的值(如果 b 是表达式,则通过评估表达式获得的值)。
看两个样本。
let x = 30;
console.log(x > 20 && x < 40);
>> true
在此示例中,x > 20 为真,因此整个表达式的计算返回真,即 x < 40 的值。
let x = 10;
console.log(x > 0 && 'OK');
>> OK
在此示例中,x > 0 为真,因此整个表达式的计算返回“OK”。
这样,使用逻辑与的表达式不仅返回true或false,还返回各种值,但在需要逻辑值的地方,如if语句的条件表达式,返回值是根据规则返回的true或false . 你不需要太在意它,因为它会被考虑。(有关哪些值被认为是真或假的信息,请参阅 被认为是真的值和被认为是假的值)。
比如返回null就认为是false,所以和返回false是一样的,如果返回’OK’,就认为是true,所以和返回true是一样的。
逻辑和(||)
如果运算符之前或之后的值至少有一个为真,则逻辑或为真。
前 | 後 | 全体 |
true | true | true |
true | false | true |
false | true | true |
false | false | false |
JavaScript 执行以下操作来评估包含析取的表达式 a || b:
a || b
它首先在运算符之前评估 a 。如果 a 为真,则无论 b 的求值如何,整个表达式的求值都为真,因此整个表达式的求值是 a 的值(如果 a 是表达式,则对表达式求值得到的值)返回为是。
看两个样本。
let x = 84;
let y = 72;
console.log(x > 80 || y > 80)
>> true
在这个例子中,x > 80 为真,所以 y > 80 不被求值,整个表达式的求值返回真,也就是 x > 80 被求值的值。
let mail = 'user@flashyonder.com';
let user = '';
console.log(mail || user)
>> null
在此示例中,变量 mail 被视为 true,因此不评估 user,并且整个表达式的评估返回存储在变量 mail 中的 ‘user@example.com’。(非空字符串在条件表达式等中被视为 true)。
接下来,如果运算符之前的 a 评估为假。在这种情况下,b 将被评估,但如果 b 评估为 true,则整体评估将为 true,如果 b 评估为 false,则整体评估将为 false。此时,不再返回 true 或 false 作为整体评估,而是原样返回 b 的值(如果 b 是表达式,则通过评估表达式获得的值)。
看两个样本。
let x = 75;
let y = 72;
console.log(x > 80 || y > 80)
>> false
在此示例中,x > 80 为假,因此整个表达式的计算返回假,即 y > 80 的值。
let mail = '';
let user = 'user';
console.log(mail || user)
>> user
在此示例中,mail 的计算结果为 false,因此整个表达式的计算结果返回存储在变量 user 中的“user”。(非空字符串在条件表达式等中被视为 true)。
使用逻辑和的表达式,就像逻辑乘积一样,不仅返回真或假,还返回各种值。你不需要很在意它,因为它被认为是
逻辑否定(!)
如果运算符后的值为真,则逻辑否定返回假,如果为假,则返回真。
後 | 全体 |
true | false |
false | true |
与合取和析取不同,逻辑否定总是返回 true 或 false。
看两个样本。
let x = 75;
console.log(!(x > 80))
>> true
在此示例中,x > 80 为假,因此整个表达式的计算返回真。
console.log(! undefined)
>> true
在此示例中,undefined 为 false,因此整个表达式的计算返回 true。
逻辑运算符的优先级
逻辑运算符通常与关系运算符和相等运算符一起使用,但有一个关于运算符优先级的警告。
逻辑运算符、关系运算符和相等运算符的优先顺序如下。
优先事项 | 组合规则 | 运算符 | 説明 |
17 | 右 | ! | 逻辑否定 |
12 | 左 | > | 大于 |
12 | 左 | >= | 以上 |
12 | 左 | < | 小于 |
12 | 左 | <= | 以下 |
11 | 左 | == | 相等 |
11 | 左 | != | 不相等 |
11 | 左 | === | 完全相同的 |
11 | 左 | !== | 不相同 |
7 | 左 | && | 逻辑积 |
6 | 左 | || | 逻辑和 |
由于逻辑与(&&)和逻辑或(||)的运算符优先级低于关系运算符和相等运算符,所以写起来没有问题:
x > 80 || y > 80
但是,逻辑与(!)的优先级高于关系运算符和相等运算符,所以如果你这样写,逻辑与运算会先执行,导致意想不到的结果增加。
! x > 80
将连词(!)与关系运算符或相等运算符一起书写时,使用分组括号()并编写如下。
!(x > 80)
条件运算符,也称为三元运算符,是一种可以根据条件划分处理的运算符。在本文中,我将解释如何在 JavaScript 中使用条件运算符。
使用条件运算符
条件运算符也称为三元运算符,可以根据条件分割处理。格式如下。
条件表达式 ? 表达式 1 : 表达式 2
条件表达式描述了一个逻辑值或可以转换为逻辑值的值。如果条件表达式的值为真,则返回表达式 1 的计算结果;如果条件表达式的值为假,则返回表达式 2 的计算结果。
看看下面的示例。
let point;
point = 84;
let msg = (point > 70) ? 'passed' : 'failed';
console.log(msg);
>> passed
point = 54;
let msg = (point > 70) ? 'passed' : 'failed';
console.log(msg);
>> failed
评估条件表达式中描述的 > 70 的点。在第一个示例中,条件表达式为真,因此整个表达式返回“通过”,在第二个示例中,条件表达式为假,因此整个表达式返回“失败”。
三元运算符可以使用 if 语句编写如下:
let point = 60;
let msg;
if (point > 70){
msg = 'passed';
}else{
msg = 'failed';
}
console.log(msg);
>> failed
typeof 运算符是一种返回表示目标值的数据类型的字符串的运算符。您可以使用 typeof 运算符找出数据类型。在这里,我将解释如何在 JavaScript 中使用 typeof 运算符。
使用 typeof 运算符
typeof 运算符是一种返回表示目标值的数据类型的字符串的运算符。格式如下。
typeof 值
为值指定一个值,例如数字、字符串或对象。根据值返回的值如下。
console.log(typeof 80);
>> number
console.log(typeof 80n);
>> bigint
console.log(typeof 'Pen');
>> string
console.log(typeof true);
>> boolean
console.log(typeof null);
>> object
console.log(typeof NaN);
>> number
console.log(typeof undefined);
>> undefined
console.log(typeof Symbol('A'));
>> symbol
console.log(typeof [10, 20]);
>> object
console.log(typeof {a:'abc'});
>> object
let func = function(){
return;
};
console.log(typeof func);
>> function
返回数字的“number”、字符串的“string”、布尔值的“boolean”等。所有对象类型(例如数组)都是“对象”,但只有函数是“函数”。请注意,’object’ 返回 null。
typeof 运算符返回的值是一个字符串,因此可以与字符串进行比较。看看下面的示例。
let num = 18;
if (typeof num === 'number'){
console.log('这是一个数字');
}
>> 这是一个数字
这样我们就能够确定目标值是否为数字。
当用于字符串时,加法运算符 (+) 可用于字符串连接。在这里,我们将看到如何使用加法运算符连接字符串。
连接字符串
算术运算符之一,加法运算符 (+),如果两个值都是数字,则用作数字的加法,但如果其中一个或两个值是字符串,则用作字符串用作连接的
看看下面的示例。
let address = '山东省' + '青岛市';
console.log(address);
>> 山东省青岛市
如果一个值是字符串而另一个是非字符串,则将非字符串值转换为字符串,然后连接字符串。
let price = 200 + '元';
console.log(price);
>> 200元
let str = '答案是' + true + '。';
console.log(str);
>> 答案是true。
即使您编写存储值而不是值的变量,字符串连接也会以相同的方式执行。
let price = 200;
console.log('价格是' + price + '元。');
>> 价格是200元。
let data = ['Orange', 'Melon'];
console.log('产品时' + data + '。');
>> 产品是Orange,Melon。
字符串连接顺序
加法运算符 (+) 的结合性规则是左的,因此如果表达式包含多个 + 运算符,它们将从左到右连接。
看看下面的示例。
let msg = 100 + 80 + '元。';
console.log(msg);
>> 180元。
本例首先执行 100 + 80 次操作。由于两个值都是数字,所以数字相加,结果是180。接下来是180+’圈。’ 执行操作。由于one是字符串,所以进行字符串连接,结果在变量中为’180。’ 被取代。
现在让我们稍微改变一下这个例子。
let msg = '价格是' + 100 + 80 + '元。';
console.log(msg);
>> 价格是10080円元。
在此示例中,首先执行操作 ‘price is’ + 100。由于 one 是字符串,因此执行字符串连接,结果为“价格为 100”。接下来,执行’Price is 100′ + 80 操作,但由于one 是字符串,因此执行字符串连接和’Price is 10080’。最后’价格是10080’+’日元。’执行操作,变量’价格为10080日元。’ 被取代。
像这样使用加法运算符混合数字和字符串时,请注意不要得到意想不到的结果。如有必要,您可以使用分组括号 () 更改执行操作的顺序。
let msg = '价格是' + (100 + 80) + '。';
console.log(msg);
>> 价格是180。
逗号运算符用于在应该写一个的地方写多个表达式。在这里,我将解释如何在 JavaScript 中使用逗号运算符。
如何使用逗号运算符
逗号运算符用于编写多个表达式,而不是编写一个。格式如下。
式1, 式2, 式3, ...;
可以编写多个表达式,其中通过用逗号分隔表达式来编写表达式。此时,表达式按从左到右的顺序求值。总的来说,它返回评估最后一个表达式的值。
看看下面的示例。
let x;
let y;
let z;
z = (x = 4, y = 8, y += x);
console.log(z);
>> 12
它使用逗号运算符编写三个表达式。整个表达式的计算返回 12,即最后一个表达式 y += x 的计算值。
逗号运算符主要用在for语句的初始化表达式或变量表达式中写多个表达式的时候。
for (let i = 1, j = 4; i < 5; i++, j--){
console.log("i = " + i + ", j = " + j);
}
>> i = 1, j = 4
>> i = 2, j = 3
>> i = 3, j = 2
>> i = 4, j = 1