TNotes.javascript

Appearance

0008. 条件语句 - if 结构

0008. 条件语句 - if 结构 ​

1. 🎯 本节内容 ​

  • 掌握 if 语句的使用

2. 🫧 评价 ​

  • 笔记中除了介绍 if 语句的基本用法之外，还涉及到了一些和布尔运算、类型转换相关的知识点，这些也非常重要，详情会在其他笔记中介绍。

3. 📒 条件语句 - if 结构 ​

  • if 结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。
  • 所谓布尔值，指的是 JavaScript 的两个特殊值，true 表示“真”，false 表示“伪”。
javascript
// 简写形式
if (条件表达式) 语句

// 或者
if (条件表达式) {
  // 语句
}

// 这是 if 结构的基本形式。
// 需要注意的是，条件表达式必须放在圆括号中，表示对表达式求值。
// 如果表达式的求值结果为 true，就执行紧跟在后面的语句；
// 如果结果为 false，则跳过紧跟在后面的语句。

4. 💻 demos.1 - if 结构简写形式 ​

js
var x1 = 1, x2 = 2

if (x1 === 2) x1 = x1 + 1
// 表示当 x1 等于 2 时，才会将其值加上 1。
if (x2 === 2) x2 = x2 + 1
// 表示当 x2 等于 2 时，才会将其值加上 1。

console.log(x1) // 1
console.log(x2) // 3

// 上述这种 if 的写法
// 要求条件表达式后面只能有一个语句

5. 💻 demos.2 - if 加大括号 ​

js
var x1 = 1,
  x2 = 2

if (x1 === 2) {
  x1 = x1 + 1
  // 这里还能插入其他语句
}
if (x2 === 2) {
  x2 = x2 + 1
  // 这里还能插入其他语句
}

console.log(x1) // 1
console.log(x2) // 3

// 如果想执行多个语句，必须在 if 的条件判断之后，加上大括号，表示代码块。
// 多个语句合并成一个语句块。

// 为了方便插入语句，通常都会在 if 语句中使用这种大括号的写法。

6. 💻 demos.3 - 区分赋值和比较 ​

js
var x = 1
var y = 2
if ((x = y)) {
  // 这一步是在执行赋值操作，而非比较运算。
  console.log(x) // 2
}

// 上面代码的原意可能是：当 x 等于 y 的时候，才执行相关语句。
// 但是，不小心将严格相等运算符写成赋值表达式，结果变成了将 y 赋值给变量 x，再判断变量 x 的值（等于 2）的布尔值（结果为 true）。
// 这种错误可以正常生成一个布尔值，因而不会报错。

// 一些补充说明：
// 1. if 后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。赋值表达式不具有比较作用。
// 2. 在比较相等的时候，优先使用“严格相等运算符”（===）。至于为什么优先采用“严格相等运算符”（===），而不是“相等运算符”（==），请参考和 “运算符” 相关的笔记。
// 3. 该示例中的 2 转为布尔值为 true，这涉及到隐式类型转换的相关知识点，请参考跟 “数据类型” 相关的笔记。