前端升级打怪路：JS语法（十一）JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，

JS版本

建议使用：ES6,
- 优点：大部分浏览器支持,并兼容以前的旧网站，够稳定
- 缺点：因为ES不能删除以前的特性,

JS语法

表达式与语句

JavaScript 程序的执行单位为行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。

语句：了完成某种任务而进行的操作，用来改变环境的，比如下面就是一行赋值语句。
```
var a = 1
```
- 语句的值为：undefined
- 条语句先用var命令，声明了变量a，然后将值1给变量给a。
表达式：一个为了得到返回值的计算式，比如下面就是一行中就有表达式
```
var a = 1 + 2  
```
- 其中：1+2为表达式，他们的值为3
- add(1,2)表达式的值为函数的返回值，只有函数才有 返回值
- console.log表达式的值为函数本身， console.log就是函数
- console.log(3)表达式的值为多少?
- console.log(3)的返回值为undefined
- 注意：要区分值，返回值，打印的东西
- 注意：如果只是声明变量而没有赋值，则该变量的值是undefined。undefined是一个特殊的值，表示“无定义”
语句与表达式的区别
- 表达式一般都有值,语句可能有也可能没有
- 语句一般会改变环境(声明、赋值)
- 上面两句话并不是绝对的

JS语法注意要点

大小非常敏感，不可写错
- Var a和var A 是不同的
- object和 Object是不同的
- function和 Function是不同的
大部分空格，回车没有实际意义
- Var a = 1 和 var a=1 没有区别，加回车大部分时候也不影响
- 注意：面试常问：只有一个地方不能加回车,那就是return后面
```
funtion fn(){   |       funtion fn(){          
    return 3    |       return   undefind
  }             |           3
                |           } 
```
- 上面这两者是不同的，return后面加回车，JS会自动帮你补上undefind，这就是JS变态之处

标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名，以及后面要提到的函数名。
规则
- 第一个字符,可以是Unicode字母或$或_或中文
  - 例如：var a = 1，var Φ = 1,还有a，Φ ，等特殊符号都属于Unicode字母
- 第一个字符后面的字符,除了上面所说的Unicode字母或$或_或中文,还可以有数字
- 注意：$中要写在前那面，数字不可以为第一位，会报错
- Uncaught SyntaxError: Invalid or unexpected token语法错误不合法的意思

注释的分类

* 不可以的行为
  * 把代码翻译成中文（中文只有重要注释的时候才用，普通注释用英文即可） 
  * 过时的注释（代码修改后不及时修改注释） 
  * 发泄不满的注释（重视他人的成果，不可以随意修改注释） 
* 好的注释 
  * 踩坑注解（ 遇到问题时代码为什么这样写，把自己的思路写出来） 
  * 为什么代码会写得这么奇怪,遇到什么bug（特殊需求写好）

区块

JavaScript 使用大括号，将多个相关的语句组合在一起，称为“区块”（block）

{
  var a = 9;
}

区块往往用来构成其他更复杂的语法结构，比如if、for、while、function等合用。

if 语句

意思：如果...那么...
if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。

语法

if ( 表达式1 ){ 语句1 }  else  { 语句2 }

意思是：如果表达式1成立，就执行语句1。如果表达式1不成立，就执行语句2.
面试中常常下套：变态情况，例如：

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

请问左边的返回值是？右边的返回值是？

答：记住区分'=',他不是等于的意思，是赋值的意思，右边赋值给左边，不要混淆表达式（=）、严格相等运算符（===）,他的本意是a等于2，使用了赋值符号，导致了2赋值于a，偏离了本意。
常常下套：变态情况
- 表达式里可以非常变态,如a=1
  - 如上边的例题
- 语句1里可以非常变态,如嵌套的if else
```
 a = 1
 if (a===2)
 console.log('a')  //  console.log('a')，console.log('a等于2')  
 console.log('a等于2')
```
  - 若是省略括号，if只管第一行，就是紧跟着他的第一句语句
  - 但是若用逗号相连就表示，他们是一句话，还是属于第一行
- 语句2里可以非常变态,如嵌套的if else
- 缩进也可以很变态

平时使用中最推荐使用的写法

if ( 表达式 ) { 
   语句   // 满足条件时，执行的语句
}  else  if ( 表达式 ) { 
  语句   // 不满足条件时，执行的语句
}  else  {  
语句    // 再不满足条件时，执行的语句
}

次推荐使用的写法(函数经常用到)
- 意义为如果...满足,就return后面就什么都不会执行...

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

`switch`语句（`if..else..`升级版）

     switch  ( fruit 1 )         |  switch (x) {
     case "banana 2":            |  case 1:  console.log('x 等于1')   break ;
     //...  （*由fruit 1来选，    ｜
     如果是banana 2就走//....*）   |   case 2:console.log('x 等于2');break ;
     break ;                     |  
     case "apple 3":             |  default:console.log('x 等于其他值');}
     //...（*由fruit 1来选，     ｜
     如果是apple 3就走//....*）   | 
     break;                     |                   
     default :                  |
     //...（*由fruit 1来选，上面都没有就走最后一句*） |

