JS的简单语法

 

表达式和语句

• 表达式

           1+2 表达式的值为3

      add(1,2)函数调用表达式的值为函数的返回值(只有函数有返回值)

      console.log表达式的值为函数本身

      console.log(3)表达式的值为多少?(值为undefined，打印出来的东西是3)

 

• 语句

           var a = 1(是一个语句主要用来改变环境,a是一个环境）

 

• 两者区别：

           表达式─般都有值,语句可能有也可能没有。

      语句一般会改变环境(声明、赋值)。

 

     注意：

          上面两句话并不是绝对的，有时候表达式也可以改变环境，有时候语句也可以取值。

 

大小写敏感

        var a 和var A是不同的。

   object和 Object是不同的。

   function和 Function是不同的。

 

空格与回车

       大部分空格没有实际意义,例如var a        =     1和var a=1没有区别。

   加回车大部分时候也不影响。

 

注意：

     只有一个地方不能加回车,那就是return后面，return后面没有加任何东西，会自动补充一个undefined。这是JS原创之处

 

---

 

标识符

• 规则

              第一个字符,可以是Unicode字母或$或_或中文等等。

         后面的字符，除了上面所说，还可以有数字(数字不能是第一个)

 

        例如：9$ 是没有被捕获的字符，数字后面是不要加字符，可以把字符加在前面，否则是不合法的

                      

 

• 变量名是标识符

          var_=1

          var $ =2

          var___= 6

          var 你好 = 'hi' ...

 

• 注释

                正确的注释(为什么这么做，蕴含的坑)

                       踩坑注解。

                       为什么代码会写得这么奇怪，遇到什么bug(可能有特殊的需求)。

 

区块 block

• 把代码包在一起（代码块 ）

{

  let a = 1

  let b = 2

}

• 常常与if / for / while合用

 

---

 

条件语句

   可以看到if else语句、switch case、问号冒号(三元)表达式、&&短路逻辑(与)、||短路逻辑(或)   的基本用法

 

if else 基本的语法

   

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

 

             注意：

                圆括号不能省，花括号语句一可以省。

                {  }在语句只有一句的时候可以省略，因为if只包裹一句，不建议这样做。

 

• 变态情况

   ①表达式里可以非常变态，如a=1是把1赋值给a，a===1是a等于1(写不规范代码webstorm可以教你写代码)

   

        ②语句1里可以非常变态，如嵌套的if else

a = 2

if( a < 100)

  if( a < 10)

      console.log('a小于10')

//在Chrome的console里运行：a小于10

       

        ③语句2里可以非常变态,如嵌套的if else

a=2

if( a < 100){

}else if{a > 1000}{

  console.log('a大于1000')

}else{

 

 

}

//去掉了if else中else的花括号，变成了else if，代码上是两对if else

  

      ④缩进也可以很变态，如下

a = 1

if(a === 2)

  console.log('a')

  console.log( 'a等于2')

/*最终结果是打印出了a等于2

  实际所见是

  console.log('a')

  console.log( 'a等于2')

如果省略了花括号if只会管到第一句console.log('a')，,实际上是有个隐形的括号括起来的*/

 

最推荐使用的写法

    

    ① 最没有歧义的写法

if（表达式）{

语句

}else if (表达式){

语句

}else {

语句}

 

    ②次推荐使用的与法

function fn(){

  if（表达式){

    return 表达式

  }

  if（表达式){

    return 表达式

  }

  return 表达式

}

//如果有return语句就可以省略else，条件满足就return，后面就不用执行

 

---

 

switch语句(注意break，如果不注意建议少用)  --if else升级版\\

 

• 语法

switch (fruit) {

case "banana" :

...

break;

case "apple":

...

break;

default:

...

}

//fruit是什么就走那条道，如果都不是就走default

 

break

   大部分时候,不能省略break

   少部分时候,可以省略（当需要多个赋值，贯通的时候）break

a = 2

switch(a){

  case 1:

  case 3:

    console.log('单数');

    break;

  case 2:

  case 4:

    console.log('双数');

    break;

}

//case 2:后没有break继续走下面的case 4:直到break

 

---

 

问号冒号（三元）表达式(能用问号冒号（三元）表达式就不用if else)

 

• 语法

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

 

• 例子：

//原版

function max(a,b){

  if(a>b)return a;

  else return b;

}

//a>b就是a，否则就是b

 

//问号冒号表达式

function max(a,b){

return a>b ? a: b

}

