温故而知新（巩固js基础第二篇）温故而知新（巩固js基础第一篇）判断：if与三元在第一篇讲到了各种运算符，这里的三元

该文章仅用于学习以及分享自己的理解

温故而知新（巩固js基础第一篇）

判断：if与三元

在第一篇讲到了各种运算符，这里的三元运算符不同于算术运算上，所以没有写在同一篇。

if else语句

常见的判断语句为if else，if(...) 语句计算括号里的条件表达式，如果计算结果是 true，就会执行对应的代码块。栗子：

let test = true
if(test) {
    alert('进来了！');
}
// 当代码块只有一条语句的时候，那么可以简写成：
if(test) alert('进来了！');

if 语句有时会包含一个可选的 “else” 块。如果判断条件不成立，就会执行它内部的代码。栗子：

当有else就不支持简写
let test = true
if(test) {
    alert('进来了！');
} else {
    alert('进了另外个门');
}

还有时我们需要测试一个条件的几个变体。我们可以通过使用 else if 子句实现。

let test = true
if(test) {
    alert('进来了！');
} else if {
    alert('进了第二扇门');
}else {
    alert('进了第三扇门');
}

以上的代码块都是从上到下，严格按照js的同步进行，先判断if是否为true，如果不是才会进行下一个语句判断，依次往下。当然可以有更多的 else if 块。结尾的 else 是可选的。

类型转换

if (…) 语句会计算圆括号内的表达式，并将计算结果转换为布尔型

数字 0、空字符串 ""、null、undefined 和 NaN 都会被转换成 false。因为它们被称为“假值（falsy）”值。
其他值被转换为 true，所以它们被称为“真值（truthy）”。

三元运算符（条件运算符）‘?’

我们需要根据一个条件去赋值一个变量就会想到使用刚刚才讲到的if else，但又感觉只是赋个值写代码块没必要。所谓的三元运算符让我们可以更简短地达到目的。之所以被称为“三元”是因为该运算符中有三个操作数。实际上它是 JavaScript 中唯一一个有这么多操作数的运算符。如何使用？栗子：

let result = condition ? value1 : value2;
// 计算条件结果，如果结果为真，则返回 `value1`，否则返回 `value2`。

当如果三元运算符用来判断返回boolean的话，可以不需要用到三元运算符。栗子：

let result = age > 18 ? true : false; 
// 与
let result = age > 18
// 是一样的

还可以嵌套多个三元运算符，但只可以返回一个取决于多个条件的值。栗子：

let message = (age < 3) ? '我不到三岁' : (age < 18) 
?'我不到18岁' : (age < 100) 
?'我不到100岁' : '剩下就是我的岁数';

可能很难一下子看出发生了什么。就很影响了可读性。

第一个问号检查 age < 3。
如果为真 — 返回 '我不到三岁'。否则，会继续执行冒号 ":" 后的表达式，检查 age < 18。
如果为真 — 返回 '我不到18岁'。否则，会继续执行下一个冒号 ":" 后的表达式，检查 age < 100。
如果为真 — 返回 '我不到100岁'。否则，会继续执行最后一个冒号 ":" 后面的表达式，返回 '剩下就是我的岁数'。有时候使用三元运算符是为了简便，但多了话就会很复杂，不建议这样使用三元运算符。

tips： 建议每次使用 if 语句都用大括号 {} 来包装代码块，即使只有一条语句。这样可以提高代码可读性。

逻辑运算符

js中有三个常用的逻辑运算符：||（或），&&（与），!（非）。还有新增的非空运算符：??

虽然它们被称为“逻辑”运算符，但这些运算符却可以被应用于任意类型的值，而不仅仅是布尔值。它们的结果也同样可以是任意类型。

|| （或）

一个或运算 || 的链，将返回第一个真值，如果不存在真值，就返回该链的最后一个值。下面栗子将解释这段话。

两个竖线符号表示||“或”运算符：

result = a || b;

用作于判断使用的话，有四种逻辑情况

alert( true || true ); // true 
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false

用于表达式或者变量列表使用的话

let firstName = ""; // 假值
let lastName = ""; // 假值
let nickName = "SuperCoder"; // 真值
alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder

前面变量的值都为假，结果就是 "Anonymous"。

&&（与）

