11.2 - JavaScript 基本语法

代码和语句

代码

• 代码：代码是一组特定的指令，用来指示计算机要执行哪些任务。

• 语法：指令的格式和组合规则。

  语句

• 语句描述了一个行为、动作，也可以理解为一个特点的任务。

• 语句一般以分号结尾。

  a = b * 2;
  // 这条语句描述了一个行为：计算机获取名为 b的变量的值，将这个值乘以2，再将结果保存在名为a的变量中。

  程序

• 程序是多个语句的有序排列，描述了程序要执行的所有步骤。

表达式与语句

表达式

• 表达式：可以把它当成一个值，被运算符连接的就是表达式。 eg ：a+b

• 运算符：是个符号，可以连接表达式的。（+ - * / = , () !）

  1+2        //值为3
  add(1,2)    //值为函数add()的返回值 （只有函数才有返回值）
  console.log        //值为函数本身
  console.log(3)    //值为undefined，“3”为返回值

  语句

• 语句是一整段的功能，加分号；的是语句，大部分时候加不加分号都是一样的。

  • var a = 1 是一个语句

• 特例：[]数组 后面必须加分号，不然容易报错。

  表达式和语句的区别：

• 表达式一般都有值，语句可能有也可能没有

• 语句一般会改变环境（声明、赋值）
• 上面两句话并不是绝对的

JavaScript 大小写敏感

• var a 不同于 var A
• object 不同于 Object
• function 不同于 Function

空格

• 大部分空格没有实际意义
• 加【回车】大部分时候也不影响

• 只有 return后面不能加【回车】，因为 return 后面没有东西时，JS 会自动在 return 后面补一个 undefined，那意思就变了。

  示例：
  function fn(){
  return 3
  }
  undefined
  fn()
  3
  function fn(){
  return 
  3
  }
  undefined
  fn()
  undefined

  标识符

  规则

• 第一个字符，可以是 Unicode 字母或 $ 或 _ 或 中文

• 后面的字符，除了上面所说，还可以是数字

  变量名是标识符

  var $ = 1
  var _ = 2
  var ____ = 3
  var 你好 = "Hi"

  注释

  语法

  //    双斜杠只能注释一行
  /* */        这是多行注释，中间可以有任何东西

  注释的几条规则

• 没有注释的代码不是最优的；

• 过多注释可能是拙劣代码的征兆；
• 注释应该解释为什么，而非是什么；

• 如果编写的代码容易令人迷惑，注释可以解释一下实现原理。

  注释的分类

  👎不好的注释

• 把代码翻译成中文

• 过时的注释

• 发泄不满的注释

  👍好的注释

• 踩坑注释

• 为什么代码会写的这么奇怪
• 遇到的 bug

条件语句

if 语句

如果…那么… if 结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。

• {}花括号在语句中只有一句的时候可以省略，但不建议，因为一旦省略可能会有歧义。
• 程序员戒律：使用最没有歧义的写法。

最推荐使用的写法：

/* 语法 */
if (表达式) {
  语句1
} else if (表达式) {
  语句2
} else {
  语句3
}

次推荐的写法：

function fn() {
    if (表达式) {
      return 表达式
  }
  if (表达式) {
      return 表达式
  }
  return 表达式 
}

switch 语句

多个 if...else 连在一起使用的时候，可以转为使用更方便的 switch 结构。用得较少

/* 语法 */
switch (fruit) {
  case "banana":
    //...  执行一些语句
    break;
  case "apple":
    //...
    break;
  default:
    //...
}

关于 **break** :

• 大部分时候，省略 break 就完了

• 少部分时候，可以利用 break

  问号冒号表达式（三元运算符 ?:）

• 问号冒号表达式经常用于简化那种 if 里只有一句语句，else 也只有一句语句的时候。还有用于求一个数字的绝对值时比较多。

  /* 语法 */
  表达式1 ？ 表达式2 ：表达式3

  ```javascript function max (a,b) { if (a > b) return a ; else return b; }

/ 用问号冒号表达式简写 / function max (a,b) { return a>b ? a:b }

/ 求一个数字的绝对值时用问号冒号表达式比较多 / function abs (n) { return n>0 ? n:-n ; }

<a name="K56MT"></a>
#### 
<a name="UQUs6"></a>
### 逻辑运算符 `与 &&`，` 或 ||`， `非 !`
> 常在条件句或循环中进行逻辑判断
> [逻辑运算符 “&&” 和 “||” 短路原则的应用](https://knightyun.github.io/2018/06/01/js-logic-compute)
<a name="fiOYm"></a>
#### && 短路逻辑
- **语法**
```javascript
A && B && C && D
/* 会取第一个假值，若A、B、C都是真值则取D */
/* 不会取 true/false */

