ES6+-笔记

ES6+常用语法

列出整体ES6+新语法列表

说明: 跟面试官交流ES6, 先快速说出这套列表, 再选择几个常用的/有些难度的/有说头的说, 或者看面试官关注哪方面的

1. const与let

2. 解构赋值

3. 字符串的扩展

4. 数值的扩展

5. 函数的扩展

6. 数组的扩展

7. 对象的扩展

8. 类语法

9. 模块化语法

10. 异步语法

11. 新容器语法

12. 代理(Proxy)与反射(Reflect)

13. 装饰器语法

const与let

• const定义常量, let定义变量
• 相对于var
  • 有块作用域
  • 没有变量提升
  • 不会添加到window上
  • 不能重复声明

解构赋值

• 解构对象: const {id, name} = this.product
• 解构数组: const [count, setCount] = useState()
• 形参解构: add ({ id, title }) {}
• 引入模块解构: import { getProductList } from '@/api'

字符串的扩展

• 模板字符串: 我是${name}, 今年${age}
• 方法: includes() / startsWith() / endswith()

数值的扩展

• 完善二进制(0b)与八进制(0o)表示
• 给Math添加方法: parseInt()与parseFloat() (原本window上有)
• 指数计算: **

函数的扩展

• 箭头函数
  • 没有自己的this, 使用外部作用域中的this, 不能通过bind来绑定this
  • 不能通过new来创建实例对象
  • 内部没有arguments, 可以通过rest参数来代替
• 形参默认值: fn (a=2, b={}) {}
• rest参数: fn (a, ...args) {} / fn (a, ...args) {}

数组的扩展

• 扩展运算符
  • 浅拷贝数组: const arr2 = [...arr]
  • 合并多个数组: const arr3 = [...arr1, ...arr2]
• 静态方法
  • Array.from(): 将类数组对象和可遍历对象转为真数组
    • Array.from(new Set(arr))
    • [...new Set(arr)]
  • Array.of(1, 2, 3): 将一组值，转换为数组
• 实例方法
  • find() / findIndex(): 查找匹配的元素或下标
  • arr.flat(): 将多维数组转为一维数组(也称为: 数组扁平化)

对象的扩展

• 扩展运算符
  • 浅拷贝对象: const obj2 = {...obj1}
  • 合并多个对象: const obj3 = {...obj1, ...obj2}
• 属性/方法的简洁写法: {name, getName () {}}
• 遍历内部属性
  • for..of: 遍历对象及其原型链上所有属性
  • Object.keys(obj): 得到对象自身可遍历的所有属性名的数组
• 静态方法:
  • Object.is(value1, value2): 判断2个值是否完全一样
  • Object.assign(target, ...sources): 将后面任意多个对象合并到target对象上

类语法

• class
• extends
• constructor
• super() / super.xxx()
• static

模块化语法

• export

• export default value

• import: 静态导入, 合并一起打包

• import(): 动态导入, 拆分打包, 用于懒加载 const Home = () => import('./views/Home.vue')

  import('./views/Home.vue').then((module) => {

  ​ // 使用module块

  ​ module.default

  ​ module.xxx

  })

异步语法

• Promise
• async 函数
• await 表达式

装饰器语法

• 在react中简化高阶组件在类组件中的使用
• @withRouter / @connect()

​

面试可说的: ES6常用语法

• const与let
• 箭头函数
• 解构赋值
• 形参默认值
• rest/剩余参数
• 类语法: class / extends / constructor / static /super
• 扩展运算符: ...
• 模板字符串
• 异步语法: promise / async & await
• 对象的属性与方法简写
• set / map
• 模块化语法: export / default / import / import()