【重温基础】5.表达式和运算符

本文是 重温基础 系列文章的第五篇。 今日感觉：家的意义。

系列目录：

• 【复习资料】ES6/ES7/ES8/ES9资料整理(我的整理)
• 【重温基础】1.语法和数据类型
• 【重温基础】2.流程控制和错误处理
• 【重温基础】3.循环和迭代
• 【重温基础】4.函数

本章节复习的是JS中的表达式和运算符，用好这些能够大大提升开发效率。

一些基础：JavaScript中运算符有一元、二元和三元（条件）运算符，常见写法：

// 操做数 + 运算符 + 操做数
1 + 2 ;

// 运算符 + 操做数
x ++;

// 操做数 + 运算符
++ x;
复制代码

本文将介绍一下几类运算符：

• 赋值运算符(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	x = x | y

另外在ES6中，新增一类解构赋值：

let a = ['aa', 'bb', 'cc'];

// 不使用解构赋值
let a1 = a[0];
let a2 = a[1];

// 使用解构赋值
let [a1, a2] = a;
复制代码

2.比较运算符

经过比较两个比较对象来返回一个是否为真的布尔值，当两个比较的对象不是相同类型，JavaScript会尝试将两个比较对象转换成相同类型进行比较:

let a = 10;
let b = '12';
a > b; // false
复制代码

经常使用的比较运算符有：

名称	描述	返回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位数的表示

名称	描述	示例
按位与 AND &	在a和b的位表示中，每个对应的位都为1则返回1，不然0	a & b
按位或 OR |	在a和b的位表示中，每个对应的位，只要有一个为1则返回1，不然0	a | 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 & 3 ; // 1
1 | 3 ; // 3
1 ^ 3 ; // 2
~1 ;    // -2
1>>1  ; // 0
复制代码

使用案例

• 1.16进制颜色值转RGB：

function 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进制：

function 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.逻辑运算符

经常使用来处理布尔值，可是当处理非布尔值的时候，每每返回非布尔值：

运算符	描述	示例
逻辑与 &&	若a和b都能转为true则返回true	1+1==2 && 1-1==0 返回 true
逻辑或 ||	若a和b其中一个能转为true则返回true，若都是false则返回false	1+1==3 || 1-1==0 返回 true
逻辑非 !	若a能转为true则返回false	!1+1==2 返回 false

注意： 能被转成false的值有null，0，NaN，空字符串""和undefined。
几个示例：

let a1 = true && true;    // true
let a2 = true && false;   // false
let a3 = false && true;   // false
let a4 = false && false;  // false
let a5 = false && "leo";  // false
let a6 = true && "leo";   // "leo"
let a7 = "leo" && "robin";// "robin"


let b1 = true || true;    // true
let b2 = true || false;   // true
let b3 = false || true;   // true
let b4 = false || false;  // false
let b5 = false || "leo";  // "leo"
let b6 = true || "leo";   // true
let b7 = "leo" || "robin";// "leo"

let c1 = !true;  // false
let c2 = !false; // true
let c3 = !"leo"; // false
复制代码

经常还使用短路求值：

false && anything ; // 被短路求值为false
true || anything ;  // 被短路求值为true
复制代码

6.字符串运算符

在拼接字符串中，由 + 来链接两个字符串：

let a = 'leo ' + 'cute~'; // 'leo cute~'

let b = 'ha';
a += b; // "leo cute~ha"
复制代码

7.条件（三元）运算符

可使用三个操做数的运算符，运算结果为根据给定条件在两个值中取一个：

// 当条件为真 则取 值1 ，不然取 值2
// 条件 ? 值1 : 值2
let a = 10;
let b = a > 5 ? 'yes' : 'no'; // 'yes'
复制代码

8.逗号运算符

对两个操做数求值而且返回最终操做数的值，一般用于for循环中，在每次循环时对多个变量进行更新：

let a1 = [1,2,3,9,6,6];
for(let i = 0,j = 5; i<=j; i++, j--){
    console.log(`i:${i},j:${j},i值:${a1[i]},j值:${a1[j]}`)
}
// i:0,j:5,i值:1,j值:6
// i:1,j:4,i值:2,j值:6
// i:2,j:3,i值:3,j值:9
复制代码

9.一元运算符

一元操做符仅对应一个操做数。

delete

删除一个对象或一个对象的属性或者一个数组中某一个键值，返回一个布尔值，删除成功返回true，不然返回false:

let a = {name : 'leo',age : '15'};
delete a.name;  // true
a;              // {age: "15"}

let b = [1,3,5];
delete b[0];    // true
b;              // [empty, 3, 5]
b[0];           // undefined
复制代码

typeof

返回一个参数的类型的字符串值，参数能够输字符串，变量，关键词或者对象:

typeof new Function(); // "function"
typeof "leo" ;         // "string"
typeof 11 ;            // "number"
typeof undefined ;     // "undefined"

typeof true ;          // "boolean"
typeof null ;          // "object"
复制代码

参数也能够是表达式，typeof会根据其返回结果返回所包含的类型：

typeof (1+1) ;         // "number"
typeof (1+1==2 ? 'yes' : 'no') ;   // "string"
复制代码

void

表示一个运算没有返回值，经常用在建立一个超连接文本，可是点击的时候没有任何效果：

<a href="javascript:void(0)">点击</a>
<a href="javascript:void(document.form.submit())">点击</a>
复制代码

10.关系运算符

比较两个操做数：

in

判断指定属性是否在指定对象中，如果则返回true：

// 对象
let a = {name:'leo',age:'15'};
'name' in a;  // true

// 数组
let b = ['leo', 'pingan', 'robin'];
0 in b;       // true
'length' in b;// true
复制代码

instanceof

判断一个对象是不是指定类型，如果则返回true：

let d = new Date();
d instanceof Date;  // true
复制代码

11.运算符优先级

当咱们须要调整表达式计算顺序，就须要用到运算符的优先级，经过括号来实现排序，常见优先级从高到低：

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象建立、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串链接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
|	按位或
&&	逻辑与
||	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

参考资料

1.MDN 表达式和运算符

---

本部份内容到这结束

Author	王平安
E-mail	pingan8787@qq.com
博 客	www.pingan8787.com
微 信	pingan8787
每日文章推荐	github.com/pingan8787/…
JS小册	js.pingan8787.com

欢迎关注个人微信公众号【前端自习课】