僕と花

JavaScript基础语法

本文所有的参考引用都来自于JavaScript 的基本语法，以及MDN相关文档

语句

  1. 语句

    “JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。” 语句（statement）一般会改变环境（例如声明、赋值）。

  2. 表达式

    言简意赅地说，表达式（Expression）有值，而语句（Statement）不总有。

    • 例如 1+2=3 表达式的 值 为3
    • add(1,2) 表达式的值为函数的 返回值 （只有函数有返回值）
    • console.log （函数）表达式的值为 console.log 本身
    • console.log(3)表达式的值为 undefined ，因为log函数本身没有设定返回值。

    Tips🎯

    • JavaScript对大小写敏感
    • 不影响断句的情况下，空格键没有实际意义
    • 回车键也是没有实际意义的，但return后面不可以加回车

标识符

“标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感，所以a和A是两个不同的标识符。”

Tips🎯

  • 首位字符可以是Unicode字符，$，_或者中文，但不能以数字开头。

  • JavaScript 有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

条件语句

  1. if else

    1. 语法

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

      if (判断条件) {
   //满足条件时，执行的语句
}else {
   //不满足条件时，执行的语句
}

//多个if else语句是可以嵌套的

if(表达式1){
   //语句1
}else if(表达式2){
   //语句2
}else if(表达式3){
   //语句3
}else{
   //语句4
}
....

      Tips🎯

      • { }在语句只有一句的时候可以省略，但不建议这么做
      • 我们需要使用最没有歧义的写法

  2. switch

    当需要多个if else嵌套结构的时候，可以使用switch结构。

    1. 语法

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

      var x = 1;

switch(x){
   case 1:
       console.log('x等于1');
       break;
   case 2:
       console.log('x等于2');
       break;
   default:
       console.log('x等于其他值');
}

      Tips🎯

      • 在switch结构中，大部分情况下，每个case代码块中的break是无法省略的。
      • 如果不写break会进行跨case判断，即不跳出switch结构，因此有些时候也是可以利用break达成目标结果。

  3. 其他「变体」

    1. ?:

      江湖俗名人称：问号冒号表达式🥳

      1

      表达式1?表达式2:表达式3

      是一种最简单的if else结构写法，用来简化if(){ } 内只有一句语句，else{ }内也只有一句语句的情况。

    2. &&

      短路与运算

      1

      表达式A&&表达式B&&表达式C&&表达式D

      最终输出结果取第一个为假值的表达式或者表达式D，并不会取判断过程中的true/false作为输出。

    3. ||

      短路或运算

      1

      表达式A||表达式B||表达式C||表达式D

      最终输出结果取第一个为真值的表达式或者表达式D，并不会取判断过程中的true/false作为输出。

循环语句

  1. while

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

    1. 语法

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

      while(条件表达式){
    循环体
}

/*do while循环与while循环类似
唯一的区别就是会先执行一次循环体语句
再判断循环条件*/

do{
    循环体
}while(条件表达式);

      Tips🎯

      • while循环的执行思路是：
        • 判断表达式真假
        • 当表达式为真，那么执行循环体内容，执行完成后会再次进入while循环判断表达式真假。
        • 若表达式为假，就会直接跳出当前while循环，执行后面的语句。

  2. for

    “for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。” for循环可以看作while循环的方便写法，是一颗语法🍬。

    1. 语法

      1
2
3

      for(初始化表达式;条件表达式;更新表达式){
   循环体
}

      Tips🎯

      • for循环的执行思路是：
        • 首先执行初始化表达式，该表达式也可以声明变量。
        • 进入条件表达式进行判断，若为真则执行循环体，若为假则for循环终止跳出。
        • 完成循环体执行后，若有更新表达式则执行更新，再次进入条件表达式进行判断直至跳出。
      • for语句的三个部分for ( [initialExpression] ; [condition] ; [incrementExpression] )，可以省略任何一个，也可以全部省略。但是不巧妙的省略可能会巧妙的变成死循环😓

  3. break & continue

    1. break

      break语句用于跳出整个代码块或循环。

      1
2
3
4
5
6
7
8

      var i = 0;

while(i < 100){
   console.log('i 当前为：' + i);
   i++;
   if (i === 10) break;
}
//上述代码只会执行10次循环，一旦i等于10，就会跳出循环。

    2. continue

      continue语句用于立即终止本轮循环，开始下一轮新循环。

      1
2
3
4
5
6
7
8

      var i = 0;

while (i < 100){
    i++;
    if (i % 2 === 0) continue;
    console.log('i 当前为：' + i);
}
//上述代码只有在i为奇数时，才会输出i的值。如果i为偶数，则直接进入下一轮循环。

    Tips🎯

    • 如果存在多重循环，不带参数的break语句和continue语句都只针对最内层循环。

label标签

“JavaScript 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置。” 标签可以和break或continue语句一起使用，跳出指定的循环，但使用label标签的循环或语句块较为罕见，通常情况下都不会使用这种基于标签的循环跳转。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

foo:1
//声明标签foo，标签foo的内容为1

{
    foo:1
}
//代码块中声明了一个标签foo，标签foo的内容为1

var a = {
    foo:1
}

//声明了一个对象a，a的内容为{foo:1}