爱创课堂前端js基础逻辑运算符逻辑非运算短路语法

PGoneow0vuxc8m 2017-11-09

展开全文

爱创课堂前端js基础逻辑运算符逻辑非运算短路语法

爱创课堂前端培训 js基础逻辑运算符逻辑非运算短路语法

1.4 逻辑运算符

逻辑运算符：

逻辑与运算： &&

逻辑或运算: ||

逻辑非运算： !

逻辑运算通常指的是布尔值参与运算。得到的结果也是布尔值：

1.4.1 逻辑与运算

真值表：a && b

a && b
true	true	true
true	false	false
false	true	false
false	false	false

1 console.log(true && true);
2 console.log(true && false);
3 console.log(false && true);
4 console.log(false && false);

总结：逻辑与运算，都是true才是true。有一false则false。

1.4.2 逻辑或运算

真值表

a \|\| b
true	true	true
true	false	true
false	true	true
false	false	false

总结：逻辑或运算，有一true，则true。全false才false.

1 console.log(true || true);
2 console.log(true || false);
3 console.log(false || true);
4 console.log(false || false);

1.4.3 逻辑非运算

非真即假，非假即真。

1 // 逻辑非运算
2 console.log(!true);
3 console.log(!false);

特殊情况：字符串或者数字或者特殊字符参与逻辑运算会自动转换为布尔值参与运算，得到的不一定是布尔值。

1 console.log(null || 0);
2 console.log(null && 1);

NaN，0，“”，null，undefined会转换为false。
非0的数字，非空字符串，Infinity会转换为true。

1.4.4 短路语法

①逻辑与&&

将逻辑与比喻成串联电路，判断过程，想象成电流通过的过程。

电流通过：如果a为真，电流能够通过流通到b，结果就是b；如果a为假，电流不能通过，停留在a，结果为a。

1 console.log("123" && true);
2 console.log("" && true);
3 console.log(NaN && false);
4 console.log(NaN && true);
5 console.log(0 && "1");
6 console.log(undefined && "你好");
7 console.log(null && true);
8 console.log(Infinity && 3);

②逻辑或||

将逻辑或比喻成并联电路，判断过程，想象成电流通过的过程。

电流经过时：如果a为真，电流直接从a完成循环，结果为a；如果a为假，电流从a不能经过，流经到b，我们结果是b。

总结：(逻辑与 && ) 如果a能被转换为false，那么返回a；否则，返回b。

(逻辑或 || ) 如果a能被转换为true，那么返回a；否则，返回b。

（不要记结论，自己会推导）

1 console.log("123" || true);
2 console.log("" || 8);
3 console.log("" || null);
4 console.log(NaN || false);
5 console.log(NaN || "世界");
6 console.log(NaN || true);
7 console.log(0 || "1");
8 console.log(undefined || "你好");
9 console.log(null || true);
10 console.log(Infinity || 3);

1.4.5 逻辑运算符的顺序

逻辑运算符的顺序：先非，与，最后或。

小测试：

false || !false && false || true;

1 原式= false || !false && false || true
2     = false || true && false || true
3     = false || false || true
4     = false || true
5     = true

4 && "hello" || !false || !true && null;

1 原式 = 4 && "hello" || !false || !true && null;
2      = 4 && "hello" || true || false && null
3      = "hello" || true || false
4      = "hello" || false
5      = "hello"

1.5 赋值运算符

一个赋值运算符（assignment operator) 赋一个基于它右边操作数值的值给它左边的操作数。最简单的赋值运算符是等于（=），将右边的操作数值赋给左边的操作数。那么 x = y 就是将 y 的值赋给 x。

含义：将右侧的数据运算之后，赋值给左边。

在变量原基础上，进行右侧的运算，将运算的值再赋值给左边的变量。

= 直接赋值，将等号右侧值直接赋值给左侧的变量

+= 加等于

-= 减等于

*= 乘等于

/= 除等于

%= 取余等于

++ 递加

-- 递减

+=，加等于。相当于在原有数据之上加右侧的值运算后的结果赋值给变量（左侧的变量）

1 var a = 10;
2 a += 5;      //a = a + 5
3 console.log(a);
4
5 var b = 20;
6 b -= 5;      //b = b - 5
7 console.log(b);
8
9 var c = 5;
10 c *= 3;      //c = c * 3
11 console.log(c);

12 var d = 25;
13 d /= 5;      //d = d / 5
14 console.log(d);
15
16 var e = 13;
17 e %= 5;      //e = e % 5
18 console.log(e);