您现在的位置是：网站首页> 编程资料编程资料

JavaScript中强大的操作符使用详解_javascript技巧_

2023-05-24 488人已围观

简介 JavaScript中强大的操作符使用详解_javascript技巧_

一、一元操作符

操作符可以根据他们期待的操作符个数来分类，多数的JavaScript操作符都是二元操作符，二元操作符可以将两个表达式合成一个更复杂的表达式。JavaScript也支持一元操作符，这些操作符可以将一个表达式转化为另一个更复杂的表达式。同时，JavaScript中也有一个三元操作符，就是条件操作符（?:），它用于将三个表达式组成一个表达式。下面就先来看看一元操作符。

一元操作符具有以下特点：

最简单的操作符，用来操作一个表达式；
具有高优先级和右结合性；
在必要时将操作数自动转化为数值。

1. 递增和递减操作符（++ --）

递增操作符顾名思义就是递增其操作数，递减操作符就是递减其操作数。它们都有两个版本：

前缀版（++i）：操作符位于变量的前面，表示先递增(递减)，后执行语句；
后缀版（i++）：操作符位于变量的后面，表示先执行语句，后递增(递减)；

简单看两个例子：

// 前置递增操作符： let num1 = 1, num2 = 2; console.log(++num1 + num2) // 4 // 后置递增操作符： let num1 = 1, num2 = 2; console.log(num1++ + num2) // 3

可以看到，两种类型的结果是不一样的，原因就在于后置递增递减操作是在包含它们的语句被求值之后才执行的。

这四个操作符可以作用于任何类型的数据。对于这些类型，JavaScript会将他们转化为数值，再在这个数值上进行加一或减一操作。如果不能转化为一个数字，那么递增或递减的结果就是NaN：

let str = "hello"; console.log(str++)  // NaN

递增和递减操作符主要用于for循环中控制计算器递增或递减。

2. 加和减操作符

加和减操作符既是一元操作符，也是二元操作符。这里我们先来看一元加和减操作符。

（1）一元加运算符（+）

一元加操作符会将其操作数转化为数值，并返回转化后的值。需要注意：

如果操作数是数值，那它什么都不做；
如果操作数不能转化为数值，那么会返回NaN；
由于BigInt值不能转化为数值，因此这个操作符不能用于BigInt。

let a = -1; let b = "hello"; let c = BigInt; console.log(+a)  // -1 console.log(+b)  // NaN console.log(+c)  // NaN

（2）一元减运算符（-）

一元减操作符和一元加操作符类似，会先将操作数转化为数值，然后会改变结果的符号：

let a = -1; let b = 2; console.log(-a)  // 1 console.log(-b)  // -2

一元加和减操作符主要用于基本的算术运算，也可以用于数据类型的转换，将不同类型的数据转化为数字类型，像Number()方法一样。

二、位操作符

现代计算机中数据都是以二进制的形式存储的，即0、1两种状态，计算机对二进制数据进行的运算加减乘除等都是叫位运算，即将符号位共同参与运算的运算。

JavaScript中所有的数字都是以IEEE 754 64位格式存储，但是位操作并不直接应用到64位，而是先将值转化为32位整数，再进行位操作。之后再把运算结果转化为64位，所以我们只需要考虑32位整数即可。位操作是在数值的底层完成的，所以运算速度会相对于其他运算符快很多。

常见的位运算有以下几种：

