javaScript的语言本身。
javaScript的标准化规范，只提供了最基本的语法。
JavaScript浏览器中的组成.png
JavaScript在node中的组成.png

  • 2015年开始ES保持每年一个版本的迭代

ES2015

  • 概述
    • 相比于上一个版本ES5.1变化较大
    • 命名规则发生变化
  • 重大变化分类
    • 解决原有语法上的一些问题或者不足
    • 对原有语法进行增强
    • 全新的对象、全新的方法、全新的功能
    • 全新的数据类型和数据结构

let与块级作用域

  • let声明的变量只在最近的{}，即程序块中有效
  • let声明的变量不会提升

const

  • 在let基础上多了一个只读特性，一旦声明就不可以修改
  • 声明的时候必须赋初始值
  • 不能改变的是引用数据类型的内存地址

解构

  • 数组的解构 ```javascript const arr = [100, 200, 300]

const [, ,baz] = arr console.log(baz)

const [foo,…rest] = arr

const [foo, bar, baz, more = ‘default value’] = arr

  2. - 对象的解构
  3. ```javascript
  4. const obj = { name: 'zce', age: 18 }
  6. const { name } = obj
  7. console.log(name) // zce
  9. const { name: objName } = obj // 重命名

模板字符串

  1. const str = "hello world"
  3. const strEs6 = `hello ES6`
  4. // 支持换行
  5. // 支持通过插值表达式${}插入变量值，或者进行运算
  7. //带标签的模板字符串
  8. const str = console.log`hello world`
  10. const name = 'tom'
  11. const gender = true
  13. function myTagFunc(strings, name, gender) {
  14.     console.log(strings, name, gender) // ['hey','is a ', '.']
  15.     //return 123
  16.     const sex = gender? 'man' : 'woman'
  17.     return strings[0] + name + string[1] + sex + string[2]
  18. }
  20. const result = MyTagFunc`hey, ${name} is a ${gender}.`
  21. console.log(result)

字符串的扩展方法

  • includes：是否包含某个内容
  • startsWith：以什么什么开头
  • endsWith：以什么什么结尾

形参列表扩展

  • 默认值

    1. function foo(enable = true) {
    2.   console.log(enable)
    3. }
    4. // 只会在不传参的时候增加默认值

  • 剩余参数 ```javascript // es5 使用arguments接受剩余参数

function foo (…args) { console.log(args) // [1, 2, 3, 4] } foo(1,2,3,4) // 只能出现在形参最后一位，只可以用一次

  2. <a name="91ddc809"></a>
  3. ### 展开数组
  5. ```javascript
  6. const arr = ["foo", "bar", "baz"]
  8. console.log(...arr)

箭头函数

  1. const inc = n => n+1
  3. console.log(inc(100))
  4. // 如果参数只有一位 括号可省略
  5. // 如果函数体只有一句，且是return语句 那么{} 和return 可以省略
  6. // 箭头函数不会改变this指向
  8. const person = {
  9.     name: 'tom',
  10.     sayHiAsync: function() {
  11.         setTimeout(() => {
  12.             console.log(this.name)
  13.         },0)
  14.     }
  15. }
  16. person.sayHiAsync()

this 指向问题

  • 沿着作用域向上找最近的一个function（不是箭头函数），看这个function是怎样执行的。
  • this的指向取决于所属function的调用方式，而不是定义。
  • function调用一般分为以下几种情况
    1. 作为函数调用，即：foo() 指向全局对象（globalThis）严格模式下是undefined。
    2. 作为方法调用，即：foo.bar() / foo.bar.baz() / foo[‘bar’] / foo0 指向最终调用这个方法的对象
    3. 作为构造函数调用，即：new Foo() 指向一个新对象 Foo {}
    4. 特殊调用，即：foo.call() foo.bind() foo.apply() 指向参数指定成员
  • 找不到所属function，就是全局对象（浏览器环境指向window，node环境指向global）

对象字面量增强

  • 变量名如果跟对象中属性名一致，那么就可以只写一次
  • 属性如果是函数那么可以将:function省略
  • 计算属性名：意思是可以直接以[]的形式当做对象的属性，而不需要后期再以对象[]的形式添加动态属性名

Object.assign

将多个源对象的属性复制到一个目标对象中

  1. const source = {
  2.     a:123,
  3.     b:123
  4. }
  6. const target = {
  7.     a: 456,
  8.     c: 456
  9. }
  11. const result = Object.assign(target, source)
  12. console.log(target) // { a: 123, c: 456, b: 123 }
  13. console.log(result === target) // true
  15. // 将后面的对象与第一个对象合并，覆盖掉第一个对象的重复属性的值
  16. // 返回的地址值与第一个对象地址值相同

Object.is

同值比较，大多时候还是使用全等来判断

