【JS】124-重温基础：表达式和运算符

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

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

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

1. ​​// 操作数 + 运算符 + 操作数​​
2. ​​1 + 2 ;​​
3. 
   
4. ​​// 运算符 + 操作数​​
5. ​​x ++;​​
6. 
   
7. ​​// 操作数 + 运算符​​
8. ​​++ x;​​

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

• 赋值运算符(Assignment operators)
• 比较运算符(Comparison operators)
• 算数运算符(Arithmetic operators)
• 位运算符(Bitwise operators)
• 逻辑运算符(Logical operators)
• 字符串运算符(String operators)
• 条件（三元）运算符(Conditional operator)
• 逗号运算符(Comma operator)
• 一元运算符(Unary operators)
• 关系运算符(Relational operator)

1.赋值运算符

最简单的赋值运算符是 ​​=​​​ ，它将右边操作数的值赋值给左边的操作数，如 ​​a=b​​​。
另外常见的复合赋值运算符有如下：

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

1. ​​let a = ['aa', 'bb', 'cc'];​​
2. 
   
3. ​​// 不使用解构赋值​​
4. ​​let a1 = a[0];​​
5. ​​let a2 = a[1];​​
6. 
   
7. ​​// 使用解构赋值​​
8. ​​let [a1, a2] = a;​​

2.比较运算符

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

1. ​​let a = 10;​​
2. ​​let b = '12';​​
3. ​​a > b; // false​​

常用的比较运算符有：

注意：
​​​=>​​不是运算符，而是ES6中新增的箭头函数的标记符号。

3.算数运算符

除了标准的加减乘除这些基本运算符，JavaScript还提供一些新的算数运算符：

4.位运算符

位运算符是在数字底层（即表示数字的 32 个数位）进行操作的。
复习数字32位数的表示

示例解释：
1的二进制表示为 ​​​0000001​​​3的二进制表示为 ​​0000011​​

• 1.按位与 ​​&​​

1. ​​1 & 3 ; // 1​​
2. ​​1 | 3 ; // 3​​
3. ​​1 ^ 3 ; // 2​​
4. ​​~1 ;    // -2​​
5. ​​1>>1  ; // 0​​

使用案例

• 1.16进制颜色值转RGB：

1. ​​function hexToRGB(hex){​​
2. ​​    let h = hex.replace('#','0x'),​​
3. ​​        r = h >> 16,​​
4. ​​        g = h >> 8 & 0xff,​​
5. ​​        b = h & 0xff;​​
6. ​​    return `rgb(${r},${g},${b})`​​
7. ​​}​​
8. ​​hexToRGB('#eeddff');           // "rgb(238,221,255)"​​

• 2.RGB转16进制：

9. ​​function RGBToHex(rgb){​​
10. ​​    let r = rgb.split(/[^\d]+/),​​
11. ​​        c = r[1]<<16 | r[2]<<8 | r[3];​​
12. ​​    return `#${c.toString(16)}`;​​
13. ​​}​​
14. ​​RGBToHex('rgb(238,221,255)'); // "#eeddff"​​

5.逻辑运算符

常用来处理布尔值，但是当处理非布尔值的时候，往往返回非布尔值：

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

1. ​​let a1 = true && true;    // true​​
2. ​​let a2 = true && false;   // false​​
3. ​​let a3 = false && true;   // false​​
4. ​​let a4 = false && false;  // false​​
5. ​​let a5 = false && "leo";  // false​​
6. ​​let a6 = true && "leo";   // "leo"​​
7. ​​let a7 = "leo" && "robin";// "robin"​​
8. 
   
9. 
   
10. ​​let b1 = true || true;    // true​​
11. ​​let b2 = true || false;   // true​​
12. ​​let b3 = false || true;   // true​​
13. ​​let b4 = false || false;  // false​​
14. ​​let b5 = false || "leo";  // "leo"​​
15. ​​let b6 = true || "leo";   // true​​
16. ​​let b7 = "leo" || "robin";// "leo"​​
17. 
    
18. ​​let c1 = !true;  // false​​
19. ​​let c2 = !false; // true​​
20. ​​let c3 = !"leo"; // false​​

常常还使用短路求值：

1. ​​false && anything ; // 被短路求值为false​​
2. ​​true || anything ;  // 被短路求值为true​​

6.字符串运算符

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

1. ​​let a = 'leo ' + 'cute~'; // 'leo cute~'​​
2. 
   
3. ​​let b = 'ha';​​
4. ​​a += b; // "leo cute~ha"​​

7.条件（三元）运算符

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

1. ​​// 当条件为真 则取 值1 ，否则取 值2​​
2. ​​// 条件 ? 值1 : 值2​​
3. ​​let a = 10;​​
4. ​​let b = a > 5 ? 'yes' : 'no'; // 'yes'​​

8.逗号运算符

对两个操作数求值并且返回最终操作数的值，通常用于 ​​for​​循环中，在每次循环时对多个变量进行更新：

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

9.一元运算符

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

delete

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

1. ​​let a = {name : 'leo',age : '15'};​​
2. ​​delete a.name;  // true​​
3. ​​a;              // {age: "15"}​​
4. 
   
5. ​​let b = [1,3,5];​​
6. ​​delete b[0];    // true​​
7. ​​b;              // [empty, 3, 5]​​
8. ​​b[0];           // undefined​​

typeof

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

1. ​​typeof new Function(); // "function"​​
2. ​​typeof "leo" ;         // "string"​​
3. ​​typeof 11 ;            // "number"​​
4. ​​typeof undefined ;     // "undefined"​​
5. 
   
6. ​​typeof true ;          // "boolean"​​
7. ​​typeof null ;          // "object"​​

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

1. ​​typeof (1+1) ;         // "number"​​
2. ​​typeof (1+1==2 ? 'yes' : 'no') ;   // "string"​​

void

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

1. ​​<a href="javascript:void(0)">点击</a>​​
2. ​​<a href="javascript:void(document.form.submit())">点击</a>​​

10.关系运算符

比较两个操作数：

in

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

1. ​​// 对象​​
2. ​​let a = {name:'leo',age:'15'};​​
3. ​​'name' in a;  // true​​
4. 
   
5. ​​// 数组​​
6. ​​let b = ['leo', 'pingan', 'robin'];​​
7. ​​0 in b;       // true​​
8. ​​'length' in b;// true​​

instanceof

判断一个对象是否是指定类型，若是则返回 ​​true​​：

1. ​​let d = new Date();​​
2. ​​d instanceof Date;  // true​​

11.运算符优先级

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

参考资料

1.MDN 表达式和运算符