运算符	描述	运算规则
&`	与	两个位都为1时，结果才为1
\|	或	两个位都为0时，结果才为0
^	异或	两个位相同为0，相异为1
~	取反	0变1，1变0
<<	左移	各二进制位全部左移若干位，高位丢弃，低位补0
>>	右移	各二进制位全部右移若干位，正数左补0，负数左补1，右边丢弃

在说这些操作符之前，先来看几个相关的概念。计算机中的有符号数有三种表示方法，即原码、反码和补码。三种表示方法均有符号位和数值位两部分，符号位都是用0表示“正”，用1表示“负”，而数值位，三种表示方法各不相同。

（1）原码

原码就是一个数的二进制数。例如：10的原码为0000 1010

（2）反码

正数的反码与原码相同，如：10 反码为 0000 1010
负数的反码为除符号位，按位取反，即0变1，1变0。

例如，-10的反码如下：

原码：1000 1010

反码：1111 0101

（3）补码

正数的补码与原码相同，如：10 补码为 0000 1010
负数的补码是原码除符号位外的所有位取反即0变1，1变0，然后加1，也就是反码加1。

例如，-10的补码如下：

原码：1000 1010

反码：1111 0101

补码：1111 0110

1. 按位与操作符（&）

按位与操作符（&）会对参加运算的两个数据按二进制位进行与运算，即两位同时为 1 时，结果才为1，否则结果为0。运算规则如下：

0 & 0 = 0   0 & 1 = 0   1 & 0 = 0   1 & 1 = 1

例如，3 & 5 的运算结果如下：

0000 0011
0000 0101
= 0000 0001

因此 3 & 5 的值为 1。需要注意：负数按补码形式参加按位与运算。

用途：

（1）判断奇偶

只要根据最未位是0还是1来决定，为0就是偶数，为1就是奇数。因此可以用if ((i & 1) === 0)代替if (i % 2 === 0)来判断a是不是偶数。

（2）清零

如果想将一个单元清零，即使其全部二进制位为0，只要与一个各位都为零的数值相与，结果为零。

2. 按位或操作符（|）

按位或操作符（|）会对参加运算的两个对象按二进制位进行或运算，即参加运算的两个对象只要有一个为1，其值为1。运算规则如下：

0 | 0 = 0 0 | 1 = 1   1 | 0 = 1   1 | 1 = 1

例如，3 | 5 的运算结果如下：

0000 0011
0000 0101
= 0000 0111

因此，3 | 5的值为7。需要注意：负数按补码形式参加按位或运算。

3. 按位非操作符 (~)

按位非操作符 (~)会对参加运算的一个数据按二进制进行取反运算。即将0变成1，1变成0。运算规则如下：

~ 1 = 0 ~ 0 = 1

例如：~6 的运算结果如下：

0000 0110
= 1111 1001

在计算机中，正数用原码表示，负数使用补码存储，首先看最高位，最高位1表示负数，0表示正数。此计算机二进制码为负数，最高位为符号位。

当按位取反为负数时，就直接取其补码，变为十进制：

0000 0110
= 1111 1001
反码：1000 0110
补码：1000 0111

因此，~6的值为-7。按位非的操作结果实际上是对数值进行取反并减1，

4. 按位异或运算符（^）

按位异或运算符（^）会对参加运算的两个数据按二进制位进行“异或”运算，即如果两个相应位相同则为0，相异则为1。运算规则如下：

0 ^ 0 = 0   0 ^ 1 = 1   1 ^ 0 = 1   1 ^ 1 = 0

例如， 3 ^ 5的运算结果如下：

0000 0011
0000 0101
= 0000 0110

因此，3^5的值为6。

异或运算具有以下性质:

交换律：(a^b)^c == a^(b^c)
结合律：(a + b)^c == a^b + b^c
对于任何数x，都有 x^x=0，x^0=x
自反性: a^b^b=a^0=a;

5. 左移操作符（<<）

左移操作符（<<）会将运算对象的各二进制位全部左移若干位，左边的二进制位丢弃，右边补0。若左移时舍弃的高位不包含1，则每左移一位，相当于该数乘以2。

例如：

a = 1010 1110 a = a << 2

这里将a的二进制位左移2位、右补0，即得 a = 1011 1000。

需要注意，左移会保留他所操作数值的符号。比如，将-2左移5位，会得到-64，而不是64。

6. 右移运算符

（1）有符号右移操作符（>>）

有符号右移操作符（>>）会将数值的32位全部右移若干位（同时会保留正负号）。正数左补0，负数左补1，右边丢弃。操作数每右移一位，相当于该数除以2。

例如：a = a >>2 就是将a的二进制位右移2位，左补0 或者左补1得看被移数是正还是负。

（2）无符号右移操作符（>>>）

无符号右移操作符（>>>）会将数值的32位全部右移。对于正数，有符号右移操作符和无符号右移操作符的结果是一样的。对于负数的操作，两者就会有较大的差异。

无符号右移操作符将负数的二进制表示当成正数的二进制表示来处理。所以，对负数进行无符号右移操作之后就会变的特别大。

三、加减乘除操作符

1. 加法操作符（+）

这里说的加法操作符就是二元的加操作符了。二元加操作符用于计算数值操作或者拼接字符串操作。

1 + 1             // 2 "1" + "2"         // "12" "hello" + "world" // "helloworld"

在进行加操作时，如果两个操作数都是数值或者都是字符串，那么执行结果就分别是计算出来的数值和拼接好的字符串。除此之外，执行结果都取决于类型转化的结果：它会优先进行字符串拼接，只有操作数是字符串或者是可以转化为字符串的对象，另一个操作数也会被转化为字符串，并执行拼接操作。只有任何操作数都不是字符串时才会执行加法操作。

1 + 2             // 3 "1" + "2"         // "12" "1" + 2           // "12" 1 + {}            // "1[object Object]" true + false      // 1  布尔值会先转为数字，再进行运算 1 + null          // 1 null会转化为0，再进行计算 1 + undefined     // NaN undefined转化为数字是NaN

需要注意加操作的顺序：

let a = 1; let b = 2; let c = "hello" + a + b;  // "hello12"

这里，由于每次加法操作都是独立完成的，第一次是字符串hello和数字a做加法操作，得到的结果是"hello1"，第二次加法操作仍然是一个字符串加一个数字，所以最终结果是一个字符串。如果想让a和b两个数字相加，就需要加上括号。

除此之外，还需要注意以下特殊情况：

如果有一个操作数是NaN，则结果是NaN；
如果是Infinity加Infinity，则结果是Infinity；
如果是-Infinity加-Infinity，则结果是-Infinity；
如果是Infinity加-Infinity，则结果是NaN；
如果是+0加+0，则结果是+0；
如果是-0加-0，则结果是-0；
如果是+0加-0，则结果是+0。

2. 减法操作符（-）

减法操作和加法操作符类似，但是减法操作符只能用于数值的计算，不能用于字符串的拼接。当进行减法操作时，如果两个操作数都是数值，就会直接进行减法操作，如果有一个操作数是非数值，就会将其转化为数值，再进行减法操作。如果转化结果为NaN，则运算结果也是NaN。

3 - 1      // 2 3 - true   // 2 3 - ""     // 3 3 - null   // 3 NaN - 1    // NaN

需要注意以下特殊情况：

如果是Infinity减Infinity，则结果是NaN；
如果是-Infinity减-Infinity，则结果是NaN；
如果是Infinity减-Infinity，则结果是Infinity；
如果是-Infinity减Infinity，则结果是-Infinity；

上一篇：关于Element-UI Table 表格指定列添加点击事件_vue.js_

下一篇：uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off_javascript技巧_