• && 的特点：同真为真，一假为假
  • 两边条件都为true时，结果才为true；
  • 如果有一个为false，结果就为false；
  • 当第一个条件为false时，就不再判断后面的条件

    注意：

    • 当数值参与逻辑与运算时，结果为true，那么会返回的会是第二个为真的值；
    • 如果结果为false，返回的会是第一个为假的值。

示意图：

• 最常见写法：

  console && console.log && console.log("hi")
  /* 如果 console 存在，就看 console.log 存不存在，如果 console.log 存在，就执行 console.log（‘hi’） */

  • 为什么写这句话？
  • 因为 IE 浏览器没有 console ，所以 IE 第一句为假，后面就不执行了，短路了。

    /* if 语句 */
    if(window.f1){
    console.log('f1存在')
    }
    /* 会写 && 的前端程序员基本都不会采用上面的 if 语句  */
    window.f1 && console.log('f1存在')

|| 短路逻辑

• 语法

  A || B || C || D
  /* 会取第一个真值，若A、B、C都是假值则取D */
  /* 不会取 true/false */

• || 的特点：一真为真，同假为假

  • 只要其中一个条件为 true，结果就为 true，后面的条件不再执行；
  • 当两个条件都为 false 时，结果才为 false ；

    注意： 当数值参与逻辑或运算时，结果为true，会返回第一个为真的值； 如果结果为false，会返回第二个为假的值；

• 例子1

  A || B
  /* 等价于 */
  if (!a) {
    b
  } else {}

• 例子2

  a = a || 100
  /* 等价于 */
  if (a) {
  a = a
  } else {
    a = 100    //保底值
  }

  ！非

• 当条件为 false 时，结果为 true；反之亦然。

总结

条件语句

• if...else... 最常用，但很多时候不用它，尤其是代码简短的时候。
• switch 虽然结构简单，但如果少了 break 就容易出 bug 。
  • 谨记：不要少写 break。
• A ? B : C 以下都是常用写法
• A && B
• fn && fn()
• A || B
• A = A || B

循环语句

while 循环

While 语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (表达式) {
  语句
}

• 判断表达式的真假
• 当表达式为真，执行语句，执行完再判断表达式的真假；
• 当表达式为假，执行后面的语句。

例子：

var i = 0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}
/* 上面的代码将循环100次，直到i等于100为止。 */

for 循环

for 语句可以指定循环的起点、终点和终止条件。

for (初始化表达式1; 表达式2; 递增表达式3) {
  循环体
}

• 执行语句初始化表达式 1
• 判断表达式2 真假
• 若为真：执行循环体 + 递增表达式3
• 若为假：退出循环

例子：

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}
// 0
// 1
// 2

所有 for 循环，都可以改写成 while 循环。上面的例子改为 while 循环，代码如下。

var x = 3;
var i = 0;
while (i < x) {
  console.log(i);
  i++;
}

break 语句和 continue 语句

break 语句

• 用于跳出代码块或循环。
• 跳出离它最近的 for 循环或 while 循环

  for (var i = 0; i < 5; i++) {
  console.log(i);
  if (i === 3)
    break;
  }
  // 0
  // 1
  // 2
  // 3

  上面代码执行到 i 等于3，就会跳出循环。

continue 语句

• 用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。 ```javascript var i = 0;

while (i < 100){ i++; if (i % 2 === 0) continue; console.log(‘i 当前为：’ + i); }

上面代码只有在 `i` 为奇数时，才会输出 `i` 的值。如果 `i` 为偶数，则直接进入下一轮循环。
> 如果存在多重循环，不带参数的 `break` 语句和 `continue` 语句都只针对最内层循环。
<a name="oEaaM"></a>
### 标签 label 
- 语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签的格式如下。
```javascript
label:    //标签可以是任意的标识符，但不能是保留字
  语句    //语句部分可以是任意语句。

/* 语法 */
foo: {
    console.log(1);
    break foo;
    console.log('本行不会输出');
}
console.log(2);
/* 执行结果是输出数字1和2 */

标签通常与 break 语句和 continue 语句配合使用，跳出特定的循环。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

上面代码为一个双重循环区块，break 命令后面加上了 top 标签（注意，top 不用加引号）满足条件时，直接跳出双层循环。
如果 break 语句后面不使用标签，则只能跳出内层循环，进入下一次的外层循环。

部分资料来源：饥人谷 - 方方老师