JS语法

64 阅读5分钟

JS版本:ES6是最低要求

表达式与语句

  • 表达式:
  1. 1+2表达式的为3
  2. add(1,2)表达式的值为函数的返回值(只有函数有返回值)
  3. console.log表达式的值为函数本身
  4. console.log(3)表达式的值为多少? 答案是:undefined (ps: 用chrome试一下,会得出一个3和undefined,3是log(3)打印出来的记录,undefined才是值)
  • 语句 var a = 1 是一个语句
  • 二者的区别:
  1. 表达式一般都有值,语句可能有也可能没有。
  2. 语句一般会改变环境(声明、赋值) 上面两句话并不是绝对的,都只是可能,或者大部分情况下

大小写敏感

不要写错!

  • var a 和 var A是不同的
  • object 和 Object是不同的
  • function 和 Function是不同的

空格

大部分空格都没有实际意义

var a=1 和 var a = 1没有区别

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

只有一个地方不能加回车,那就是return后面

如果加了回车,那它就会自动补充一个undefined

比如:

function fn(){

  return   /*(undefined)此处会多出一个隐藏的undefined*/
    3
}

然后fn()就会提示undefined,正常情况下是返回一个3

标识符

  • 规则 第一个字符可以是Unicode字符(比如各种图形▲▬●、希腊字母等) 或 字母$下划线_中文

后面的字符,除了上面说的,还可以有数字,比如$1

但是注意,第一个字符不能是数字

变量名是标识符

var_ = 1

var $ = 2

var ___ = 6  //这样写会被人打死,尽量不要用多个下划线命名

var 你好 = 'hi'

错误写法: var 9$

会报错:

Uncaught(未捕获) Syntax(语法)Error : Invalid(不合法的;无效的) or Unexpected token(字符串)

区块block

  • 把代码包在一起
{
  let a=1
  let b=2
}
  • 常常与 if / for / while联用

if语句

如果....那么...

  • if语句语法
  1. if( 表达式 ){ 语句1 }else{ 语句2 }
  2. { }在语句只有一句的时候可以省略,但不建议这样做
  • 变态情况
  1. 表达式里可以非常变态

如:

a = 1,意思是a被赋值为1

a===1意为a等于1

  1. 语句1里可以非常变态

比如嵌套的if:

if(a===1){
  if(a>9){
   }
}
if(a<100)
if(a<10)
console.log('a小于10')

上面这样写也可以,因为只有一句话的时候{ }可以省略

  1. 语句2里可以非常变态,如嵌套的if else 例如:
if(a<100){
   }else {if(a>10000){
    console.log('a大于10000')
   } else{
   }
}

第一个else后面的{ }可省略

if(a<100){
   }else if(a>10000){
    console.log('a大于10000')
   } else{
}

这其实是两个if else组合

  1. 缩进也可以很变态,如下面试题常下套
a=1
if(a===2)                      //{
  console.log('a')             //}
  console.log('a等于2')

只会输出a等于2,因为有{ }把他们隔开了,只是{ }可以省略,没有写出来而已

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

用逗号隔开,那结果就是undefined

使用最没有歧义的写法

例如:

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

次推荐使用的写法:

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

switch语句

  • 语句
switch(fruit) {
  case "banana":
      //....
  break;
  case "apple":
      //....
  break;
  default:
      //....
 }
  • break 大部分时候,省略break就完了 少部分时候,可以利用break

问号冒号表达式

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

例如,用xxx ? xxx : xxx代替if、else

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

改成

function max(a,b) {
   return  a>b ? a:b
}

也可以用来取绝对值(abs)

function abs(n) {
return n>0 ? n: -n
}

&&短路逻辑

A && B && C && D , 取第一个假值或D

并不会取true/false**

image.png

console && console.log && console.log('hi')

在IE里面没有console,所以第一个就直接结束了

||短路逻辑

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

并不会取true/false

例如: a = a || 100(保底值)

可以改写成

if(a)  {
  a = a
} else {   
  a=100    //保底值
}

如果 a = a,就不动了

否则 a = 100

总结

条件语句:

  • if...else
  • switch
  • A?B:C
  • A&&B
  • fn&&fn()
  • A||B
  • A=A||B

while循环(当...时)

  • 语法 while(表达式){语句}

判断表达式的真假

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

当表达式为假,执行后面的语句

面试例:

var a = 0.1
while(a!==1){             //!==意为不等于
      console.log(a)
      a = a + 0.1
}

当a不等于1时,a会加上0.1。

但是,它永远不会等于1,因为浮点数不精确。

image.png

会陷入死循环!

while循环体结构

var a = 0.1               //初始化
while(a!==1){             //判断
      console.log(a)      //循环体
      a = a + 0.1         //增长
}

do...while循环(用的少)

do...while循环与while循环类似,唯一区别就是先运行一次循环体,然后判断循环体条件

例如:

 do 
   语句
 while(条件);
 
 //或者
 
 do{
      语句
 }while(条件);
  1. 不管条件是否为真,do...while循环至少运行一次,这是这种结构最大的特点。
  2. while语句后面的分号 " ; " 不要漏了!

for循环

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

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

      循环体     
}
  1. 先执行语句1
  2. 然后判断表达式2
  3. 如果为真,执行循环体,然后执行语句3
  4. 如果为假,直接退出循环,执行后面的语句

例如:

for(var i=0; i<5; i++){
console.log(i)
}

输出 i = 5

例2:

for(var i=0; i<5; i++){
    setTimeout(() =>{
    console.log(i)
},0)
}

输出5个5

因为setTimeout为过一会儿执行,这时候for循环已经运行5次了,i值为5。

然后再执行console打印出i值5次。

for的优先级比setTimeout高。

break和continue

break退出所有循环和continue退出当前一次循环

例如,break:

for(var i=0; i<10; i++){
   if(i%2===1){             //i%2===1i2的余数等于1,就是单数的意思
   break
   }
}

输出i的值为1,break为退出所有循环

例2,continue:

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

输出 0,2,4,6,8

continue意为退出当前的一次循环

例3,break:

for(var i=0; i<10; i++){           //循环1
   for(var j=101; j<110; j++){     //循环2
   if(i===5){
   break
   }
}
   console.log(i)
}

break只会退出循环2的循环,循环1还会继续

label语句

用的很少(5%会问到)

例: { a:1 }{ foo=1 } 这俩只是个代码块,a和foo只是个标签,里面只有一个1

  • 语法 例:
    foo = {                             //foo只是个标识符
          console.log(1);
          break foo;
          console.log('本行不会输出');
     }
     console.log(2);

输出1,2