共计 4080 个字符，预计需要花费 11 分钟才能阅读完成。
本文是 重温基础 系列文章的第五篇。今日感受：家的意义。
系列目录：
【复习资料】ES6/ES7/ES8/ES9 资料整理 (个人整理)
【重温基础】1. 语法和数据类型
【重温基础】2. 流程控制和错误处理
【重温基础】3. 循环和迭代
【重温基础】4. 函数
本章节复习的是 JS 中的表达式和运算符，用好这些可以大大提高开发效率。** 由于思否的 markdown 编辑器中，用表格编辑的时候，若含有 ”||” 或者 ”|” 会出错，所以我这里有几张用截图咯。
一些基础：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 位数的表示
示例解释：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. 逻辑运算符
常用来处理布尔值，但是当处理非布尔值的时候，往往返回非布尔值：
注意：能被转成 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. 运算符优先级
当我们需要调整表达式计算顺序，就需要用到运算符的优先级，通过括号来实现排序，常见优先级从高到低：
参考资料
1.MDN 表达式和运算符
本部分内容到这结束
Author
王平安
E-mail
pingan8787@qq.com
博 客
www.pingan8787.com
微 信
pingan8787
每日文章推荐
https://github.com/pingan8787…
ES 小册
es.pingan8787.com