Proxy

对象代理

  1. const person = {
  2.     name: 'zxc',
  3.     age: 20
  4. }
  6. const personProxy = new Proxy(person, {
  7.     get(target, property) {
  8.         // 返回值是外部访问的结果
  9.         // target指被访问的对象
  10.         // property 表示外部要访问的属性
  11.         return property in target? target[property] : "default"
  12.     },
  13.     set(target, property, value) {
  14.         // target 是代理的对象
  15.         // property是被外部访问的属性
  16.         // value是设置的值
  17.         // 可以在这里面做一些数据的校验。
  18.         target[property] = value
  19.     }
  20. })

  • 对比Object.defineProperty

    • object.defineProperty只能监视对象的属性的读写，而proxy能监视整个对象，能监听更多操作，例如删除对象中的属性。

      1. new Proxy(person, {
      2. deleteProperty(target, property){
      3.    delete target[property]
      4. }
      5. })

      proxy对象的监听方法.png

    • promise更好的支持数组对象的监视，defineProperty需要重写数组的操作方法来实现，Vuejs源码就是这么做的 ```javascript const list = []

const listProxy = new Proxy(list, { set (target, property, value) { // property就是数组下标 target[property] = value return true // 表示设置成功 } })

  2.    - proxy是以非侵入的方式监管了对象的读写
  4. <a name="Reflect"></a>
  5. ### Reflect
  7. > 静态类，封装了一系列对对象底层的操作，其成员方法就是Proxy处理对象的默认实现
  10. ```javascript
  11. const proxy = new Proxy(obj, {
  12.     get (target, property) {
  13.         return Reflect.get(target, property)
  14.     }
  15. })
  • 统一提供了一套用于操作对象的API ```javascript const obj = { name: ‘zce’,
    1.  age: 18
    }

// 以往对象的一些操作会涉及很多不同的api console.log(‘name’ in obj) delete obj[‘age’] Object.keys(obj)

// Reflect提供了统一的形式 Reflect.has(obj, ‘name’) Reflect.deleteProperty(obj,’age’) Reflect.ownKeys(obj)

  2. - [MDN中Reflect详解](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect)
  4. <a name="Promise"></a>
  5. ### Promise
  7. > 解决回调函数嵌套过多的问题，细节参考之前的JavaScript异步笔记
  10. <a name="0e702886"></a>
  11. ### Class类
  13. ```javascript
  14. // ES6之前 类的定义
  15. function Person (name) {
  16.     this.name = name
  17. }
  19. Person.prototype.say = function () {
  20.     console.log(`hi, my name is ${this.name}`)
  21. }
  23. var tom = new Person('Tom')
  24. tom.say()
  26. //ES6之后
  27. class Person{
  28.     constructor (name) {
  29.         this.name = name
  30.     }
  31.     say() {
  32.         console.log(`hi, my name is ${this.name}`)
  33.     }
  34. }

静态方法

static 关键词定义 类似于Java

  1. class Person{
  2.     constructor (name) {
  3.         this.name = name
  4.     }
  5.     say() {
  6.         console.log(`hi, my name is ${this.name}`)
  7.     }
  8.     static create (name) {
  9.         return new Person(name)
  10.         // 这里this不指向Person对象
  11.     }
  12. }

类的继承

  1. class Person{
  2.     constructor (name) {
  3.         this.name = name
  4.     }
  5.     say() {
  6.         console.log(`hi, my name is ${this.name}`)
  7.     }
  8. }
  10. class Student extends Person {
  11.     constructor (name, number) {
  12.         super(name)
  13.         this.number = number
  14.     }
  15.     hello () {
  16.         super.say()
  17.         console.log(`my school number is ${this.number}`)
  18.     }
  19. }

Set数据结构

类似数组，但是set里面不能有重复的值

  1. const s = new Set()
  2. s.add(1).add(2).add(3).add(4)
  4. s.forEach(i => console.log(i))
  6. for(let i of s) {
  7.     console.log(i)
  8. }
  10. console.log(s.size) // set长度
  11. s.has(1) // 是否包含某个值
  12. s.delete(1) // 删除某个值
  13. s.clear() 
  15. const arr = [1, 2, 3, 4, 5, 1]
  16. const result = Array.from(new Set(arr)) || [...new Set(arr)]

Map数据结构

与对象类似，键值对

  1. const obj = {}
  2. obj [true] = 'value'
  3. obj[123] = 'value'
  4. obj[{ a: 1 }]
  6. console.log(Object.keys(obj)) // ["true", "123", "[object Object]"]
  7. // 普通对象键值对 不管什么类型 都会被转变成字符串，会出现一些bug
  9. const m = new Map()
  10. const tom = { name: 'tom' }
  11. m.set(tom, 90)
  12. m.get(tom)
  14. m.has()
  15. m.delete()
  16. m.clear()
  18. m.forEach((value, key) => {
  20. })

