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

摘要：系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数本章节复习的是中的表达式和运算符，用好这些可以大大提高开发效率。

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

系列目录：

【复习资料】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)

最简单的赋值运算符是 = ，它将右边操作数的值赋值给左边的操作数，如 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;

通过比较两个比较对象来返回一个是否为真的布尔值，当两个比较的对象不是相同类型，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中新增的箭头函数的标记符号。

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

位运算符是在数字底层（即表示数字的 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"

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

注意： 能被转成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

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

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

let b = "ha";
a += b; // "leo cute~ha"

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

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

对两个操作数求值并且返回最终操作数的值，通常用于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

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

删除一个对象或一个对象的属性或者一个数组中某一个键值，返回一个布尔值，删除成功返回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 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"

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

点击
点击

比较两个操作数：

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

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

// 数组
let b = ["leo", "pingan", "robin"];
0 in b;       // true
"length" in b;// true

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

let d = new Date();
d instanceof Date;  // true

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

1.MDN 表达式和运算符

本部分内容到这结束

欢迎关注微信公众号【前端自习课】每天早晨，与您一起学习一篇优秀的前端技术博文 .