《JS 的基本语法》

✨chrome 的 console 中js换行 是通过 shift+enter实现的。

表达式、语句、标识符

一.表达式与语句

1.表达式

(1) 1+2表达式的值是3

(2) 函数调用add(1,2)，这个函数调用也是表达式。它的值为函数的返回值。

补充： 值与返回值是不一样的。只有函数才有返回值。

(3) console.log表达式(属于函数表达式)的值为函数本身

​ console.log是函数,注意没()。函数表达式的值为函数本身。

​ console.log表达式的值就是console.log

(4) 面试题

​ console.log(3)表达式的值为？undefined

跟add(1,2)一样都是“函数+()”，函数调用的值为函数的返回值。
所以log(3)函数的返回值是undefined。console.log(3)打印出来的记录是3。

2.语句

var a=1是一个申明语句

语句没有值，表达式才有值。语句主要是用来改变环境的。

例子:

  var a=1

  输出结果:undefined

二者的区别

(1)表达式一般都有值，语句可能有也可能没有

(2)语句一般会改变环境(声明，赋值)

(3)上面两句话并不是绝对的

一定要搞清什么是值，什么是返回值，什么是打印出来的东西！

二.大小写敏感

var a 和 var A是不同的

object 和 Object是不同的

function 和 Function是不同的

window 和 Window是不同的。平时只用window，大Window从来不用

三.空格

大部分空格没有实际意义

1.var a=1和var a = 1没有区别 只要并不影响断句就可以随便加空格。

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

面试题

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

return后面不能加回车，否则它会自动补充一个undefined

四.标识符

取名字时用到的符号叫标识符

1.规则

(1)第1个字符可以是Unicode字母(包含英语/希腊/法语字母等等) 或 $ 或下划线 _ 或 中文

$ 在js里面可以是标识符

(2)后面的字符，除了上面所说，还可以有数字，数字只能放在第二位开始。

2.变量名是标识符

var_=1
var $=2
var 你好='hi'

注意：$ 9 可以 9 $ 不可以

五.注释

1.常见注释

// 单行注视 /* 多行注视 */

2.注释分类

1’不好的注释

把代码翻译成中文

过时的注释

发泄不满的注释

2’好的注释

(1) 踩坑注解

(2)为什么代码会写的这么奇怪，遇到什么bug

对于某些特殊代码，例如非会员故意延迟5s。注释时注意职业素养，不要瞎写

不好的注释: 描述你做了什么，好的注释 :为什么这样做以及后面蕴藏的坑

区块block

把代码包在一起就叫做区块，常常与if/for/while合用

{
  let a=1
  let b=2
}

if…else…语句（条件语句 如果…那么…）

一.语法

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

如果表达式一成立，执行语句1，如果表达式不成立，执行语句2

()括号里必须有值

2.{}在语句只有一句的时候可以省略，不建议这样做

二.变态情况

面试题

1.表达式里可以非常变态，如a=1

变态之处: 如果a=2 又a = 1 表示a第一次赋值是2 第二次赋值是1

1个等于号是赋值语句。要想输出“a不是1”，应当是=== ( ==已过时,不要用)

例子

a=2
if(a=1){
  console.log('a是1')
}else{
  console.log('a不是1')
 }

输出结果：a是1

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

例子

let a=2
if( a < 100)
  if( a < 10)
    console.log('a小于10')

输出结果:a小于10

3.语句2里可以非常变态，如嵌套的if else

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

4.缩进也可以很变态，如面试题常常下套

a=1
if(a===2)
  console.log('a')     //如果省略{}那么if只会管到第1句
  console.log('a等于2')   // 所以第二行 进行输出

输出结果:a等于2

js没有行的概念，只会执行第1个语句。就算2个写在一行，也只会执行第1个

但是如果是 逗号 ， 则他认为是同一行 就会进行执行。

5.正确写法

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

6.推荐写法，只在函数里面用。

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

switch语句(不推荐用，但要了解)

if… else…升级版

1.语法 break 不能省略

switch(fruit){
  case "banana":
    //...
    break;
  case "apple":
    //...
    break;
  default:
    //...
}

2.break 方便进行2个case的判断

a=2
switch(a){
  case 1:
  case 3:
    console.log("单数")
    break;
  case 2:
  case 4:
    console.log("双数")
    break;
}

输出结果:双数

问号冒号表达式(又叫三元表达式)

最简单的if…else…的写法

表达式1 ？表达式2 : 表达式3