与运算返回第一个假值，如果没有假值就返回最后一个值。上面的规则和或运算很像。区别就是与运算返回第一个假值，而或运算返回第一个真值。

两个 & 符号表示 && 与运算符：

result = a && b;

跟或运算符不一样的是，当值都为真值时才会返回true，这里也举四个栗子跟或运算符做比较：

alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false 
alert( false && false ); // false

!（非）

感叹符号 ! 表示布尔非运算符。

在第一篇的不等于（!==）使用过

逻辑非运算符接受一个参数，并按如下运作：

将操作数转化为布尔类型：true/false。
返回相反的值。有时候我们会看到有两个!!是用来将某个值转化为布尔类型

??（非空运算符）

与（||）或运算符一样,唯一不一样的仅当值为 null 或 undefined 时才当为假值，其余都为真。

在非空运算符基础上还能简写??= 空赋值运算符：

let x = null
let y = 5
alert(x ??= y) // => 5

拆分为：

let x = null
let y = 5
alert(x = (x ?? y)) // => 5

但是出于安全原因，JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级。

let x = 1 && 2 ?? 3; // Syntax error

tips：

优先级 ! > && > ||
?? 运算符的优先级非常低，仅略高于 ? 和 =，因此在表达式中使用它时请考虑添加括号。
如果没有明确添加括号，不能将其与 || 或 && 一起使用。

for和while

循环是一种重复运行同一代码的方法。

`while` 循环

while (condition) {
// 代码 
// 所谓的“循环体”
}

当 condition 为真时，执行循环体的 code。

例如，以下将循环输出当 i < 3 时的 i 值：

let i = 0; 
while (i < 3) { // 依次显示 0、1 和 2 
    alert( i ); 
    i++; 
}

循环体的单次执行叫作 一次迭代。上面示例中的循环进行了三次迭代。

如果上述示例中没有 i++，那么循环（理论上）会永远重复执行下去，称为“死循环”。浏览器提供了阻止这种循环的方法，我们可以通过终止进程，来停掉服务器端的 JavaScript。

当循环体只有一条语句，则可以省略大括号 {…}：

let i = 3; 
while (i) alert(i--);

`for`循环

for 循环更加复杂，但它是最常使用的循环形式。

for 循环看起来就像这样：

for (begin; condition; step) { 
    // ……循环体…… 
}

栗子：

for (let i = 0; i < 3; i++) {
    // 结果为 0、1、2 
    alert(i); 
}

分析 for 循环：

begin	`i = 0`	进入循环时执行一次。
condition	`i < 3`	在每次循环迭代之前检查，如果为 false，停止循环。
body（循环体）	`alert(i)`	条件为真时，重复运行。
step	`i++`	在每次循环体迭代后执行。

for循环算法的工作原理如下：

开始运行 
→ (如果 condition 成立 → 运行 body 然后运行 step) 
→ (如果 condition 成立 → 运行 body 然后运行 step) 
→ (如果 condition 成立 → 运行 body 然后运行 step) 
→ ...

把工作原理使用到栗子上：

// for (let i = 0; i < 3; i++) alert(i) 

// 开始 
let i = 0 
// 如果条件为真，运行下一步 
if (i < 3) { alert(i); i++ } 
// 如果条件为真，运行下一步 
if (i < 3) { alert(i); i++ } 
// 如果条件为真，运行下一步 
if (i < 3) { alert(i); i++ } 
// ……结束，因为现在 
i == 3

省略语句

for条件中需要三个条件，这些如果不需要的话是可以省略掉的

let i = 0; 
// 我们已经声明了 i 并对它进行了赋值 
for (; i < 3; i++) { // 不再需要 "begin" 语句段 
    alert( i ); // 0, 1, 2 
}

省略了begin参数，但 ; 是一定要存在的。我们也可以移除 step 语句段：

let i = 0; 
for (; i < 3;) { 
    alert( i++ ); 
}

这样写法跟while (i < 3) 等价。 for 的两个 ; 必须存在，否则会出现语法错误。

for还有语句：

`break`	强制退出循环
`continue`	`break` 的“轻量版”。它不会停掉整个循环。而是停止当前这一次迭代，并强制启动新一轮循环（如果条件允许的话）。

温故而知新（巩固js基础第二篇）