Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
本章节复习的是JS中的表达式和运算符,用好这些可以大大提高开发效率。
一些基础:JavaScript中运算符有一元、二元和三元(条件)运算符,常见写法:
1 | // 操作数 + 运算符 + 操作数 |
本文将介绍一下几类运算符:
- 赋值运算符(Assignment operators)
- 比较运算符(Comparison operators)
- 算数运算符(Arithmetic operators)
- 位运算符(Bitwise operators)
- 逻辑运算符(Logical operators)
- 字符串运算符(String operators)
- 条件(三元)运算符(Conditional operator)
- 逗号运算符(Comma operator)
- 一元运算符(Unary operators)
- 关系运算符(Relational operator)
1.赋值运算符
最简单的赋值运算符是 =
,它将右边操作数的值赋值给左边的操作数,如 a = b
。
另外常见的复合赋值运算符有如下:
名称 | 简写的操作符 | 含义 |
---|---|---|
赋值 | x = y |
x = y |
加法赋值 | x += y |
x = x + y |
减法赋值 | x -= y |
x = x - y |
乘法赋值 | x *= y |
x = x * y |
除法赋值 | x /= y |
x = x / y |
求余赋值 | x %= y |
x = x % y |
求幂赋值 | x **= y |
x = x ** y |
左移位赋值 | x <<= y |
x = x << y |
右移位赋值 | x >>= y |
x = x >> y |
无符号右移位赋值 | x >>>= y |
x = x >>> y |
按位与赋值 | x &= y |
x = x & y |
按位异或赋值 | x ^= y |
x = x ^ y |
按位或赋值 | `x | = y` |
另外在ES6中,新增一类解构赋值:
1 | let a = ['aa', 'bb', 'cc']; |
2.比较运算符
通过比较两个比较对象来返回一个是否为真的布尔值,当两个比较的对象不是相同类型,JavaScript会尝试将两个比较对象转换成相同类型进行比较:
1 | let a = 10; |
常用的比较运算符有:
名称 | 描述 | 返回true的示例 |
---|---|---|
等于 == |
操作符两边数据相等 | 3 == '3' |
不等于 !== |
操作符两边数据不相等 | 3 != '4' |
全等 === |
操作符两边数据相等且类型相同 | 3 === 3 |
不全等 !== |
操作符两边数据不相等或类型不相同 | 3 !== '3' |
大于 > |
判断操作符左边大于右边 | 3 > 2 |
大于等于 >= |
判断操作符左边大于或等于右边 | 3 >= 2 |
小于 < |
判断操作符左边小于右边 | 3 < 4 |
小于等于 <= |
判断操作符左边小于或等于右边 | 3 <= 4 |
注意:=>
不是运算符,而是ES6中新增的箭头函数的标记符号。
3.算数运算符
除了标准的加减乘除这些基本运算符,JavaScript还提供一些新的算数运算符:
名称 | 描述 | 示例 |
---|---|---|
求余 % |
返回相除之后的余数 | 11 % 5 返回 1 |
自增 ++ |
++N 返回加一以后的值,N++ 返回原数值然后加一 |
++3 返回4,3++ 返回3 |
自减 -- |
--N 返回减一以后的值,N-- 返回原数值然后减一 |
--3 返回2,3-- 返回3 |
一元负值符 - |
返回操作数的负数,若不是Number 则试图转换为Number 再取负值 |
-'-2' 返回2 ;-2 返回2 |
一元正值符 + |
若操作数不是Number 类型则试图转换为Number |
+'-2' 返回-2 ;+'2' 返回2 |
指数运算符 ** |
计算底数a 的指数n 次方 |
2 ** 3 返回 8 |
4.位运算符
位运算符是在数字底层(即表示数字的 32 个数位)进行操作的。
复习数字32位数的表示
由于 |
在markdown语法会被识别成表格的语法,所以这里用小写 l
代替。
名称 | 描述 | 示例 |
---|---|---|
按位与 AND & |
在a 和b 的位表示中,每一个对应的位都为1则返回1,否则0 |
a & b |
按位或 OR l |
在a 和b 的位表示中,每一个对应的位,只要有一个为1则返回1,否则0 |
a l b |
按位异或 XOR ^ |
在a 和b 的位表示中,每一个对应的位,两个不相同则返回1,否则0 |
a ^ b |
按位非 NOT ~ |
反转被操作数的位 | ~a |
左移 shift << |
将a 的二进制串向左移动b 位,右边移入0 |
a << b |
算术右移 >> |
译注:算术右移左边空出的位是根据最高位是0和1来进行填充的 | a >> b |
无符号右移(左边空出位用0填充) >>> |
把a 的二进制表示向右移动b 位,丢弃被移出的所有位,并把左边空出的位都填充为0 |
a >>> b |
示例解释:
1的二进制表示为 0 0 0 0 0 0 1
3的二进制表示为 0 0 0 0 0 1 1
- 1.按位与
&
1
2
3
4
51 & 3 ; // 1
1 | 3 ; // 3
1 ^ 3 ; // 2
~1 ; // -2
1>>1 ; // 0
使用案例
1.16进制颜色值转RGB:
1
2
3
4
5
6
7
8function hexToRGB(hex){
let h = hex.replace('#','0x'),
r = h >> 16,
g = h >> 8 & 0xff,
b = h & 0xff;
return `rgb(${r},${g},${b})`
}
hexToRGB('#eeddff'); // "rgb(238,221,255)"2.RGB转16进制:
1
2
3
4
5
6function RGBToHex(rgb){
let r = rgb.split(/[^\d]+/),
c = r[1]<<16 | r[2]<<8 | r[3];
return `#${c.toString(16)}`;
}
RGBToHex('rgb(238,221,255)'); // "#eeddff"
5.逻辑运算符
常用来处理布尔值,但是当处理非布尔值的时候,往往返回非布尔值:
由于 |
在markdown语法会被识别成表格的语法,所以这里用小写 l
代替。
运算符 | 描述 | 示例 |
---|---|---|
逻辑与 && |
若a 和b 都能转为true 则返回true |
1+1==2 && 1-1==0 返回 true |
逻辑或 ll |
若a 和b 其中一个能转为true 则返回true ,若都是false 则返回false |
1+1==3 ll 1-1==0 返回 true |
逻辑非 ! |
若a 能转为true 则返回false |
!1+1==2 返回 false |
注意: 能被转成false
的值有null
,0
,NaN
,空字符串""
和undefined
。
几个示例:
1 | let a1 = true && true; // true |
常常还使用短路求值:
1 | false && anything ; // 被短路求值为false |
6.字符串运算符
在拼接字符串中,由 +
来连接两个字符串:
1 | let a = 'leo ' + 'cute~'; // 'leo cute~' |
7.条件(三元)运算符
可以使用三个操作数的运算符,运算结果为根据给定条件在两个值中取一个:
1 | // 当条件为真 则取 值1 ,否则取 值2 |
8.逗号运算符
对两个操作数求值并且返回最终操作数的值,通常用于for
循环中,在每次循环时对多个变量进行更新:
1 | let a1 = [1,2,3,9,6,6]; |
9.一元运算符
一元操作符仅对应一个操作数。
delete
删除一个对象或一个对象的属性或者一个数组中某一个键值,返回一个布尔值,删除成功返回true
,否则返回false
:
1 | let a = {name : 'leo',age : '15'}; |
typeof
返回一个参数的类型的字符串值,参数可以输字符串,变量,关键词或者对象:
1 | typeof new Function(); // "function" |
参数也可以是表达式,typeof
会根据其返回结果返回所包含的类型:
1 | typeof (1+1) ; // "number" |
void
表示一个运算没有返回值,常常用在创建一个超链接文本,但是点击的时候没有任何效果:
1 | <a href="javascript:void(0)">点击</a> |
instanceof
判断一个对象是否是指定类型,若是则返回true
:
1 | let d = new Date(); |
11.运算符优先级
当我们需要调整表达式计算顺序,就需要用到运算符的优先级,通过括号来实现排序,常见优先级从高到低:
由于 |
在markdown语法会被识别成表格的语法,所以这里用小写 l
代替。
运算符 | 描述 |
---|---|
. [] () |
字段访问、数组下标、函数调用以及表达式分组 |
++ -- - ~ ! delete new typeof void |
一元运算符、返回数据类型、对象创建、未定义值 |
* / % |
乘法、除法、取模 |
+ - + |
加法、减法、字符串连接 |
<< >> >>> |
移位 |
< <= > >= instanceof |
小于、小于等于、大于、大于等于、instanceof |
== != === !== |
等于、不等于、严格相等、非严格相等 |
& |
按位与 |
^ |
按位异或 |
l |
按位或 |
&& |
逻辑与 |
ll |
逻辑或 |
?: |
条件 |
= oP= |
赋值、运算赋值 |
, |
多重求值 |
参考资料
本部分内容到这结束
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
JS小册 | js.pingan8787.com |