例子

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

 function max(a,b){     //常用来简化if 里面只有一个语句 else 里面只有一个语句
    return a>b ? a : b  //如果a>b 输出a 否则输出 b
 }

 function abs(n){     //求一个数的绝对值
  return n>0 ? n : -n
 }

&&短路逻辑

代替if…else…

前端有个特点，能不用if…else…就不用

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

调用函数，但不确定是否存在。如果xx存在就调用，不存在就不调用

if(window.f1){
  console.log("f1存在")
}

等价于

window.f1 && console.log("f1存在") // && 表示那么

&&如果前面语句为真值，他就会执行后面语句，如果前面语句为假，他就不执行后面语句。

在两个AB都为真的情况下， 他的值是B， 只要A是假的 它的值就是假的A

但是如果 A是真的 B是假的 那么它是值就是 B。

最常见写法 （IE没有console）

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

||短路逻辑

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

if(!a){ //如果a不存在就是b
  b
}

等价于

a || b

常用写法

a = a || 100

等于

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

总结
条件语句
1.if…else…
最常用，但是很多时候都不用它，尤其是代码简短的时候
2.switch
不要少break
3.A ? B : C
最常用
4.A && B
最常用 fn && fn()如果fn存在就调用,不存在就不调用
5.A || B
最常用 A = A || B //A存在就取A，不存在就取B。B是保底值

while循环 当…时 (用的较少，但要了解)

1.语法

while(表达式){语句}

• 先判断表达式的真假

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

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

真的话就执行并且再次判断表达式真假，假的话就跳出。

2.其它

do…while用的不多

var a=0
while(a<10){
  console.log(a)
  a=a+1
}
console.log('done')   //不加done，chrome控制台会多打印一个10，                           实际上等于9时就跳出来了。
输出结果: 0
         1
         2
         3
         4
         5
         6
         7
         8
         9
         done

浮点数不精确造成的问题

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

这段代码会死循环，a不会等于1，因为浮点数的叠加不等于1。

for循环

1.语法糖 写while的时候要初始化，再进行判断 循环体 增长 。

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

2.语法

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

语句1----初始化

表达式2 ---- 判断是否成立

如果为真，执行循环体，再执行语句3（增长）

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

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

 0
 1
 2
 3
 4
undefined

for(var i = 0; i < 5; i++){
  setTimeout(()=>{  //一段时间之后执行 ，说明for循环执行完再进行 setTimeout正好是  i=5 的时候   ，然后这个setTimeout在for循环里面 也执行五次。
    console.log(i)
  },0)
}

输出结果:  5    
          5
          5
          5
          5

-执行时机不同导致出现了五个5

因为for循环里面执行了5遍，setTimeout就执行了5遍

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

执行结果:5

那怎么解决这个问题呢？

var改为let for let 可以实现 过一会 按顺序打出

for(let i = 0; i < 5; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}
输出结果: 0
         1
         2
         3
         4

知识点 for循环里面的 语句1 可以省略 但是 表达式2 语句3 不可以省略

语句1 可以提前表示出来，在for上省略。

break 和 continue

退出所有循环 VS 退出当前一次循环

break举例

for(var i=0;i<10;i++){
  if(i%2===1){//i等于单数(i除以2的余数=1就是单数)
    break  // 直接跳出来 不会继续走for循环里面的语句3  所以这里不走 i++
  }
}

输入:     i

输出结果:  1

continue举例

for(var i=0;i<10;i++){
  if(i%2===1){
    continue // 跳过此次循环 但是也会继续执行for循环的 语句3
  }else{
    console.log(i)
  }
}

输出结果:  0
          2
          4
          6
          8

举例，如果有两层循环

for(var i=0;i<10;i++){
  for(var j=101;j<110;j++){
    if(i===5){
      break  // 这个break 只退出 i===5 这个for循环 所以输出的时候是 执行完第一个for语句 i++后的结果。
    }
  }
  console.log(i)
}

输出结果: 0
         1
         2
         3
         4
         5
         6
         7
         8
         9      

label语句(用的很少，面试5%会考)

1.语法

foo: {
  console.log(1);
  break foo;  // break了整个代码块
  console.log('本行不会输出')
}
console.log(2);

2.面试

例1

{
  foo: 1
}

上面的东西是什么？

这里在Firefox里面不是一个对象 (注意1后面没有分号;)在Firefox里面，foo就是个标签label,值为1

例2

var a={
  foo: 1
}

如果在前面添加 var = a 那么现在a才是对象 。

本文章只适用于个人学习记录，不够全面请谅解。