1.表达式和语句

  • JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
  • 分号隔开算是两个语句

  • 逗号表示这句话没完

    1.1.表达式

  • 1 + 2 表达式的值为 3

  • add(1,2) 表达式的值为函数的返回值
  • console.log 表达式的值为函数本身
  • console.log(3) 表达式的值为 undefined，log打印出来的东西为3,如下图：

image.png

  • 区分：值≠返回值

    1.2.语句

    下面就是一个语句示例

    1. var a = 1 + 3;

    这条语句先用 var 命令，声明了变量 a，然后将 1 + 3 的运算结果赋值给变量a。

    1.3.两者区别

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

  • 语句一般会改变环境（声明、赋值）

  • 上面两句并不绝对

    2.JS 大小写敏感

  • var a 与 var A 不同

  • object 与 Object 不同
  • function 和 Function 不同

  • window 一般只用小写

    3.空格

  • 大部分空格没有实际意义，影响断句不行，如 vara=1 不等同于var a=1

  • 大部分回车不影响
  • 只有一个地方不能加回车，那就是 return 后面，如下图，两个 fn() 返回值不一样

image.png

  • return 后面有回车，浏览器会默认为 return 后面没有东西，然后自动在 return 后面加一个 undefined 所以返回值为 undefined

    4.标识符

    最常见的标识符就是变量名，以及后面要提到的函数名

    4.1.规则

  • 第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（$）和下划线（_）。

  • 第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字
  • 最好不要用中文拼音，要不就用英文，要不就用中文

    4.2.举例一些符合规范的标识符

    1. arg0
    2. _tmp
    3. $elem
    4. π
    5. 中文

    4.3.举例一些不符合规范的标识符

    1. 1a  // 第一个字符不能是数字
    2. 23  // 同上
    3. ***  // 标识符不能包含星号
    4. a+b  // 标识符不能包含加号
    5. -d  // 标识符不能包含减号或连词线

    5.注释

    两种 ```javascript // 这是单行注释

/ 这是 多行 注释 /

  1. <a name="z3gmy"></a>
  2. ### 5.1.不好的注释
  4. - [x] 把代码翻译成中文（应该是写重要的注释）
  5. - [x] 过时的注释
  6. - [x] 发泄不满的注释
  7. <a name="PExj8"></a>
  8. ### 5.2.好的注释--告诉别人为什么要这么写
  10. - [x] 踩坑注释
  11. - [x] 说明为什么代码会写的这么奇怪，遇到什么 bug
  12. <a name="JR2BM"></a>
  13. ## 6.区块 block （一般跟 if 联合使用）
  14. 定义：JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）。
  15. ```javascript
  16. {
  17. let a = 1
  18. let a = 2
  19. }

常与 if/for/while 合用

7.if 语句（if…else）

7.1.语法

  1. if (表达式){语句1}else{语句2}
  • 表达式的布尔值，只有真（true）或假（false）

  • {} 在语句只有一句的时候可以省略，但不建议这样做，容易产生一些歧义

    1. if (m === 3) {
    2. // 满足条件时，执行的语句
    3. } else {
    4. // 不满足条件时，执行的语句
    5. }

    7.2.变态情况

    7.2.1.表达式的变态之处

  • 如 a = 1 （一个 ‘=’ 的意思是 a 赋值为 1）

  • 因此产生了下面的结果，a 的值为 1，而不是 else 里的

image.png

  • 此时应该为 a === 1（三个 ‘=’ 的意思才是等于）

image.png

7.2.2.语句1和语句2的变态之处（嵌套的 if else）

  • 语句1里面加 if…else (两个 if 连着)

    1. if( a < 100){
    2.   if(a < 10){}
    3. }
    4. else{
    5.    console.log('a小于10')
    6.   }

    省略花括号就是两个 if 连着

    1. if( a < 100)
    2.   if(a < 10)
    3.      console.log('a小于10')

  • 语句2里面加 if…else (就是 else if 的由来)

else 代码块总是与前面的离自己最近的那个 if 语句配对

  1. if(a < 100){
  2. }else if(a >10000){
  3.     console.log('a大于10000')
  4. }else{
  5. }

7.2.3.缩进的变态情况

如下：

  1. a = 1
  2. if(a === 2)
  3.   console.log('a')
  4.   console.log('a等于2')

结果是 a等于2 image.png
这里的 if 只会管到第一个语句，console.log('a等于2') 是在 if 语句外面的，所以打出来的是 a等于2

