1. ECMAScript概述
      1. ECMAScript 是JavaScript的规范,JavaScript是ECMAScript扩展,ECMAScript是语言层面的最基本的语法
      2. JavaScript实现了ECMAScript 并做了扩展 浏览器中 JavaScript => ECMAScript + BOM + DOM
      3. 从ECMAScript2015开始以年份命名。2015版本也叫做ES6
    2. ECMAScript2015概述
      1. 标准命名规则变化 缩写 ES2015
      2. 相对比 5.1版本变化大
        1. 解决原有语法上的问题或不足
        2. 对原有语法增强
        3. 全新的对象,全新的方法,全新的功能
        4. 全新的数据类型和数据结构
    3. let 与 块级作用域
      1. 新增块级作用域let(以前 全局作用域和函数作用域)
        1. 只能在所声明的代码块中生效
        2. let没有声明提升
        3. let const 有暂时性死区,只要Let声明,就和当前作用域绑定,不受外部影响
    4. const
      1. 只读 变量声明之后不能修改 所以要求声明的时候赋值
      2. 是不允许重新指向新的内存地址 引用型的 可以修改恒量中的属性成员
      3. 其它和let相同
      4. 最佳实践 不用var 主用const 配合let
    5. 数组的解构
      1. 根据位置去匹配提取
      2. 注意解构使用…只能在解构位置的最后使用
      3. 解构的成员长度大于数组长度,返回undefined
      4. 可以使用默认值,如果没有提取到,会返回默认值
    6. 对象的解构

      1. 需要根据属性名去匹配提取
      2. 作用域中有相同的命名会产生冲突 可以通过重命名方法解决
        1. const name = 'tom'
        2. const { name: objName } = obj
        3. objName可以提取到name 不会冲突
    7. 模板字符串

      1. 可以换行
      2. 插值表达式${}可以嵌入值 不需要复杂的拼接 不仅可以嵌入变量 可以嵌入任何javascript语句 返回值可以嵌入
      3. 带标签的模板字符串 ``javascript const name = 'a' const gender = true function myTagFunc(strings,name,gender){ 可以对模板字符串进行加工 console.log(strings,name,gender) } const result = myTagFunchey,${name} is a ${gender}`
    1. 1. 字符串的扩展方法
    2. 1. startsWith() 是否以xxx开头
    3. 1. endsWith() 是否以xxx结尾
    4. 1. includes() 是否包含
    5. 2. 参数默认值
    6. 1. function foo(enable=true)
    7. 1. 带有默认值的参数要在最后,参数按照次序传递的
    8. 1. 没有传递实参或者参数为Undefined时候才会调用
    9. 3. 剩余参数
    10. 1. 未知参数的个数在形参未知 ... 就会从当前位置开始接受所有参数
    11. 1. 只可以出现在最后一位,只可以使用一次
    12. 1. 数组
    13. 4. ... 展开数组
    14. 4. 箭头函数
    15. 1. => 定义函数,简化函数的定义
    16. 1. 箭头左边参数列表,右边是函数体 函数体只有一句话,可以省略return 使用 { } 需要return
    17. 1. 不会改变this的指向,箭头函数外边this指向哪里,箭头函数this指向哪里
    18. 6. 对象字面量增强
    19. 1. 对象中变量名和属性名一直,就可以省略 :变量名
    20. 1. 方法的话 可以省略掉 :funciton 普通函数 this指向当前对象
    21. 1. 对象属性名可以使用[] 包括任意表达式
    22. 7. Object.assign
    23. 1. 依次多个源对象中的属性复制到一个目标对象中,相同的属性会被源对象中的覆盖
    24. 1. Object.assign(target,source) 返回的结果和目标属性相等
    25. 8. Object.is
    26. 1. 判断两个值是否相等 ===运算符 +0 -0 相等 NAN不相等 .is判断可以识别出来
    27. 9. Proxy
    28. 1. 数据代理器 监视到 对象的变化
    29. 1. 相比Object.defineProperty 可以监视更多对象操作 例如 delete,方法调用 defineProperty只可以监听属性的读写
    30. 1. 更好的支持数组对象的监视 defineProperty实现是重写数组的操作方法
    31. 1. 以非侵入的方式监管 一个已经定义好的对象,不需要特殊的操作即可以监听
    32. ```javascript
    33. const person = {
    34. name:"zce",
    35. age:20
    36. }
    37. const list = []
    38. //监听list可以直接和对象一样 实际是转化为 下标 对象
    39. const personProxy = new Proxy(person,{ //1.需要代理的目标对象,2.代理的处理对象
    40. get(target,property){ //1.代理的目标对象,2.外部所访问的属性名
    41. console.log(target,property)
    42. return property in target ? target[property] : 'default'
    43. }
    44. set(target,property,value){ // 1.代理的目标对象 2.外部所访问的属性名 3.要设置的值
    45. //可以做一些数据校验
    46. target[property] = value
    47. }
    48. deleteProperty(target,property){
    49. console.log('delete',property)
    50. delete target[property]
    51. }
    52. }
    53. })
    1. reflect
      1. 统一操作对象 静态类 不可能通过new使用
      2. 封装了对象的底层操作
      3. Reflect成员方法就是Proxy处理对象的默认实现
      4. 提供了统一的一套操作对象的api //MDN
        1. Reflect.apply() 与function.prototype.apply 功能类似
        2. Reflect.construct 对构造函数进行new操作,相当于 new target(…args)
        3. Reflect.defineProperty
        4. Reflect.deleteProperty(target,propertyKey) 作为delete操作符 相当于 delete target[name]
        5. Reflect.get(target,propertyKey[,receiver]) 相当于 target[name]
        6. Reflect.getOwnPropertyDescriptor(target,propertyKey) 如果对象中存在该属性 返回,否则返回undefined
        7. Reflect.getPrototypeOf
        8. Reflect.has(target,propertyKey) 判断一个对象是否存在某个属性 和in 相同
        9. Reflect.ownKeys(target) 返回一个包含所有自身属性(不包含继承属性)的数组
        10. Reflect.set(target,propertyKey,value[,receiver]) 将值分配给属性的函数,更新成功返回true
        11. Relect.setPrototypeOf(target,prorotype) 设置对象原型的函数
    2. Promise
      1. 更优的异步解决方案
    3. class

      1. 定义类的方法结构更清晰 容易理解
      2. 静态方法 static 直接通过类型本身去调用 this指向当前的类型 不会指向实例
      3. 实例方法 需要构造的实例对象去调用
      4. 继承 : extends
        1. class Person{
        2. constructor(name){
        3. this.name = name
        4. }
        5. say(){
        6. console.log(`${this.name}`)
        7. }
        8. }
        9. class Students extends Person{
        10. constructor(name,number){
        11. super(name) //始终指向父类,调用父类的构造函数
        12. this.number = number
        13. }
        14. hello(){
        15. super.say() 同样用super调用父类的方法
        16. console.log(`this.number`)
        17. }
        18. }
    4. set 数据结构

      1. set内部成员不允许重复。类似于数组 ```javascript const s = new set() //返回集合本身 //可以链式调用 s.add(1).add(2) s.size //长度 s.has()//集合当中是否存在某个值 s.delete() //删除集合当中某个值 返回 布尔 s.clear() //清除集合中全部元素 //数组去重 const arr = [1,1,2,2,3] const result =[…new Set(arr)]
    1. - Map数据结构
    2. - 映射两个任意数据间的映射关系。
    3. - 对象实际上只能使用字符串作为键
    4. ```javascript
    5. const m = new Map()
    6. m.set(tom,90)
    7. //has()
    8. //delete()
    9. //clear()
    10. m.forEach(value,key)
    • Symbol
      • 表示一个独一无二的值,解决冲突
      • 为对象添加一个独一无二的私有属性
      • Symbol.for(‘foo’) 相同的字符串返回相同的Symbol 传入的不是字符串 会自动转为字符串
      • Symbol.toStringTag 字符串设置标识
      • Object.getOwnPropertySymbols 获取到 symbol()属性名 ```javascript const cache = {} //a.js cache[‘foo’] = Math.random() //b.js cache[‘foo’] = ‘123’ //此时会造成冲突 扩展第三方模块不知道存在某个键

    const s = Symbol() Symbol() === Symbol() //false Symbol(‘foo’) //Symbol(foo) 传入字符串识别这个值

    1. - for of 循环
    2. - 遍历所有数据结构的统一方式
    3. - 遍历数组 拿到每一项 可以随时通过 break 终止循环 遍历set一样
    4. - 伪数组也可以直接遍历
    5. - 遍历Map对象 会返回每一项 键值 的数组 通过解构赋值 直接拿到 for (const [key,value] of oneMap)
    6. - 遍历普通对象时,需要给对象添加上iterator方法
    7. - 内部就是 迭代器 iterator = oneMap[Symbol.iterator]() iterator.next()
    8. - 可迭代接口
    9. - iterable 接口 实现iterable接口是for of前提
    10. - 实现iterable 必须要去挂载一个 iterator 迭代器方法
    11. - 这个方法返回 next 不断调用这个对象可以得到遍历
    12. - 迭代器模式
    13. - 外部不需要考虑对象内部的数据结构。直接调用for of
    14. ```javascript
    15. // 协同开发一个任务清单
    16. const todos = {
    17. life: ["吃饭", "睡觉", "打豆豆"],
    18. learn: ["语文", "数学", "外语"],
    19. each: function (callback) {
    20. const all = [].concat(this.life, this.learn)
    21. for (const item of all) {
    22. callback(item)
    23. }
    24. },
    25. [Symbol.iterator]: function () {
    26. const all = [...this.life, ...this.learn]
    27. let index = 0
    28. return {
    29. next: function () {
    30. return {
    31. value: all[index],
    32. done: index++ >= all.length,
    33. }
    34. },
    35. }
    36. //用生成器方法 因为生成器本身实现了 可迭代
    37. [Symbol.iterator]: function () {
    38. const all = [...this.life, ...this.learn]
    39. [Symbol.iterator]: function * () {
    40. const all = [...this.life, ...this.learn]
    41. for (const item of all){
    42. yield item
    43. }
    44. },
    45. },
    46. }
    47. for(const item of todos){
    48. console.log(item)
    49. }
    • 生成器
      • 解决异步代码回调地狱
    • Modules
      • 语言层次的模块化标准
    • ES2016
      • includes 检测某个数组当中是否存在某个元素
        • indexOf不能判断是否有NAN
        • 返回布尔 arr.includes()
      • 指数运算符
        • 基数 指数 例如 2 10**
    • ES2017
      • object对象的三个方法
        • Object.values() 返回所有值组成的数组
        • Object.entries(obj) 返回所有键值对数组的数组 可以用for of遍历了
        • Object.getOwnPropertyDescriptors 可以获取到对象所有的描述 配合get set 在使用assign可以复制整个对象
      • String
        • String.prototype.padStart /padEnd
          • 用给定的字符串去填充指定位置 直到指定长度
      • 在参数尾数中添加尾逗号
      • Async/Await