左边是switch的用法结构，后面是他的例句

问号冒号表达式

(条件) ? 表达式2 : 表达式3 例句如下

```
 function max (a,b) { return a > b ? a : b  }
  //如果a > b，那么我就return a ；否则 return b//
                 相等于
 function max (a,b){ if( a > b ) return a ; else return b }
 ```

&&短路逻辑（...与...）

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

window. f1 && consloe.log('打印')
          相等于
if(window.f1){
  console.log('f1存在')}

window.f1为真，就执行console.log

console&&console.log&&console.log('ha')

查看conso是否为真，是真的就看console.log是否为真，为真就执行ha
使用方式查看第一个是否为真，为真就看第二个是不是为真，为真就看第三个是否为真，然后执行第四个
注意其中只要有一个为假，就立刻停止执行，退出

||短路逻辑(...或...)

A||B||C||D
第一个真值或 D

并不会取true/ false

  if ( a ) { 
  a = a } else { 
  a = 100 } 
  相等于
 a = a || 100

如果a存在就等于a，a不存在就等于100
a为真，就执行a；a为假，就执行100
相当于一个为真，就执行这个，一个为假就执行另一个。

Whie循环（当...时)（用来循环操作）

      while (条件) {
      语句;
      }
      或者
       while (条件) 语句;

执行顺序
- 判断条件的的真假
- 当条件为真,执行语句,执行完再判断表达式的真假
- 当条件为假,立刻退出当前语句，来执行后面的语句
类似，上面例题，先是判断a是否小于3，然后打印出来，然后a加上1，再次判断a是否小于3，以此类推，当条件不满足时退出。
变态情况：

while (true){ } // 会导致bug，死循环
或者
let a = 1
while（a ！ == 1）{
    console.log(a);
    a = a + 0.1
 } // 这个也会导致死循环，因为浮点数的原因,加着加着就变成浮点数了，不在精确，无穷无尽

for循环（while的升级简化）

let a = 1   // => 初始化
while（a ！ == 1）{   // => 判断 
    console.log(a);   // =>  循环体
    a = a + 0.1      // =>  增长
 }

在while中（初始化，判断，循环体，增长）每一个都要有，缺一个就会导致死循环，故而要进行升级（for循环）
for语句是循环命令的另一种形式，可以指定循环的起点、终点和终止条件。

for语法

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

执行顺序
- 先执行语句1
- 然后判断表达式2
- 如果为真,执行循环体,然后执行语句3
- 如果为假,直接退出循环,执行后面的语句
for语句后面的括号里面。
- 语句1：确定循环变量的初始值，只在循环开始时执行一次。
- 表达式2：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
- 语句3：每轮循环的最后一个操作，通常用来递增循环变量。
面试:变态题目,注意var和let的不同
第一题
- 请问:在i打印完后,i的值是多少?
- 答 : i的值为5
  1. 初始化i赋值与0
  2. 判断i小于5
  3. 打印i,i为0
  4. i++后显示i为1
  5. 判读i小于5
  6. 打印i,i为1
  7. 以此类推
  8. i打印为4时
  9. i++后显示i为5
  10. 判断i,不符合条件,退出结束循环
  11. 故而结束后,i的值为5
第二题
请问:在i打印完后,i的为什么是5?显示了5次?
seTimeout的意思是: 等一会在执行
答:seTimeout在循环只每次触发就会生成一个"计时钟",然后就停了,但是外面的循环还在继续,就会不停的触发生成一个"计时钟",外面的循环结束时,一共触发了五次,一共生成了5个"计时钟".
外面的循环结束时,i的值为5,此次把i的值扔进5个计时钟里,运行计时钟,就显示了5个5.
为什么let和var,运行结果不一样?
- 资料引用: 看饥人谷方方老师我用了两个月的时间才理解 let 理解

break和 continue

break退出所有循环
- break触发时就立刻退出当前所以循环,立刻停止
- 但是break只能停止里自己最近的一层循环,要注意清楚
continue退出当前一次循环
- i%2 === 1意思是:i除以2的余数等于1
- continue就是跳过的意思,被触发时就跳过

label语句(面试会考)

面试问题:这个东西是对象吗?
```
{
 a : 1  或  foo : 1
 }
```
- 这个不是一个对象,这是一个代码块,foo或a是一个标签,这个标签就是1
- 面试时可以回答: foo或a是一个label,他的语句就是1

label 语法

foo: {
console. log(1); 
break foo, 
 console.log(本行不会输出");}
console. log (2)

资料引用：
饥人谷方方老师
 本文参考了饥人谷内部课程

前端升级打怪路：JS语法（十一）

JS版本

JS语法

表达式与语句

JS语法注意要点

标识符

注释的分类

区块

if 语句

语法

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

问号冒号表达式

&&短路逻辑 （...与...）

||短路逻辑(...或...)

Whie循环 （当...时)（用来循环操作）

for循环 （while的升级简化）

break和 continue

label语句(面试会考)

`switch`语句（`if..else..`升级版）

&&短路逻辑（...与...）

Whie循环（当...时)（用来循环操作）

for循环（while的升级简化）