*7.3.if…else 推荐使用的写法（使用最没有歧义的写法）

  • [x] 不要省略 {}

    7.3.1.最推荐使用的写法

    1. if(表达式）{
    2.   语句
    3. }else if(表达式){
    4.   语句
    5. }else{
    6.   语句
    7. }

    7.3.2.次推荐使用的写法

    1. function fn(){
    2.   if(表达式){
    3.   return 表达式
    4.   }
    5.   if(表达式){
    6.   return 表达式
    7.   }
    8. return 表达式
    9. }

    8.switch 语句（if…else… 升级版）

  • 多个if…else连在一起使用的时候，可以转为使用更方便的switch结构

  • 尽量少使用，容易出错，但需要了解，不得不用的时候再用这个（少数情况用 switch 比较好）

    语法

    1. switch (fruit) {
    2. case "banana":
    3.   // ...
    4.   break;
    5. case "apple":
    6.   // ...
    7.   break;
    8. default:
    9.   // ...
    10. }

  • break 一定不能省略，不然这个 case 会继续往下执行，不会停止

  • default 部分是永远不会执行到的

简单例子

  1. var x = 1;
  2. switch (x) {
  3.   case 1:
  4.     console.log('x 等于1');
  5.     break;
  6.   case 2:
  7.     console.log('x 等于2');
  8.     break;
  9.   default:
  10.     console.log('x 等于其他值');
  11. }

打出来的为： x 等于1

9.问号冒号表达式（三元运算符）

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

上面代码中，“表达式”1 为true，则返回“表达式2”的值，否则返回“表达式3”的值

  1. function max(a,b){
  2.     if(a>b)return a;
  3.     else return b;
  4. }

上面代码用问号冒号表达式

  1. function max(a,b){
  2.     return a>b ? a : b
  3. }

也可参考这个链接看看

10.&& 短路逻辑

  • 俗称 and and

    1. A && B && C && D
    2. //取第一个假值或D，并不会取true/false

    image.png
    上图两段代码上面的等价于下面的

  • 取值情况（前面为真，就看后面的，前面为假，就不用看后面的，直接判定为假值）

image.png

  • 最常用的

image.png

11.||短路逻辑

  1. A || B || C || D
  2. // 取第一个真值或D

示例：下面的函数的意思就是上面的 || 的意思
image.png

12.while 循环（当…时）

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

  • while 循环用的较少

    12.1.正常循环

    语法：（循环条件—即下面代码中的表达式总是为真）
    1. while (表达式) {
    2. 语句;
    3. }
    举例 ```javascript var i = 0;

while (i < 100) { console.log(‘i 当前为：’ + i); i = i + 1; }

  1. 上面的代码将循环100次，直到i等于100为止
  2. <a name="W1p2U"></a>
  3. ### 12.2.无限循环（死循环）
  5. - [x] 示例1：
  6. ```javascript
  7. var a = 0.1;
  9. while(a !== 1){
  10.   console.log(a);
  11.   a = a + 0.1;
  12. }

上面代码看的觉得是可以使得 a=1 的，实际上是个死循环，运行之后会出现下面的情况 （因为浮点数的不精确）
image.png

  • [x] 示例2：（因为循环条件总是为真）

    1. while (true) {
    2. console.log('Hello, world');
    3. }

    12.3.do…while 循环

    do…while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件
    语法：

    1. do {
    2. 语句
    3. } while (表达式);

    13.for 循环

    定义：for 语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件
    语法：

    1. for (语句1;表达式2;语句3){
    2. 循环体
    3. }

  • 先执行语句1

  • 然后判断表达式2
  • 如果为真，执行循环体，然后再执行语句3（这个步骤是连着的，每次执行完循环体，都会执行一次语句3）
  • 如果为假，直接退出循环，执行后面的语句

  • [x] 示例1：

    1. var x = 3;
    2. for (var i = 0; i < x; i++) {
    3. console.log(i);
    4. }
    5. //即每次循环结束后，i增大1
    6. // 0
    7. // 1
    8. // 2

    此循环执行完 i === 3

  • [x] 示例2：

    1. for(var i = 0;i < 5;i++){
    2. setTimeout(() =>{
    3.   console.log(i + '随机数' + Math.random())
    4. },0)
    5. }

    setTimeout 表示过一会儿执行，但是 for 语句不会，所以 setTimeout 是在 for 执行完毕再执行，for 语句执行完毕时 i=5，所以输出下图的内容
    image.png

    14.break 和 continue 语句

    定义：break 语句和 continue 语句都具有跳转作用，可以让代码不按既有的顺序执行

  • break 语句用于跳出代码块或循环

  • continue 语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

  • [x] 示例：

    1. for(var i=0;i<10;i++){
    2. if(i % 2 === 1){
    3.   continue
    4. }else{console.log(i)}
    5. }

  • i % 2 === 1 表示 i 除以 2 的余数为 1

  • i++ 表示 i=i+1（++ 表示自增运算符）

结果如下：
image.png

15.标签（label）

用的很少，面试可能会问
标签通常与 break 语句和 continue 语句配合使用，跳出特定的循环
语法：

  1. label:
  2.   语句
  • 示例：
    1. foo:{
    2. console.log(1);
    3. break foo;
    4. console.log('本行不会输出');
    5. }
    6. console.log(2);
    7. //1
    8. //2
    上面代码执行到break foo，就会跳出区块
    1. {
    2. foo: 1;
    3. }
    上面代码表示 foo 是一个标签，语句是一个 1

资料来源：
饥人谷
网道 JavaScript 教程