模板字符串, let, 箭头函数, forOf,class

1. 模板字符串

对字符串拼接的简化

1.1. 何时

• 只要字符串拼接时, 需要动态执行表达式

1.2. 如何

• `` -> 反引号, ESC 键下面

  • 模板字符串必须用 `` 包裹

• `` 中支持: 换行, 变量, 表达式

强调: 每个变量和表达式都要用 ${} 包裹

2. let

创建一个仅在块内有效的变量

2.1. 为什么

0. JS 中没有块级作用域, 导致块内的变量会污染全局
1. JS 的声明提前会程序的正常执行顺序

2.2. 何时

强调: let 必须配套严格模式使用

0. 解决声明提前: 检查 -> let 变量之前不允许提前使用变量

   • 变相强制将所有变量的声明放在当前作用于的顶部

1. 解决块级作用域: let 声明的变量, 仅在当前 {} 内有效, 出了块就失效

3. 箭头函数

简化函数

3.1. 何时

• 几乎所有的函数都可以用箭头函数简化

3.2. 如何

0. 所有函数都可以去 function 改为 =>

1. 如果函数体只有一句话, 可以省略 {}

   • 如果这一句话还是 return , 可省略 return

2. 如果只有一个参数, 可以省略 ()

   • 如果没有参数, 必须保留 ()

• 更大的用途: 箭头函数内外共用一个 this -> 取代 bind

  • 特殊: 不过不希望内外共用 this, 就不能使用箭头函数

• Ex: 事件处理函数

  elem.addEventListener('click', function () {
    ......
    // this: 指向 elem
  })
  

  箭头函数简化:

  elem.addEventListener('click', () => {
    ......
    // this: 不指向 elem
  })
  

  变通解决:

  elem.addEventListener('click', e => {
    ......
    // e.target: 指向 elem
  })
  

4. forOf

简化普通 for 循环

4.1. 何时

• 直接获取数组中的每个元素时

4.2. 如何

for(var item of arr) {
  ......
  // item: 自动获取当前元素值
}

• 其中: of 会自动取出 arr 中每个元素的值, 保存到 item

4.3. 局限

0. forOf 只能依次遍历每个元素

1. 按值传递: 无法修改原数组中的值

   • 要直接修改原数组中的值, 要用普通 for 循环

2. 只能遍历索引数组和类数组对象, 无法遍历关联数组和对象

   • 要遍历关联数组和对象, 要用 forIn 循环

• Ex:

  let sum = 0
  let forOfTestArr = [1, 2, 3, 4, 5]
  // 普通 for 循环
  for(let i = 0; i < forOfTestArr.length; i++) {
    sum += forOfTestArr[i]
  }
  console.log(sum) // 15
  sum = 0
  // forOf 循环
  for(let item of forOfTestArr) {
    sum += item
  }
  console.log(sum) // 15
  // 将数组中的每个元素 * 2
  for(let item of forOfTestArr) {
    item *= 2
  }
  console.log(forOfTestArr) // [1, 2, 3, 4, 5]
  

5. class

简化面向对象

5.1. 定义类型

• 一个类型的所有属性和方法都集中包含在 class 中
• 类型名提升到 class 之后, 成为类名
• 构造函数一律用 constructor 定义, 其余保持不变
• 共有方法可直接放入 class 中, 等效于直接放入原型对象中

5.2. 集成

• 用 extends 确定继承关系

• Ex:

  // 定义类型
  class Flyer {
    constructor(fName, speed) {
      this.fName = fName
      this.speed = speed
    }
    fly() {
      console.log(`${this.fName}以时速${this.speed}飞行`)
    }
  }
  // 集成
  class Plane extends Flyer{
    constructor(fName, speed, score) {
      super(fName, speed)
      this.score = score
    }
    getScore() {
      console.log(`击落${this.fName} +${this.score}分`)
    }
  }
  let F16 = new Plane('F16', 1000, 20)
  F16.fly() // F16以时速1000飞行
  F16.getScore() // 击落F16 +20分
  

  \