写给自己看的 JS 基本语法小结

STApril
182 阅读3分钟

自己看的复习小结，标题借鉴了张鑫旭的《写给自己看的display: flex布局教程》～

表达式和语句

1. 表达式：用于表达值

例如：

  • 1 + 2 表达式的值为 3；
  • add (1,2) 表达式的值为函数的返回值；
  • console.log 表达式的值为函数本身；
  • console.log(3) 表达式的值为 undefined，打印值为3;

2. 语句：用于表达改变了环境 (如声明、赋值)

例如：

  • var a = 1 是一个语句，这里的 var a = 1 是没有值的。

3. 注意

  • 表达式一般都有值， 语句可能有值也可能没有， 表达式和语句是否有值并不绝对；
  • 大小写敏感：var a 和 var A，object 和 Object， function 和 Function 不是一个东西；
  • 大部分空格和回车都没有实际意义，但是 return 后面不能加回车
  • 举例 1：下面三个式子没有区别 
var a = 1
//  返回值为 undefined

var a=1
//  返回值为 undefined

var a
=1
//  返回值为 undefined
  • 举例 2： 当 return 后面有回车时，会自动添加 undefined，改变代码原意：
function fn(){
   return 3
}
//  值为 undefined，返回值为 3
function fn(){
return
3
}
//  此时 fn() 的返回值为 undefined

标识符的规则

首字符可以是：

  1. Unicode字母(不仅限于英文，还可以是希腊字母)
  2. $
  3. _
  4. 中文 首字符后面的字符，可以有数字。

注释

  1. 单行注释
console.log('hello world')
//  世界的尽头，也可能是hello world
  1. 多行注释
console.log('hello world')
/*
你以为掌握hello world就算掌握JS了吗？
就算你这样想
TS之父也不会这样想
*/

区块

  • 区块 (block) 把代码包在一起，例如：
{
let a = 1
let b = 2
}
//  undefined
  • 区块常常与 if/for/while 合用

if else 语句

1. if else 语句，是 if 语句的最推荐写法；

2. if 语句的语法

  1. if (表达式){语句1} else{语句2}：
  • ()不能省略；
  • {}就是区块block，{}在语句只有一句的时候可以省略，但是不推荐
  • ⚠️ 注意缩进和符号，可能会有坑

3. if else 语句的语法

  1. 最推荐写法
if (表达式) {
  语句
} else if(表达式){
  语句
} else {
  语句
}
  1. 次推荐写法
function fn(){
  if(表达式){
    return 表达式
  }
  if(表达式){
    return 表达式
  }
  return 表达式
}

while for 语句

1. while 语法

  1. while(表达式){语句}
  2. while 语句判断表达式的真假：
  • 当表达式为真，执行语句，执行完再判断表达式当真假；
  • 当表达式为假，直接执行后面的语句
  • 还有一种 do while，用的较少

2. ⚠️ 注意事项

  1. Chrome 浏览器的bug
var i = 0
while(i<10){
  console.log(i)
  i = i + 1
}
//  Chrome浏览器的控制台执行上述代码时，会多打印一个10，但是Firefox不会
  1. 不要写死循环
var a = 0.1
while (a !== 1){
  console.log(a)
  a = a + 0.1
}
//  由于浮点数不精确，这将会是一个死循环，a 的值永远不会等于 1

3. for 循环

  1. for 是 while 的语法糖
  2. for 循环语法写法如下
for(语句1; 表达式2; 语句3){
  循环体
}
/*
  该语法的逻辑是：
    先执行语句1
    再判断表达式2
      如果 2 为真，执行循环体，再执行语句3
      如果 2 为假，直接退出循环，执行后面的语句
*/
  1. 示例
for (var i = 0; i<5; i++){
  console.log(i)
}
/*
0
1
2
3
4
undefined
此时的 i 的值为 5
*/
  1. ⚠️ 特殊情况
  • setTimeout
for(var i = 0; i<5; i++){
  setTimeout( ()=>{
    console.log(i)
  }, 0)
}
// 打印出5个5，因为 setTimeout 不是立即执行，而是过一段时间后执行
  • let
for(let i = 0; i<5; i++){
  setTimeout( ()=>{
    console.log(i)
  })
}
//  这里打印出 0 1 2 3 4 5

break 和 continue

  1. break: 退出当前的所有循环
for (var i = 0; i<10; i++){
  if(i%2 === 1){
    break
  }else{
    console.log(i)
  }
}
//  break 表示退出当前的所有循环，打印的 i 值为 0
  1. ⚠️ 注意 break 只对离它最近的一个循环生效，不会 break 所有循环
for (var i = 0; i<10; i++){
  for(var j=101; j<110; j++){
    if(i === 5){
      break
    }
  }
  console.log(i)
}
//  打印出 0 1 2 3 4 5 6 7 8 9，返回值 undefined
  1. continue：退出当前的一次循环
for(var i = 0; i<10; i++){
  if(i%2 === 1){
    continue
  }else{
    console.log(i)
  }
}
//  打印出0 2 4 6 8，continue 表示退出当前的一次循环，即除以2有余数的循环，打印出偶数

label

  1. 语法
foo:{
  console.log(1)
  break foo
  console.log('这行你看不到')
}
console.log(2)
  1. ⚠️ 注意
  • {foo: 1} 在 Firefox 中输出为 1，在 Chrome 中输出为 {foo:1}
  • {foo: 1;} 在 Firefox 和 Chrome 中输出均为 1

Reference List | 参考文章
阮一峰的 JavaScript 教程

avatar
文章
阅读
粉丝