JavaScript运算符和判断、循环语句(笔记)

1. 算术运算符

算数运算符	描述	实例
+	加	11 + 22 = 33
-	减	33 - 22 = 11
*	乘	10 * 8 = 80
/	除	10 / 20 = 0.5
%	取余数(取模)	9 % 2 = 1

注意：js浮点类型的运算会出现问题

浮点类型的会转为二进制的位数为 64 位，然后在64位时会四舍五入，在转为十进制，这样就出现精度问题
单独写+会做数据类型转换、和字符串相加会拼接，两个数字相加会进行加法运算

2. 递增和递减运算符

• 前置递增或递减，先自增或自减在参与运算，先自加 1 后返回值
• 后置递增或递减，先参与运算再自增或自减，先返回原值后自加 1
• 加加和减减的优先级比较高，但是在算数表达式中在执行到它们的时候才会影响这个变量的值
• 因为在程序执行算数表达式时，是从左向右执行，右边的值不会影响左边的

3. 比较运算符(关系运算符)

比较运算符	说明	案例	结果
>	大于号	2 > 1	true
<	小于号	2 < 3	true
>=	大于等于号(大于或者等于)	2 >= 2	true
<=	小于等于号(小于或者等于)	2 <=2	true
==	判等号	2 == “2”	true
!=	不等号	2 != “2”	false
===	全等，要求值和数据类型都一致	2 === “2”	false
!==	全不等,要求值和数据类型都不一致	2 !== “2”	true

=：赋值

==：比较值(只比值)

===：比较值和数据类型

4. 逻辑运算符

逻辑运算符	说明	案例	结果
&&	逻辑与(全部为真才为真、一个为假就为假)	true && false	false
||	逻辑或(一个为真就为真、全部为假才为假)	true || false	true
!	逻辑非(取反)	!true	false

4.1 逻辑中断

• 逻辑与中断：找假值并返回最先找到的假值，如果没有找到就返回最后一个值
• 逻辑或中断：找真值并返回最先找到的真值，如果没有找到就返回最后一个值

5. 赋值运算符

赋值运算符	说明
=	自接赋值
+=、-=、*=、/=、%=	先本身和后面的数值进行计算，在赋值

var sum = 10

sum += 5  // sum = sum + 5 // 15

6. 运算符优先级

优先级	运算符	符号
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先 * / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先 && 后 ||
7	赋值运算符	=
8	逗号运算符	,

注意：虽然 && 优先级大于 ||，但是按照程序执行算数表达式时，是从左向右执行，无法模拟出这种情况，

因为当 || 要找真时就直接找到并返回，后面的就已经短路了

// 逗号操作符：i = 0, j = 1, k = 2 等价于 i = 0; j = 1; k = 2 也就是说
// for循环可以这样写，多写一些限制条件，但是你自己把逗号改成分号不行，可以用表达式表达
for (let i = 0, j = 10; i <= j; i++, j--) {
  console.log(`i:${i},j:${j}`);
}

7. 判断语句

7.1 if

if (条件表达式) {
  // 满足当前条件时执行
} else if(条件表达试) {
  // 满足当前条件时执行
} else {
  // 全部条件都不满足时执行
}

7.2 switch

// 性能要比if高，switch是匹配，if是条件判断
// break防止case穿透，必须要书写，比如当第一个条件成立后，如果不写break，后面的代码都会执行
switch (key) {
  case value:
    // 满足当前条件时执行(key与value匹配)
    break;
  case value:
    // 满足当前条件时执行
    break;
  default:
    // case中所有条件都不满足时执行
    break;
}

7.3 三元运算符(三目)

三元运算符是简化版的if

条件表达式 ? 表达式1 : 表达式2

条件表达式为真时，执行表达式1，为假时执行表达式2

三目运算符也有返回值

8. 不可思议的相等和不相等

undefined == null // true
undefined == "" // false
null == " " // false
null == "" // false
NaN == NaN // false
"" == " " // false

9. 循环语句

9.1 for

for (初始值; 条件判断; 改变初始值的表达式) {
  // 循环体
}
// for循环执行顺序
// 1.初始值
// 2.条件判断
// 3.循环体
// 4.改变初始值的表达式
// 5.条件判断
// 6.循环体...
// 初始值只会执行一次

9.2 while

// 在不确定循环次数的时候可以使用while
// while的效率要比for高
while (条件表达式) {
  // 循环体
}

// 实例
var sum = 0
while (sum < 10) {
  	// 循环体
    sum++
}

9.3 do…while

// do...while至少循环一次
do {
  // 循环体
} while (条件表达式)

9.4 跳出循环与跳出当次循环

• break：满足条件跳出循环，结束当层循环(指的是存在多层循环)
• continue：满足条件跳出当次循环，进入下次循环

10. 少见的运算符

有的是 ES6 新增的，有的是位运算(一般很少用)，这里就记录一下

10.1 可选链操作符 ?.

// 当一个对象访问一个没有的属性时，或返回 undefined
let obj = {
  a: 10
}

obj.a // 10
obj.b // undefined
obj.b.c // Cannot read properties of undefined (reading 'c')，由于 undefined 没有 c 属性则会报错
obj.b?.c // undefined，当不确定一个属性是否存在时，需要这样使用

10.2 空值合并运算符 ??

// 该运算符和 || 很相似，但是 ?? 只区分 null 和 undefined，而 || 区分所有 Boolean 转换为假的值
0 || 1 // 1
0 ?? 1 // 0

// ?? 不存在优先级，和 || 混合使用会报错
null || undefined ?? "haha"  //  Unexpected token '??'
(null || undefined) ?? "haha"; // 'haha'，需要手动添加括号

10.3 逻辑空赋值 ??=

// 当左侧为 null 或 undefined 时赋值
let a = undefined
let b = 123
a ??= "haha" // 'haha'
b ??= "haha" // 123

10.4 逻辑或赋值 ||=

// 当左侧 Boolean 转换为假时赋值
let a = ""
let b = false
a ||= "haha" // 'haha'
a ||= "heihei" // 'heihei'

10.5 与异或运算符 & | ^

// & 运算符在两个操作数对应的二进位都为 1 时，该位的结果值才为 1
let a = 3 // 0011
let b = 5 // 0101

a & b = 1 // 0001

// | 运算符在其中一个或两个操作数对应的二进制位为 1 时，该位的结果值为 1
let a = 3 // 0011
let b = 5 // 0101

a | b = 7 // 0111

// ^ 运算符在两个操作数有且仅有一个对应的二进制位为 1 时，该位的结果值为 1
let a = 3 // 0011
let b = 5 // 0101

a ^ b = 6 // 0110