Symbol

一种全新的原始数据类型，表示一种独一无二的值

  1. // 如果两个js文件操作同一个对象，可能会出现命名重复 从而覆盖掉别人的值
  2. // 最主要的作用就是为对象添加一个独一无二的值
  4. let obj = {}
  5. obj[Symbol("foo")] = "foo"
  7. const s1 = Symbol.for('foo')
  8. const s2 = Symbol.for('foo')
  9. s1 === s1 // true
  11. Symbol.for(true) === Symbol.for('true') // true
  13. symbol.iterator Symbol.hasInstance
  15. const obj = {
  16.     [Symbol.toStringTag]: 'XObject'
  17. }
  18. console.log(obj.toString())
  20. const obj = {
  21.     [Symbol()]: 'symbol value', // 这个属性名 遍历不出来 因此可用于私有化属性
  22.     foo: 'normal value'
  23. }
  24. Object.getOwnPropertySymbols()方法获取对象中的symbol属性名

For…of

可以遍历任何可被迭代的数据结构，有些数据原生不具备可迭代接口，需要实现可迭代接口， 可使用break终止遍历

  1. const m = new Map()
  2. m.set('foo', '123')
  3. m.set('bar', '345')
  5. for(const [key, value] of m) {
  6.     console.log(ket, value)
  7. }

可迭代接口

Iterable接口 可以被for of 的前提

  1. const arr = ["foo", "bar", "baz"]
  2. const iterator = arr[Symbol,iterator]()
  3. iterator.next() // {value: 'foo', done: false}
  5. // 实现可迭代接口
  6. const obj = {
  7.     store: ['foo', "bar", "baz"],
  8.     [Symbol.iterator]: function () {
  9.         let index = 0
  10.         const selt = this
  11.         return {
  12.             next: function () { 
  13.                 return result =  {
  14.                     value: self.store[index],
  15.                     done: index++ >= self.store.length
  16.                 }
  17.             }
  18.         }
  19.     }
  20. }
  22. // 迭代器模式
  23. const todos = {
  24.     life: ['吃饭', "睡觉", "写代码"],
  25.     learn: ['JavaScript', 'Java', 'C++']
  26. }
  27. // 可为todos实现可迭代接口来方便使用者取出对象中每一个属性的数组的每一位值
  28. const todos = {
  29.     life: ['吃饭', "睡觉", "写代码"],
  30.     learn: ['JavaScript', 'Java', 'C++'],
  31.     [Symbol.iterator]: function () {
  32.         let all = [...this.life, ...this.learn, ...this.work]
  33.         let index = 0
  34.         return {
  35.             next: function () {
  36.                 return {
  37.                     value: all[index],
  38.                     done: index++ >= all.length
  39.                 }
  40.             }
  41.         }
  42.     }
  44. }

生成器函数

Generator，避免回调函数嵌套太深

  1. const todos = {
  2.     life: ['吃饭', "睡觉", "写代码"],
  3.     learn: ['JavaScript', 'Java', 'C++'],
  4.     [Symbol.iterator]: function () {
  5.         let all = [...this.life, ...this.learn, ...this.work]
  6.         let index = 0
  7.         return {
  8.             next: function () {
  9.                 return {
  10.                     value: all[index],
  11.                     done: index++ >= all.length
  12.                 }
  13.             }
  14.         }
  15.     }
  16. }
  17. function * foo () {
  18.     console.log("111")
  19.     yield 100
  20.     console.log("222")
  21.     yield 200
  22. }
  24. const generator = foo()
  25. generator.next() // {value: 100, done: false}
  27. // 生成器函数应用
  28. const todos = {
  29.     life: ['吃饭', "睡觉", "写代码"],
  30.     learn: ['JavaScript', 'Java', 'C++'],
  31.     [Symbol.iterator]: function () {
  32.         let all = [...this.life, ...this.learn, ...this.work]
  33.         for( const item of all) {
  34.             yield item
  35.         }
  36.     }
  38. }

ES Modules

import… from …

ES2016

  • 数组的方法：includes，数组中是否存在某个值
  • 指数运算：Math.pow(2, 10) 2是底数，10是指数 新增的指数运算符：2 ** 10

ES2017

  • Object.values：返回的是对象中所有值的数组。
  • Object.entries：返回到的是数组，数组的每一位是键值对数组。new Map(Object.entries(obj))
  • Object.getOwnPropertyDescriptors：主要配合ES2015中对象的get set使用
  • String.prototype.padStart/padEnd：用给定字符串去填充目标字符串的开始和结束，直到字符串达到指定长度
  • 函数参数，数组中使用尾逗号
  • Async/Await：Promise语法糖