ES6新特性笔记

ES6

let 、const

• let
  类型var,声明变量
• const
  声明常量，声明时，必须赋值且声明之后不能修改值。
  ES5实现：可通过Object.defineProperty()里的writable属性设置为false实现。
• 与var区别
  声明变量，变量声明不提升
  同一块级作用域不允许重复声明变量
  暂时性死区，变量声明之前访问不到变量

解构和赋值

• 数组解构
  let [a,b,c] = [1,2,3]
  结果是：a = 1;b =2;c =3;
• 对象解构
  let {a,b} = {a:1,b:2}
  结果是：a =1,b=2
• 字符串解构
  let [a,b,c,d,e] = “hello”
  结果是：a=‘h’;b=‘e’;…
• 数值
  const {toString: s} = 123
• 布尔值:
  const {toString: b} = true
• 函数参数
  数组: function fn([x = 1, y = 2]){}
  对象: function fn({x, y} = {}){}
• 注
  当左右模式相等时，就直接赋值；不相等时，左边多的就等于undefined，右边多的就不管。

字符串扩展

• 遍历 for of
• 字符串模板 ${}
• 新增方法
  includes() 判断是否存在指定字符
  fromCodePonit() unicode转换为字符串
  raw() 处理模版字符串
  codePointAt() 返回字符串对应的unicode码
  normalize()
  includes() 是否存在指定的字符串
  startsWith() 指定字符串是否在头部
  endsWith() 指定字符串是否在尾部
  repeat(n) 重复字符串n次
  x.padStart(n, str) 在x字符串开头加上str总共n个字符长度
  padEnd() 在x字符串结尾加上str总共n个字符长度
  trimStart() 消除字符串头部空格
  trimEnd() 消除字符串尾部空格
  matchAll() 返回字符串满足正则规则的所有字符串
  replaceAll() 替换所有指定字符
  at() 返回指定位置的字符

对象扩展

• 简单表示法
  当对象属性名称与对象名称一致时，可写成
  a=1,b=2,{a,b} ==> {a:1,b:2}
• 新增方法
  Object.is() 对比两值是否相等
  Object.assign() 合并对象，只是浅拷贝,拷贝的是可遍历属性，返回源对象
  Object.getPrototype() 返回原型对象
  Object.setPrototype() 设置原型对象
• 遍历
  for in 遍历可枚举属性
  Object.keys() 返回对象可枚举的属性组成的数组
  Object.getOwnPropertyNames() 返回对象非Symbol的自身属性组成的数组
  Object.getOwnPropertySymbol() 返回对象自身Symbol的属性组成的数组
  Reflect.ownkeys() 返回自身全部属性组成的数组

数组扩展

• … 数组展开
• Array.from() 将类数组转化为真正的数组对象
• Array.of() 将一组值转化为数组
• copyWithin(target, start, end) 将数组指定位置长度的值替换指定位置
• find() 返回第一个符合条件的成员
• findIndex() 返回第一个符合条件成员的索引值
• findLast()
• findLastIndex()
• fill() 填充数组
• entries() 键值对遍历
• keys() 键的遍历
• values() 值的遍历
• includes() 判断数组是否包含
• flat(n) 拉平n层的数组
• flatMap(()=>{}) 遍历数组进行操作
• at(n) n索引位置的值
  -toRevered() 颠倒数组，返回新数组
• toSorted()
• toSpliced()
• with(index, value) ==> splice(index, 1, value) 返回的是新数组
• group(()=>{}) //参数是一个分组的函数 对象结构
• groupToMap() //结果是Map结构
• 数组的空位 ES6明确将数组空位转为undefined

函数扩展

• 默认参数
• rest参数 …
• 箭头函数
  ()=>{}
  this指向不是看调用位置，而是定义时所处位置。
  不可用作构造函数
  不能用arguments对象
• 尾调用优化：函数最后一步调用其他函数
  只保留内层的调用帧，节省内存
  尾递归
  ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。

Set （集合）

类似数组的结构类型，成员唯一，无序，可遍历，键值与键名一致。可使用Array.from()转化为数组。
类数组
具有Iterator接口

• 属性：
  size 数据长度
  constructor： 构造函数
• 方法：
  add()
  delete()
  has()
  clear()
• 遍历：
  keys()
  values()
  entries()
  forEach()
  数组去除重复元素：

	Array.from(new Set(arr))
	或者[...new Set(arr)]

WeakSet

与set结构类型，成员只能是对象，弱引用，不可遍历。

Map (字典)

类似与对象的数据结构，以[key,value]形式存储，每个成员都是双元素数组的数据结构。

• 属性：
  size()
• 方法：
  set()
  get()
  has()
  delete()
  clear()
• 遍历：
  keys()
  values()
  entries()
  forEach()

WeakMap

对象是一组键值对的集合，键是弱引用的对象，值是任意的

Proxy

修改某些操作的默认行为
针对实例操作而非对象
属性被定义为不可读写/扩展/配置/枚举时，使用拦截方法会报错

// new Proxy(target,handler)
new Proxy({}, {
            set(){},
            get(){}
        })

