本文是 重温基础 系列文章的第五篇. 今日感受: 家的意义.
系列目录:
[复习资料] 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= | 赋值、运算赋值 |
, | 多重求值 |
来源: https://juejin.im/post/5c17c2a8f265da61461e1471