![JS全书:JavaScript Web前端开发指南](https://wfqqreader-1252317822.image.myqcloud.com/cover/366/32858366/b_32858366.jpg)
3.5 运算符
3.5.1 算术运算符
1. 加法(+)、减法(-)、乘法(*)、除法(/)
- 加法(+)运算符对操作数进行求和,也可用来连接两个字符串。
- 减法(-)运算符对操作数进行求差。
- 乘法(*)运算符对操作数进行求积。
- 加法(+)运算符对操作数进行求商。
语法:
js expr1 + expr2; expr1 - expr2; expr1 * expr2; expr1 / expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P64_45530.jpg?sign=1739905781-lmdCMPuCShV1tiUAXcUzAy1NO2IQoOeF-0-aa34233c91faf795b894301eff82eb5e)
当加法(+)运算符用来连接字符串时,JavaScript会将操作数进行隐式类型转换后,再进行连接,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P64_45532.jpg?sign=1739905781-ubgSrBxWvwI7u6yXF7Mg11C9VjdYWKC4-0-61cd6e3732e56df74b59fc4bb4d95671)
2. 幂(**)
对被操作数进行乘方运算。
语法:js expr1 ** expr2; expr1为底数,expr2为指数。
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P64_45534.jpg?sign=1739905781-2KQKb5Phbb2hSY5SiEyf7gxNoetMGzmi-0-def894cedb2ffadab162b4e612b130c0)
3. 取模(%)
返回第一个操作数除以第二个操作数的余数。
语法:
expr1 % expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P65_45538.jpg?sign=1739905781-SMaYm0FvjeF0jl3w52HmnAlvyOKvDCPy-0-18f5251924a15654e2c47d7e60468917)
4. 一元正(+)
对操作数进行取值操作并返回,如果操作数不是Number类型,会将其转化为Number类型,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P65_45540.jpg?sign=1739905781-lHBSjS9b8gLDRpQVt7k3FM2HlY7mczFr-0-764f146f57171188db0c851fc169990b)
5. 一元反(-)
用来对操作数进行取反操作,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P65_45542.jpg?sign=1739905781-6JO0ayNXYWRsWzRK0S63Agt6VQuvexXf-0-aaf83df5a81e845a7ff7ba5c212b94c7)
6. 递增(++)、递减(--)
递增(++)运算符将操作数+1后返回一个数值,递减(--)运算符将操作数-1后返回一个数值。
语法:
expr++; ++expr;
expr--; --expr;
示例代码:
```js let foo = 1, let baz = 1;
// 先取值再计算 foo++; // -> 1 baz--; // -> 1
console.log(foo,baz); // > 2,0 ```
上述代码中,定义了两个变量foo和baz,并赋值为1,之后分别对foo和baz进行递增和递减操作,此时返回值均为1,这是因为递增和递减运算符两种使用方式的返回值不同,具体如下。
- 位于被操作数之后,返回递增(减)前的数值。
- 位于被操作数之前,返回递增(减)后的数值。
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P66_45550.jpg?sign=1739905781-EgrcCqnI1bQwRJQ3sdbfVwHlIBvjQr70-0-aca9656fc8c592a415c5289fe8f5d0f3)
3.5.2 逻辑运算符
1. 逻辑与(&&)
逻辑与(&&)会在遇到能够被转化为false的操作数后返回该操作数,如果没有,则返回最后一个操作数。
语法:
expr1 && expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P66_28053.jpg?sign=1739905781-DF1wGwb5UMY7sPWWWO89E9qQM7WKcskV-0-bf6716beee9ec9e52e89e15ae857a8c0)
2. 逻辑或(||)
逻辑或(||)会在遇到能够被转化为true的操作数后返回该操作数,如果没有,则返回最后一个操作数。
语法:
js expr1 || expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P66_45553.jpg?sign=1739905781-BLKeYOVOB6gAFHlpYwrsdNZfoZlCzzr6-0-205caba2a75d64038c999afd4ed4a37b)
利用逻辑与(&&)和逻辑或(||)的这个特性,可以方便地做短路运算,以精简代码,示例如下。
function foo(name){ return name || ''; }
3. 逻辑非(!)
如果操作数能够被转化为true,则逻辑非(!)返回false;如果操作数能够被转化为false,则逻辑非(!)返回true。
语法:
1expr;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P67_45557.jpg?sign=1739905781-ED0u2gDfDuMM6NWK1quwKQ87tFwxYzoM-0-c0a9ca14f12bdf593cb94ff603019848)
有时,你可能会看到!!的用法,!!相当于使用Boolean进行类型转换,但在if语句中,!!是不必要的,因为if语句本身会对其中的表达式进行Boolean操作,使用!!反而会增加额外的性能消耗,示例如下。
if(expr){ // 相当于 Boolean(expr)
}
// 不推荐的方式 if(!!expr){ // 相当于 Boolean(Boolean(expr))
}
3.5.3 比较运算符
比较运算符返回一个布尔值,表示两个操作数的比较结果。
1. 大于(>)、小于(<)、大于或等于(>=)、小于或等于(< =)
比较运算符在比较expr1和expr2时,如果expr1和expr2类型不同,则将它们转化成字符串、数字或布尔值进行比较,具体如下。
- 大于(>):expr1大于expr2时,返回true。
- 小于(<):expr1小于expr2时,返回true。
- 大于或等于(>=):expr1大于或等于expr2时,返回true。
- 小于或等于(<=):expr1小于或等于expr2时,返回true。
语法:
expr1 > expr2; expr1 < expr2; expr1 >= expr2; expr1 <= expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P68_45561.jpg?sign=1739905781-IBYDCPyCvKGmhXFvnoVchbQxeskWf6di-0-2b682f296c9778d7167df355e5107fd2)
2. 相等(==)、不相等(!=)
相等(==)和不相等(!=)会将两个操作数转换类型后进行比较。
语法:
js expr1 == expr2; expr1 != expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P68_45565.jpg?sign=1739905781-SrUa0ZJik8pt0xsE0wGTtrWmxasjvzLE-0-8b299c216877fa0755387ee7828fd1f3)
3. 严格相等(===)、严格不等(!==)
严格相等(===)和严格不等(!==)直接比较两个操作数,不进行类型转换。
语法:
expr1 === expr2; expr1 !== expr2;
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P68_45569.jpg?sign=1739905781-dPpRkmvZiBCpUpU4xDcgZgKLO5bf3Ip6-0-3e1979a6398681e322e1da74fd6ab886)
3.5.4 三元运算符
三元运算符对第一个表达式进行判断,并根据其结果返回不同的表达式。
语法:
js expr ? expr1 : expr2;
如果expr转化为布尔值后为true,则返回expr1,否则返回expr2。
示例代码:
js true ? 1 : 2; // -> 1 false ? 1 : 2; // -> 2
3.5.5 赋值
赋值运算符将表达式右边的值赋值给左边的变量。
1. 赋值运算符
语法:
expr1 = expr2;
示例代码:
let a = 1; console.log(a); // > 1 let b = a; console.log(b); // > 1
2. 复合赋值
复合赋值是将某些运算符与赋值运算符组合使用,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P69_45581.jpg?sign=1739905781-QWrDTnzCEyuUCy1KeDDcH2QJKI3vlTo3-0-efd2aa5ab39f1683e42248b8cad6c973)
3. 解构赋值
解构赋值用于从数组或对象提取值,并保存到新的变量中。
数组的解构赋值,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P69_45583.jpg?sign=1739905781-DQnpZhVpVnVe5S5U1ia7aDILPMWFYa3r-0-88faa072526b80ef511e22aea3b68115)
对象的解构赋值,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P70_45586.jpg?sign=1739905781-iKOfcYfjhuEN0Rq2DeZal4gmv7tOTzlT-0-93ebc7b87bb318c9d67ef111cf85d205)
字符串的解构赋值,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P70_45589.jpg?sign=1739905781-5PGoyqD2UHbpE6cOfdIGlWqCXOExDN8o-0-5f37f6e56b371ae417805d4eee306e0b)
3.5.6 位运算符
按位操作符(Bitwise operators)将其操作数(operands)当作32位的比特序列(由0和1组成),而不是十进制、十六进制或八进制数值。
例如,十进制数9,用二进制表示则为1001。按位操作符操作数字的二进制形式,但是返回值依然是标准的JavaScript数值。
表3-4总结了JavaScript中的按位操作符。
表3-4 位运算符
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-T70_45590.jpg?sign=1739905781-lL7XiCbrwK7EzIq18JHcnrVXT1U49T0R-0-7dd549808973bb91e0ac32d6fdb124a2)
示例代码:
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P71_45591.jpg?sign=1739905781-LArwR4KFVo9CEgpiljGUT3r4O162ihoJ-0-81b8b8d8518e477434cecb4ea1c316e7)
位运算符也可与算术运算符组合使用。
3.5.7 异步操作符async function
在介绍async function前,我们先来讲解ES6中出现的Promise,Promise是一个构造函数,其提供了异步编程的解决方案,以解决回调函数的问题,同时,其提供的all方法也为异步并发(例如并发请求)提供了处理机制。
Promise的用法如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P71_45593.jpg?sign=1739905781-Ir7TMDDluI34HNRsZtyyj3M30XkWSxU5-0-06fbe16883aa3c027d3060405d206bcb)
ES8中引入了async function,用来简化异步操作,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P72_45595.jpg?sign=1739905781-YdsUuKie3YyG1HlsH7ZUtrt3NLjVfyvj-0-b1afecfad832d28e57234adb0d7e5ba9)
如果async function内部有await命令,则需要等所有的await后面的Promise对象执行完,才会返回,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P72_45597.jpg?sign=1739905781-spdkmCnU440t5SgZIAJmZww2DIHfz7LQ-0-efc8be4c39bcf8d60fe2ba3e38f2864a)
上述代码中的then方法也可以使用await来省略,await会在等待Promise对象执行完后,直接获取resolve的值,示例如下。
await只能在async function定义的函数中使用,下面的示例创建了一个立即调用的函数表达式,关于立即调用函数表达式请参阅函数一章。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P73_45600.jpg?sign=1739905781-oV0P0OvzhPLWO4kjI3JZJiOzItWHXNhe-0-81de432ff2f98a4e76388a385cf4ff3e)
上面的示例中,最终执行的结果与直接调用then方法的结果有些不同,then方法的示例会在第1秒后输出2,第2秒后输出2,而await的示例会在第1秒后输出2,之后才执行第二个await,间隔2秒后输出2,因此,实际上是第3秒输出的2,这是await的特点,也是async function/await致力于解决的痛点之一,将异步代码同步化,降低异步编程的负担。当然,如果你想让上面的示例与调用then方法的结果相同,将其拆分成2个async function即可。
在await中,去掉了then方法那样的链式操作,因此,也不能使用catch方法,如果要捕获其中的错误,可以使用try…catch语句,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P73_45602.jpg?sign=1739905781-CMw8d6i39dA5Wi9AvFlcNkv3b7QJL7rf-0-49e99b7605e6ef0a0447330c3a6c2bc5)
此外,ES6也提供了Generator函数来处理异步编程,有了async function则不推荐再使用function*来处理异步问题。
Generator函数由function*声明,在函数内部,不仅可以使用return返回,还可以使用yield返回,和await类似,yield只能在function*声明的函数内部使用,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P73_45604.jpg?sign=1739905781-oBoEyhxSJcBOcJEVxmVNdoJufftRKCc5-0-59536abf1b9c1fc893dc0ea5d3f5ed51)
Generator函数是可以嵌套的,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P73_45606.jpg?sign=1739905781-sRRutu3JVqI8LDSbh08aX5012RFLL14m-0-0033ca9174749a20bbf408eb51880cc3)
现在,使用Generator函数运行上面的两个示例。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P74_45609.jpg?sign=1739905781-LKGVFadJfYX7Zwksc919bBkDzeOKnNd8-0-2295e89f2da1f60060eb6d32da232213)
相比于async function,function*的代码更加烦琐,毕竟Generator函数不是为异步而生的,Generator函数更适用于遍历器(Iterator,参照本书相应章节)生成、状态管理、无限序列等场景。
3.5.8 其他运算符
1. delete
从对象中删除一个属性,或从数组中移除一个元素,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P75_29266.jpg?sign=1739905781-fmmo9o6MsWxIZSEF34EjP3zx9BaKh0zP-0-51a229eb393660c8412e14381501d5f6)
2. typeof与instanceof
可查看3.3.4小节。
3. void
void操作符对其后的表达式求值并返回undefined,一般用来替代undefined,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P75_45612.jpg?sign=1739905781-kDUJhyWZeyjFFtr67O1LLKm0yjdesYA4-0-d1dc6186d7a7b37299a17285fc1b25cc)
4. new
new运算符通过一个构造函数创建一个实例,并返回这个实例。
其语法如下。
new constructor[([arguments])]
其中,constructor是一个内置或自定义的构造函数,arguments为可选的入参,在constructor中被使用。
内置的构造函数有很多,例如,Number、String、Boolean、Date、Object、Function等,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P76_45616.jpg?sign=1739905781-kbdvkw807FdB3249yl2fj2qLxnwuu4Ki-0-1b05205598f6bcfa55200df71d470d44)
创建一个自定义的构造函数,示例如下。
function People {};
// 通过 new 运算符创建一个实例 let p = new People();
5. in
返回一个布尔值,表示对象中是否包含该属性,示例如下。
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-P76_45620.jpg?sign=1739905781-eB2XHTNxXYDwE1a4ds4UJmj0P3amagRb-0-f8308d44bc4e4cbe0108c8f859cb4518)
6. 逗号
逗号运算符顺序执行表达式,并返回最后一个表达式,示例如下。
1, 2, 3; // -> 3
7. 括号()
用来提升运算优先级。
3.5.9 运算符优先级
运算符优先级规定了表达式执行运算时的顺序——按照运算符的优先级从高到低执行。如下:先乘除后加减,表3-5列出了JavaScript中的运算符优先级。
表3-5 运算符优先级
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-T76_45623.jpg?sign=1739905781-jpOo6aJ4sUphoSv0SE1NE4kY0Dze1stO-0-63f28700169ada3e24c4ba97ee862e3f)
续表
![](https://epubservercos.yuewen.com/A25E65/17640316907888206/epubprivate/OEBPS/Images/Figure-T78_45625.jpg?sign=1739905781-d60vu3aqUq0UzGEuB3ryLpybOooT2VEo-0-114d2a1c14e1398cdb867b031e055472)
练习
- 使用算术运算符。
- 使用逻辑运算符。
- 使用解构运算符。
- 使用new运算符创建一个对象。