• ECMAScript

      • 简称ES，通常看作JavaScript的标准化规范

      • 实际上JavaScript是ECMAScript的扩展语言

      • ECMAScript只提供了最基本的语法，也就是说约定了代码该如何编写

      • 只停留在语言层面，并不能直接用来在实际应用中的功能开发

      • JavaScript实现了ECMAScript的语言标准，并且在此基础之上做了一些扩展，使得我们可以在浏览器环境中

    操作DOM BOM，在node环境中做读写文件之类的操作

    1：JavaScript在浏览器环境当中，等于ECMAScript + Web APIs(web提供的API，即BOM DOM)

    2：node环境中使用JavaScript，等于ECMAScript + Node APIs(如fs net etc.)


    • JavaScript语言本身指的就是ECMAScript

    • 从2015年开始ES开始每年保持一个大版本的迭代，ES2015又被常称为ES6

    • 市面上主流环境开始渐渐支持这些新特性

    • ES2015 — 习惯这之后更新的版本的都叫ES6(特指、泛指)
      • 变化较大，新标准多

    • Nodemon
      • 修改完代码后可以自动执行代码
      • 安装到项目中 yarn add nodemon —dev
      • 使用 yarn nodemon XXX.js

    • 块级作用域
      • let 用花括号括起来的范围{}
      • const
        1. const obj = {}
        2. obj.name = 'zce'    //被允许，内存指向只能定义一次，但时面属性可以改变


    • 数组的解构

      1.   const arr = [100, 200, 300];
      2.   const [, , baz] = arr;
      3.   console.log(baz)    //300
      5.   const [foo, ...rest] = arr;
      6.   console.log(rest);  //[200, 300]    ... 提取级数剩余元素，只能在最后使用
      8.   const [foo, bar, baz, more] = arr
      9.   console.log(more)   //undefined
      11.   const [foo, bar, baz = 123, more = 'default value'] = arr
      12.   console.log(baz, more)  //300 default value


    • 对象的解构
      ```javascript const obj = { name: ‘zce’, age: 18 }

    // const { name } = obj // console.log(name) //zce

    // const name = ‘tom’ // const { name: objName } = obj // console.log(objName) //zce

    const { log } = console log(‘foo’)

    2. - <br />模板字符串
    3.    - 支持换行
    4.    - 支持插值表达式
    5. ```javascript
    6. // 反引号包裹
    7. // const str = `hello es2015, this is a string`
    9. // 允许换行
    10. // const str = `hello es2015,
    12. // this is a \`string\``
    14. // console.log(str)     
    16. const name = 'tom'
    17. // 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置
    18. const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
    19. console.log(msg)


    • 带标签的模板字符串

      1.   const name = 'tom'
      2.   const gender = false
      4.   function myTagFunc (strings) {
      5.   //console.log(strings)      //[ 'hey, ', ' is a ', '.' ]
      6.   // return '123'
      7.   //const sex = gender ? 'man' : 'woman'
      8.   return strings[0] + name + strings[1] + sex + strings[2]    //hey, tom is a woman.
      9.   }
      11.   const result = myTagFunc`hey, ${name} is a ${gender}.`


    • 字符串的扩展方法

      • startsWith()
      • endsWith()
      • includes()


    • 参数默认值

      1.   // 默认参数一定是在形参列表的最后
      2.   function foo1 (enable = true) {
      3.   console.log('foo invoked - enable: ')
      4.   console.log(enable)
      5.   }
      7.   foo1(false)   //false   默认参数只有在没有传递实参，或者传递undefined的时候才会被使用


    • 剩余参数

      1.   function foo (first, ...args) {
      2.       console.log(args)
      3.   }
      4.   foo(1, 2, 3, 4)     //[ 2, 3, 4 ]


    • 展开数组

      1.   const arr = ['foo', 'bar', 'baz']
      3.   // console.log.apply(console, arr)
      5.   console.log(...arr) //与上等效  foo bar baz


    • 箭头函数

      • 箭头函数不会改变this指向


    • 对象字面量的增强
      ```javascript const bar = ‘345’

      const obj = {

      1.   foo: 123,
      2.   // bar: bar
      3.   // 属性名与变量名相同，可以省略 : bar
      4.   bar,
      5.   // method1: function () {
      6.   //   console.log('method111')
      7.   // }
      8.   // 方法可以省略 : function
      9.   method1 () {
      10.       console.log('method111')
      11.       // 这种方法就是普通的函数，同样影响 this 指向。
      12.       console.log(this)
      13.   },
      14.   // Math.random(): 123 // 不允许
      15.   // 通过 [] 让表达式的结果作为属性名
    1.     [bar]: 123
    2. }
    3. // obj[Math.random()] = 123
    4. console.log(obj)
    5. obj.method1()
    2. - <br />Object.assign<br />
    3. ```javascript
    4.     // const source1 = {
    5.     //   a: 123,
    6.     //   b: 123
    7.     // }
    9.     // const source2 = {
    10.     //   b: 789,
    11.     //   d: 789
    12.     // }
    14.     // const target = {
    15.     //   a: 456,
    16.     //   c: 456
    17.     // }
    19.     // const result = Object.assign(target, source1, source2)   
    21.     // console.log(target)      { a:123,c:456,b:789,d:789}
    22.     // console.log(result === target)    true
    24.     // 应用场景
    26.     function func (obj) {
    27.     // obj.name = 'func obj'
    28.     // console.log(obj)
    30.     const funcObj = Object.assign({}, obj)
    31.         funcObj.name = 'func obj'
    32.         console.log(funcObj)
    33.     }
    35.     const obj = { name: 'global obj' }
    37.     func(obj)
    38.     console.log(obj)


    • Object.is

      1.   console.log(
      2.       // 0 == false              // => true
      3.       // 0 === false             // => false
      4.       // +0 === -0               // => true
      5.       // NaN === NaN             // => false
      6.       // Object.is(+0, -0)       // => false
      7.       // Object.is(NaN, NaN)     // => true
      8.   )


    • Proxy


      • 为对象设置访问代理器

      • 监视到对象的读写过程

      • vue3使用proxy实现数据内部的响应

      • defineProperty只能监视属性的读写

      • Proxy能够监视到更多对象操作，比如delete操作、对对象中方法的调用

      • proxy handler方法，如下图

    proxy方法.png


    • proxy能更好的支持数组对象的监视

      1. // const person = {
      2. //   name: 'zce',
      3. //   age: 20
      4. // }
      6. // const personProxy = new Proxy(person, {
      7. //   // 监视属性读取
      8. //   get (target, property) {
      9. //     return property in target ? target[property] : 'default'
      10. //     // console.log(target, property)
      11. //     // return 100
      12. //   },
      13. //   // 监视属性设置
      14. //   set (target, property, value) {
      15. //     if (property === 'age') {
      16. //       if (!Number.isInteger(value)) {
      17. //         throw new TypeError(`${value} is not an int`)
      18. //       }
      19. //     }
      21. //     target[property] = value
      22. //     // console.log(target, property, value)
      23. //   }
      24. // })
      26. // personProxy.age = 100
      28. // personProxy.gender = true
      30. // console.log(personProxy.name)
      31. // console.log(personProxy.xxx)
      33. // Proxy 对比 Object.defineProperty() ===============
      35. // 优势1：Proxy 可以监视读写以外的操作 --------------------------
      37. // const person = {
      38. //   name: 'zce',
      39. //   age: 20
      40. // }
      42. // const personProxy = new Proxy(person, {
      43. //   deleteProperty (target, property) {
      44. //     console.log('delete', property)
      45. //     delete target[property]
      46. //   }
      47. // })
      49. // delete personProxy.age
      50. // console.log(person)
      52. // 优势2：Proxy 可以很方便的监视数组操作 --------------------------
      54. // const list = []
      56. // const listProxy = new Proxy(list, {
      57. //   set (target, property, value) {
      58. //     console.log('set', property, value)
      59. //     target[property] = value
      60. //     return true // 表示设置成功
      61. //   }
      62. // })
      64. // listProxy.push(100)
      65. // listProxy.push(100)
      67. // 优势3：Proxy 不需要侵入对象 --------------------------
      69. // const person = {}
      71. // Object.defineProperty(person, 'name', {
      72. //   get () {
      73. //     console.log('name 被访问')
      74. //     return person._name
      75. //   },
      76. //   set (value) {
      77. //     console.log('name 被设置')
      78. //     person._name = value
      79. //   }
      80. // })
      81. // Object.defineProperty(person, 'age', {
      82. //   get () {
      83. //     console.log('age 被访问')
      84. //     return person._age
      85. //   },
      86. //   set (value) {
      87. //     console.log('age 被设置')
      88. //     person._age = value
      89. //   }
      90. // })
      92. // person.name = 'jack'
      94. // console.log(person.name)
      96. // Proxy 方式更为合理
      97. const person2 = {
      98. name: 'zce',
      99. age: 20
      100. }
      102. const personProxy = new Proxy(person2, {
      103. get (target, property) {
      104.    console.log('get', property)
      105.    return target[property]
      106. },
      107. set (target, property, value) {
      108.    console.log('set', property, value)
      109.    target[property] = value
      110. }
      111. })
      113. personProxy.name = 'jack'
      115. console.log(personProxy.name)

    • Reflect
      • 统一的对象操作API，属于一个静态类
      • Reflect成员方法就是Proxy处理对象的默认实现
    1.   // const obj = {
    2.   //   foo: '123',
    3.   //   bar: '456'
    4.   // }
    6.   // const proxy = new Proxy(obj, {
    7.   //   get (target, property) {
    8.   //     console.log('watch logic~')
    10.   //     return Reflect.get(target, property)
    11.   //   }
    12.   // })
    14.   // console.log(proxy.foo)
    16.   const obj = {
    17.   name: 'zce',
    18.   age: 18
    19.   }
    21.   // console.log('name' in obj)
    22.   // console.log(delete obj['age'])
    23.   // console.log(Object.keys(obj))
    25.   console.log(Reflect.has(obj, 'name'))
    26.   console.log(Reflect.deleteProperty(obj, 'age'))
    27.   console.log(Reflect.ownKeys(obj))


    • class static

      1.   class Person {
      2.       constructor (name) {
      3.           this.name = name
      4.       }
      6.       say () {
      7.           console.log(`hi, my name is ${this.name}`)
      8.       }
      10.       static create (name) {
      11.           return new Person(name)
      12.       }
      13.   }
      15.   // const p = new Person('tom')
      16.   // p.say()
      18.   const tom = Person.create('tom')
      19.   tom.say()


    • extend

      1.   class Person {
      2.       constructor (name) {
      3.           this.name = name
      4.       }
      6.       say () {
      7.           console.log(`hi, my name is ${this.name}`)
      8.       }
      9.   }
      11.   class Student extends Person {
      12.       constructor (name, number) {
      13.           super(name) // 父类构造函数
      14.           this.number = number
      15.       }
      17.       hello () {
      18.           super.say() // 调用父类成员
      19.           console.log(`my school number is ${this.number}`)
      20.       }
      21.   }
      23.   const s = new Student('jack', '100')
      24.   s.hello()


    • Set 数据结构

      • 集合，与数组类似，但内部成员不允许重复

      • 如果重复添加，会忽略 ```javascript const s = new Set()

        s.add(1).add(2).add(3).add(4).add(2)

        // console.log(s)

        // s.forEach(i => console.log(i))

        // for (let i of s) { // console.log(i) // }

        // console.log(s.size)

        // console.log(s.has(100))

        // console.log(s.delete(3)) console.log(s) //Set { 1, 2, 3, 4 }

    1. // s.clear()
    2. // console.log(s)
    4. // 应用场景：数组去重
    6. const arr = [1, 2, 1, 3, 4, 1]
    8. // const result = Array.from(new Set(arr))
    9. const result = [...new Set(arr)]    
    11. console.log(result)     //[ 1, 2, 3, 4 ]
    13. // 弱引用版本 WeakSet
    14. // 差异就是 Set 中会对所使用到的数据产生引用
    15. // 即便这个数据在外面被消耗，但是由于 Set 引用了这个数据，所以依然不会回收
    16. // 而 WeakSet 的特点就是不会产生引用，
    17. // 一旦数据销毁，就可以被回收，所以不会产生内存泄漏问题。
    3. - <br />map<br />
    4. ```javascript
    5.     // const obj = {}
    6.     // obj[true] = 'value'
    7.     // obj[123] = 'value'
    8.     // obj[{ a: 1 }] = 'value'
    10.     // console.log(Object.keys(obj))
    11.     // console.log(obj['[object Object]'])
    13.     const m = new Map()
    15.     const tom = { name: 'tom' }
    17.     m.set(tom, 90)
    19.     console.log(m)      //Map { { name: 'tom' } => 90 }
    21.     console.log(m.get(tom))     //90
    23.     // m.has()
    24.     // m.delete()
    25.     // m.clear()
    27.     m.forEach((value, key) => {
    28.         console.log(value, key)     //90 { name: 'tom' }
    29.     })
    31.     // 弱引用版本 WeakMap
    32.     // 差异就是 Map 中会对所使用到的数据产生引用
    33.     // 即便这个数据在外面被消耗，但是由于 Map 引用了这个数据，所以依然不会回
    34.     // 一旦数据销毁，就可以被回收，所以不会产生内存泄漏问题。

    • Symbol
      • 一种全新的原始数据类型
      • 表示一个独一无二的值
      • 从2015年开始，对象可以直接使用Symbol类型的值作为属性名
      • 最主要的作用就是为对象添加独一无二的属性名
    1.   // Symbol 数据类型
    3.   // 场景1：扩展对象，属性名冲突问题
    5.   // // shared.js ====================================
    7.   // const cache = {}
    9.   // // a.js =========================================
    11.   // cache['a_foo'] = Math.random()
    13.   // // b.js =========================================
    15.   // cache['b_foo'] = '123'
    17.   // console.log(cache)
    19.   // =========================================================
    21.   // const s = Symbol()
    22.   // console.log(s)
    23.   // console.log(typeof s)
    25.   // 两个 Symbol 永远不会相等
    27.   // console.log(
    28.   //   Symbol() === Symbol()
    29.   // )
    31.   // Symbol 描述文本
    33.   // console.log(Symbol('foo'))
    34.   // console.log(Symbol('bar'))
    35.   // console.log(Symbol('baz'))
    37.   // 使用 Symbol 为对象添加用不重复的键
    39.   // const obj = {}
    40.   // obj[Symbol()] = '123'
    41.   // obj[Symbol()] = '456'
    42.   // console.log(obj)     //{ [Symbol()]: '123', [Symbol()]: '456' }
    44.   // 也可以在计算属性名中使用
    46.   // const obj = {
    47.   //   [Symbol()]: 123
    48.   // }
    49.   // console.log(obj)
    51.   // =========================================================
    53.   // 案例2：Symbol 模拟实现私有成员
    55.   // a.js ======================================
    57.   const name = Symbol()
    58.   const person = {
    59.   [name]: 'zce',
    60.   say () {
    61.       console.log(this[name])
    62.   }
    63.   }
    64.   // 只对外暴露 person
    66.   // b.js =======================================
    68.   // 由于无法创建出一样的 Symbol 值，
    69.   // 所以无法直接访问到 person 中的「私有」成员
    70.   // person[Symbol()]         
    71.   person.say()

    • Symbol.for(‘xxx’)
      • 维护了一个全局的注册表，为我们的字符串和symbol值提供了一个一一对应的关系

    • Symbol.toStringTag 是内置的一个Symbol常量,为对象实现迭代器时，会经常用到
    1.   // Symbol 补充
    3.   // console.log(
    4.   //   // Symbol() === Symbol()
    5.   //   Symbol('foo') === Symbol('foo')
    6.   // )
    8.   // Symbol 全局注册表 ----------------------------------------------------
    10.   // const s1 = Symbol.for('foo')
    11.   // const s2 = Symbol.for('foo')
    12.   // console.log(s1 === s2)
    14.   // console.log(
    15.   //   Symbol.for(true) === Symbol.for('true')
    16.   // )
    18.   // 内置 Symbol 常量 ---------------------------------------------------
    20.   // console.log(Symbol.iterator)
    21.   // console.log(Symbol.hasInstance)
    23.   // const obj = {
    24.   //   [Symbol.toStringTag]: 'XObject'
    25.   // }
    26.   // console.log(obj.toString())
    28.   // Symbol 属性名获取 ---------------------------------------------------
    30.   const obj = {
    31.       [Symbol()]: 'symbol value',
    32.       foo: 'normal va1lue'
    33.   }
    35.   for (var key in obj) {
    36.       console.log(key)    //foo
    37.   }
    38.   console.log(obj);       //{ foo: 'normal value', [Symbol()]: 'symbol value' }
    39.   console.log(Object.keys(obj))       //[ 'foo' ]
    40.   console.log(JSON.stringify(obj))    //{"foo":"normal value"}
    42.   console.log(Object.getOwnPropertySymbols(obj))      //[ Symbol() ]


    • for-of

      1.   // for...of 循环
      3.   const arr = [100, 200, 300, 400]
      5.   for (const item of arr) {
      6.       console.log(item)
      7.   }
      9.   // for...of 循环可以替代 数组对象的 forEach 方法
      11.   arr.forEach(item => {
      12.       console.log(item)
      13.   })
      15.   // for (const item of arr) {
      16.   //   console.log(item)
      17.   //   if (item > 100) {
      18.   //     break
      19.   //   }
      20.   // }
      22.   // forEach 无法跳出循环，必须使用 some 或者 every 方法
      24.   // arr.forEach() // 不能跳出循环
      25.   // arr.some()
      26.   // arr.every()
      28.   // 遍历 Set 与遍历数组相同
      30.   const s = new Set(['foo', 'bar'])
      32.   for (const item of s) {
      33.       console.log(item)
      34.   }
      36.   // 遍历 Map 可以配合数组结构语法，直接获取键值
      38.   const m = new Map()
      39.   m.set('foo', '123')
      40.   m.set('bar', '345')
      42.   for (const [key, value] of m) {
      43.       console.log(key, value)
      44.   }
      46.   // 普通对象不能被直接 for...of 遍历
      48.   const obj = { foo: 123, bar: 456 }
      50.   for (const item of obj) {
      51.       console.log(item)
      52.   }


    • 迭代器（Iterator）

      1.   // 迭代器（Iterator）
      3.   const set = new Set(['foo', 'bar', 'baz11'])
      5.   const iterator = set[Symbol.iterator]()
      7.   // console.log(iterator.next())
      8.   // console.log(iterator.next())
      9.   // console.log(iterator.next())
      10.   // console.log(iterator.next())
      11.   // console.log(iterator.next())
      13.   while (true) {
      14.       const current = iterator.next()
      15.       if (current.done) {
      16.           break // 迭代已经结束了，没必要继续了
      17.       }
      18.       console.log(current.value)
      19.   }


    • 实现可迭代接口（Iterable）

      1.   // const obj = {
      2.   //   [Symbol.iterator]: function () {
      3.   //     return {
      4.   //       next: function () {
      5.   //         return {
      6.   //           value: 'zce',
      7.   //           done: true
      8.   //         }
      9.   //       }
      10.   //     }
      11.   //   }
      12.   // }
      14.   const obj = {
      15.       store: ['foo', 'bar', 'baz'],
      17.       [Symbol.iterator]: function () {
      18.           let index = 0
      19.           const self = this
      21.           return {
      22.               next: function () {
      23.                   const result = {
      24.                   value: self.store[index],
      25.                   done: index >= self.store.length
      26.                   }
      27.                   index++
      28.                   return result
      29.               }
      30.           }
      31.       }
      32.   }
      34.   for (const item of obj) {
      35.       console.log('循环体', item)
      36.       //循环体 foo
      37.       //循环体 bar
      38.       //循环体 baz
      39.   }


    • 迭代器设计模式

    1.     // 迭代器设计模式
    3.     // 场景：你我协同开发一个任务清单应用
    5.     // 我的代码 ===============================
    7.     const todos = {
    8.     life: ['吃饭', '睡觉', '打豆豆'],
    9.     learn: ['语文', '数学', '外语'],
    10.     work: ['喝茶'],
    12.     // 提供统一遍历访问接口
    13.     each: function (callback) {
    14.         const all = [].concat(this.life, this.learn, this.work)
    15.         for (const item of all) {
    16.             callback(item)
    17.         }
    18.     },
    20.     //提供迭代器（ES2015 统一遍历访问接口）
    21.         [Symbol.iterator]: function () {
    22.             const all = [...this.life, ...this.learn, ...this.work]
    23.             let index = 0
    24.             return {
    25.             next: function () {
    26.                 return {
    27.                 value: all[index],
    28.                 done: index++ >= all.length
    29.                 }
    30.             }
    31.             }
    32.         }
    33.     }
    36.     todos.each(function (item) {
    37.         console.log(item)
    38.     })
    40.     console.log('-------------------------------')
    42.     for (const item of todos) {
    43.         console.log(item)
    44.     }
    1.     // Generator 应用
    3.     // 案例1：发号器
    5.     function * createIdMaker () {
    6.         let id = 1
    7.         while (true) {
    8.             yield id++
    9.         }
    10.     }
    12.     const idMaker = createIdMaker()
    14.     console.log(idMaker.next().value)
    15.     console.log(idMaker.next().value)
    16.     console.log(idMaker.next().value)
    17.     console.log(idMaker.next().value)
    19.     // 案例2：使用 Generator 函数实现 iterator 方法
    21.     const todos = {
    22.         life: ['吃饭', '睡觉', '打豆豆'],
    23.         learn: ['语文', '数学', '外语'],
    24.         work: ['喝茶'],
    25.         [Symbol.iterator]: function * () {
    26.                 const all = [...this.life, ...this.learn, ...this.work]
    27.                 for (const item of all) {
    28.                 yield item
    29.             }
    30.         }
    31.     }
    33.     for (const item of todos) {
    34.         console.log(item)
    35.     }

    • ES Modules
      • 语言层面的模块化标准
      • 会在模块那里详解


    • ES2016

      • Array.prototype.includes

        1. //旧
        2. const arr = ['foo', 1, NaN, false];
        4. console.log(arr.indexOf('bar')) //-1
        5. console.log(arr.includes('foo'))    true

      • 指数运算符

        1. //2的10次方
        2. console.log(Math.pow(2,10));
        4. console.log(2 ** 10);


    • ES2017
      ```javascript const obj = { 

      1.   foo: 'value1',
      2.   bar: 'value2'

      }

      //Object.values() //Object.entries() //Object.getOwnPropertyDescriptors() console.log(Object.values(obj)); //[‘value1’, ‘value2’]

      console.log(Object.entries(obj)); //[[‘foo’, ‘value1’], [‘bar’, ‘value2]]

      for(const [key, value] of Object.entries(obj)) {

      1.   console.log(key,value); 
      2.   //for value1
      3.   //bar value2

      }

      console.log(new Map(Object.entries(obj))) //Map { ‘foo’ => ‘value1’, ‘bar’ => ‘value2’ }

    1. const p1 = {
    2.     firName: 'Lei',
    3.     laName: 'Wang',
    4.     get fullName() {
    5.         return this.firName + ' ' + this.laName
    6.     }
    7. }
    9. const des = Object.getOwnPropertyDescriptors(p1);
    11. const p2 = Object.defineProperties({}, des) 
    12. p2.firName = "zce"
    13. console.log(p2.fullName)
    15. //字符串填充方法
    16. //String.prototype.padStart/padEnd
    17. const books = {
    18.     html: 5,
    19.     css: 16,
    20.     javascript: 128
    21. }
    23. for(const [name, count] of Object.entries(books)) {
    24.     console.log(`${name.padEnd(16, '-')} | ${count.toString().padStart(3, '0')}`);
    25. }
    27. //在函数参数中添加尾逗号
    28. //如果想重新排列数组顺序，调整起来容易
    29. //如果修改元素中个数，方便插入
    30. const arr = {
    31.     100,
    32.     200,
    33.     300,
    34. }
    36. //Async / Await
    37. //解决异步深嵌

    ```