• 支持拦截操作：
  get(target, propkey) 返回具体值
  set(obj, prop, val) 返回布尔
  has(target, key) 拦截HasProperty操作,判断对象是否具有某个属性时拦截(只对in操作有效，for in没有效果)
  deleteProperty(target, key) 用于拦截delete操作 返回布尔值
  ownKeys(target) 拦截对象对自身属性的读取
  ownKeys
  for in
  Object.getOwnPropertyNames()
  Object.getOwnPropertySymbols()
  getOwnPropertyDescriptr(target, key) 拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined
  defineProperty(target, key, escript) 拦截了Object.defineProperty()操作 返回布尔值
  preventExtensions(target) 拦截Object.preventExtensions()
  getPrototypeOf(target) 拦截获取对象原型
  Obect.prototype.proto
  Object.prototype.isPrototypeOf
  Object.getPrototypeOf
  instanceof
  isExtensible(target) 拦截Object.isExtensible()
  setPrototypeOf(target, proto) 拦截Object.setPrototypeOf()
  apply(target, conent, args) 拦截函数的调用、call、apply操作 返回布尔值
  construct(target, args, newTarget) 拦截new 命令 返回对象，只针对与函数
• Proxy.revocable()方法返回一个可取消的 Proxy 实例 返回的对象{proxy, revoke} //revoke可取消Proxy实例的函数
• this问题：对象内部this指向Proxy代理 拦截函数内部this指向handler
  -## Reflect
  Object上的方法放在了Reflect对象上，并且修改一些方法的返回值，让其合理。
• 方法：
  get(target, name, receiver)
  set(target, name, value, receiver)
  has(obj, name) 对应in运算
  deleteProperty(obj, name) ===> delete obj.name
  constrct(target, args) ===> new target(args)
  getPrototyprOf(obj) ===> Object.getPrototypeOf(obj)
  setProtptypeOf(obj, newProto) ===> Object.setProtptype(obj, newProto)
  apply(func, thisArg, args) ===> Function.prototype.apply.call(func, thisArg, args)
  defineProperty(target, propertyKey, attribute) ===> Object.defineProperty(target, propertyKey, attribute)
  getOwnPropertyDescriptor(target, propertyKey)
  isExtensible(target)
  preventExtensions(target)
  ownKeys(target)
• 与proxy实现观察者模式

class

构造函数的另一种写法
类所有的方法都定义在原型上，不可枚举
constrcutor() { //类默认的方法 返回实例对象

}
实例属性可定义在constrcutor上
get prop() {

}
set prop() {

}

• 属性表达式
  prop {}
  class表达式
  class {

  }
  

• 静态方法 static
  不会被实例继承 通过类调用
  this指向类而非实例
  子类可继承父类 也可super.staticFn()调用

• 静态属性

• 私有方法 #

• 私有属性 #

• in运算符 判断实例是否存在属性（可判断私有属性）

• 静态块

• new.target 判断构造函数是否使用new调用的

extends

子类继承父类必须要调用super()

• 私有属性和私有方法
  无法继承，子类可通过调用父类添加读取自身私有属性的方法。
• 静态属性和方法的继承
  浅拷贝实现
• Object.getPropertyOf() 子类可获取到父类
• super
• 类的prototype属性以及__proto__
• 原生构造函数
  Boolean()
  Number()
  String()
  RegExp()
  Object()
  Date()
  Array()
  Function()
  Error()
• Mixin模式实现
  多个对象合成一个新对象

moudle

• export //不能放入块级作用域
• 导出形式
  export {a, b…}
  export let a = 1;
  export default a; //默认输出 唯一性 不需要{}
• import
  import { a } from ‘’;
• 整体加载
  import * from ‘’;
• 模块之间的继承
  模块中导出其他模块 export * from ‘’;
• 跨模块常量
• import.meta 返回当前模块元信息
  url
  scriptElement

Iterator

• 作用：
  为各种数据结构提供统一的简便的访问接口
  是数据结构的成员按照某种次序排列
  提供给for of 遍历
  默认接口：Symbol.iterator
• 原生数据结构具备
  Array
  Map
  Set
  String
  arguments
  NodeList
  类数组
• 使用场景
  解构赋值
  …
  yield*
• 方法
  next()
  return()
  throw()

Promise

• 三种状态：pending、fulfilled、reject
  状态改变就不能在修改
  一旦新建执行就无法取消
• 用法
  new Promisse((resolve, reject)=> {})
• 方法
  then() //链式调用
  catch()
  finlly() 不管最后状态是什么都会执行
  Promise.all([]) //参数数组里所有的Promise状态都resolve才返回reslove,否则就reject
  Promise.race([]) //只要一个状态变了，整体就变了
  Promise.allSetlled([]) //所有的异步操作结束之后执行，不管成功还是失败
  Promise.any([]) //只要有一个状态成功，实例对象状态就成功
  Promise.resolve() 将对象转化为Promise对象,实例状态为resolve
  Promise.reject()
  Promise.try
• Generator结合使用

Generator

解决异步编程的方法

        function *name() {
            yield
        }

yield 暂停标志
与iterator接口关系
next() //参数表示上一次yield的返回值 否则为undefined
for of
throw()
return() 给定返回值并且终结函数
yield*
对象属性的Generator
this

Async/await