//a>b就是a，否则就是b。是不是简洁许多了啊

 

注意：

  经常用于简化if和else只有一个语句的时候

 

---

 

&& 短路逻辑

   &&是,什么和什么的意思。也可以用来代替if else

   A && B && C &&D  

            如果第一个假值,就取第一个值。

            都不是假值取最后一个D，

            大部分时候并不会取true / false

 

• A&&

A\B	真	假
真	B(AB为真取B作为表达式的值)	B(A为真看B ，B为真就是真，B为假就是假)
假	A(A为假直接取A)	A(A为假直接整个都是假)

       短路逻辑：

                在两个都为真的情况下都是B，只要A是假，那值就是A。

                如果前面的为假，就看前面的，如果前面为真就看后面。

 

• 代码示例

if(window.f1){

  console.log( 'f1存在')

}

 

window.f1 && console.log( 'f1存在')

 

 如果能写&&就不写if

        例如console && console.log && console.log( 'hi' )，这句话意思是:如果console存在就看console.log存不存在，

        如果cnsole.log存在，就执行console.log( 'hi' )。好处:IE没有console，第一个就假，后面就不执行。

 

---

|| 短路逻辑

      或或，和上面相反，同理

      A || B || C || D取第一个真值或D，并不会取true / false

• 代码解释：

a = a || 100

 

//如果有a就把a的值赋给a，没有a就给a保底赋值100

 

if(a){

  a = a

}else{

a =100 //保底值

}

 

---

 

while、for循环语句

 

while循环（先判断在执行）

 

• 语法

      while(表达式){语句} 

 

• 判断表达式的真假

       当表达式为真，执行语句，执行完再次判断表达式的真假

       当表达式为假，执行后面的语句/跳出

 

• 其他

      do...while用得不多（先执行一次在判断）

 

• 变态死循环

while(a !== 1){

  console. log(a)

      a = a+ 0.1

}//死循环卡死机

/*

a = 0.1

用a = a+0.1加到9次

得出的结论是0.9999999999999999。浮点数不精确 ，永远不等于1，一直循环

*/

 

var a = 0.1 //初始化

while (a !== 1){ //判断

console.log(a) //循环体，缺循环体无意义

a = a + 0.1 //增长

}

//四个中除了循环体其他三个缺一不可，缺了就死循环，这就是while循环升级后的语法是for循环

 

---

 

for循环

   for循环是while循环的方便写法

 

• 语法

for(语句1;表达式2;语句3){

循环体

}

 

   先执行语句1，然后判断表达式2,

   如果为真,执行循环体,然后执行语句3。

   如果为假,直接退出循环，执行后面的语句。

 

• 变态例子：

for(var i=0; i<5; i++){

  setTimeout(()=>{

    console.log(i)  

  },0)

}

//结果是5个5，

 

注意：

   说明过一会儿(setTimeout)的时间比整个循环结束了的时间还要晚。

        如何解决呢？=》把var改成let，就可以得到你想像的。

 

判断条件不写会死循环、判断条件和语句3没写会一直执行循环体导致死循环。

 

---

 

break 和 continue

   break和continue意思分别是退出离它最近的所有循环和退出当前一次循环

 

• 代码示例：

 

• break：

for(var i=0; i < 10; i++){

  if(i%2===1){

    break

  }

}

//结果:1

 

• continue：

for(var i=0; i < 10; i++){

  if(i%2===1){

    continue

  }else{

    console.log(i)

  }

}

//结果:0 2 4 6 8

 

---

 

lable 语句 (就是代码块，理解。可能面试会问)

         

•  语法： 就是标签加代码块

foo: {

  console.log(1);

  break foo;

  console.log('本行不会输出');

}

  console.log(2);

  

//结果:1 2

 

   foo，是个标签，表示花括号里的代码块，break foo跳出代码块，直接console.log(2)

foo: 1

console.log(2)

//结果:2

  

{

  foo: 1

  console.log(2)

}

//结果:2

 

   这是一个代码块，代码块里第一行是个标签，标签内容是1，第二行是打印2

{

  foo: 1;

}

//有个代码块，里面有个标签叫foo，foo的内容就是1句话是1

 

var a = {

  foo: 1;

}

//有个代码块，a是个label，里面有个标签叫foo，foo的内容里面有个语句是1

 

注意：

     只有一句的情况下：

   Chrome里不打分号返回1，打了分号这里变成了一个对象，Chrome有它自己的想法。。

   Firefox直接返回1，没有对象。