JavaScript高级 ES6新特性

ES6~ES13新特性

- 1. ECMA新描述概念
- - 1. 概念区别回顾
  - 2. 词法环境
  - 3. 环境记录
  - 4. 内存图的表示
- 2. let、const的使用
- - 1. 基础的使用
  - 2. 作用域提升
  - 3. 暂时性死区 (TDZ)
  - 4. window 添加属性的区别
  - 5. 块级作用域的使用
  - 6. var、let、const的选择
- 3. 模板字符串的详解
- 4. ES6函数的增强用法
- - 1. 函数的默认参数
  - 2. 函数的剩余参数
  - 3. 箭头函数的补充
- 5. 展开语法
- 6. 进制表示
- 7. Symbol
- 8. Set 集合
- 9. Map 映射

1. ECMA新描述概念

1. 概念区别回顾

ES6 之前的概念

执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；
执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文
变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明
全局对象：Global Object，全局执行上下文关联的VO对象
激活对象：Activation Object，函数执行上下文关联的VO对象
作用域链：scope chain，作用域链，用于关联指向上下文的变量查找

ES6 概念描述

基本思路是相同的，只是对于一些词汇的描述发生了改变，执行上下文栈和执行上下文也是相同的

词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符

2. 词法环境

一个词法环境是由环境记录（Environment Record）和一个外部词法环境（outer Lexical Environment）组成，经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来

在这里插入图片描述

一个执行上下文会关联两个词法环境进行处理变量

在这里插入图片描述

LexicalEnvironment用于处理let、const声明的标识符

在这里插入图片描述

而VariableEnvironment用于处理var和function声明的标识符

在这里插入图片描述

3. 环境记录

环境记录包含有声明式环境记录和对象环境记录

声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句

对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来

在这里插入图片描述

4. 内存图的表示

    function foo() {
      console.log("foo function")
    }

    var message = "Hello World"

    foo()

在这里插入图片描述

2. let、const的使用

1. 基础的使用

在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const

从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量，const 它表示保存的数据一旦被赋值，就不能被修改，但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容

    // ES6之前
    var message1 = "Hello World"
    message1 = "Hello Coderwhy"
    message1 = "aaaaa"
    console.log(message1)

    // ES6开始
    // 1.let
    let message2 = "你好, 世界"
    message2 = "你好, why"
    message2 = 123
    console.log(message2)

    // 2.const
    // const message3 = "nihao, shijie"
    // message3 = "nihao, why"

    // 赋值引用类型
    const info = {
      name: "why",
      age: 18
    }
    // info = {}
    info.name = "kobe"
    console.log(info)

而且 let、const不允许重复声明变量

    // 1.var变量可以重复声明
    // var message = "Hello World"
    // var message = "你好, 世界"


    // 2.let/const不允许变量的重复声明
    // var address = ""
    let address = "广州市"
    // let address = "上海市"
    const info = {}
    // const info = {}

2. 作用域提升

let、const和var的另一个重要区别是作用域提升，我们知道var声明的变量是会进行作用域提升的，但是如果我们使用let声明的变量，在声明之前访问会报错，这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值

在这里插入图片描述

    // 1.var声明的变量会进行作用域的提升
    // console.log(message)
    // var message = "Hello World"

    // 2.let/const声明的变量: 没有作用域提升
    // console.log(address)
    console.log(address)
    let address = "广州市"
    const info = {}

let / const 声明的变量在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的

所以总的来说，是let、const没有进行作用域提升，但是会在解析阶段被创建出来

3. 暂时性死区 (TDZ)

我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的，从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区

    // 1.暂时性死区
    // function foo() {
    //   console.log(bar, baz)

    //   console.log("Hello World")
    //   console.log("你好 世界")
    //   let bar = "bar"
    //   let baz = "baz"
    // }
    // foo()

    // 2.暂时性死区和定义的位置没有关系, 和代码执行的顺序有关系
    // function foo() {
    //   console.log(message)
    // }

    // let message = "Hello World"
    // foo()
    // console.log(message)

    // 3.暂时性死区形成之后, 在该区域内这个标识符不能访问
    let message = "Hello World"
    function foo() {
      console.log(message)

      const message = "哈哈哈哈"
    }

    foo()

4. window 添加属性的区别

在全局通过var来声明一个变量，事实上会在window上添加一个属性，但是let、const是不会给window上添加任何属性的

    // 1.var定义的变量是会默认添加到window上的
    // var message = "Hello World"
    // var address = "广州市"

    // console.log(window.message)
    // console.log(window.address)

    // 2.let/const定义的变量不会添加到window上的
    // let message = "Hello World"
    // let address = "广州市"
    
    // console.log(window.message)
    // console.log(window.address)

    // 3.let/var分别声明变量
    var message = "Hello World"
    let adress = "广州市"

    function foo() {
      debugger
    }
    foo()

5. 块级作用域的使用

ES5中，JavaScript只会形成两个作用域：全局作用域和函数作用域，ES5中放到一个代码块中定义的变量，外面是可以访问的

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的，但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的，这是因为引擎会对函数的声明进行特殊的处理，允许像var那样在外界直接访问

<body>

  <button>按钮0</button>
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <script>
    const btnEls = document.querySelectorAll("button")
    // [btn1, btn2, btn3, btn4]
    // for (var i = 0; i < btnEls.length; i++) {
    //   var btnEl = btnEls[i];
    //   // btnEl.index = i
    //   (function(m) {
    //     btnEl.onclick = function() {
    //       debugger
    //       console.log(`点击了${m}按钮`)
    //     }
    //   })(i)
    // }

    for (let i = 0; i < btnEls.length; i++) {
      const btnEl = btnEls[i];
      btnEl.onclick = function() {
        console.log(`点击了${i}按钮`)
      }
    }
    // console.log(i)
  </script>

</body>

6. var、let、const的选择

对于var的使用：我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题，其实是JavaScript在设计之初的一种语言缺陷

对于let和const来说，是目前开发中推荐使用的，我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；

3. 模板字符串的详解

ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接

首先，我们会使用 `` 符号来编写字符串，称之为模板字符串，其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容

    const name = "why"
    const age = 18

    // 1.基本用法
    // 1.1.ES6之前
    // const info = "my name is" + name + ", age is " + age

    // 1.2.ES6之后
    const   = `my name is ${name}, age is ${age}`
    console.log(info)

函数使用``进行调用

    // 2.标签模板字符串的用法
    function foo(...args) {
      console.log("参数:", args)
    }

    // foo("why", 18, 1.88)
    // 调用函数 模版字符串
    foo`my name is ${name}, age is ${age}, height is ${1.88}`

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量

模板字符串被拆分了
第一个元素是数组，是被模块字符串拆分的字符串组合
后面的元素是一个个模块字符串传入的内容

在这里插入图片描述

4. ES6函数的增强用法

1. 函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：

传入了参数，那么使用传入的参数；
没有传入参数，那么使用一个默认值；

    // 注意: 默认参数是不会对null进行处理的
    function foo(arg1 = "我是默认值", arg2 = "我也是默认值") {
      // 1.两种写法不严谨
      // 默认值写法一:
      // arg1 = arg1 ? arg1: "我是默认值"

      // 默认值写法二:
      // arg1 = arg1 || "我是默认值"

      // 2.严谨的写法
      // 三元运算符
      // arg1 = (arg1 === undefined || arg1 === null) ? "我是默认值": arg1
      
      // ES6之后新增语法: ??
      // arg1 = arg1 ?? "我是默认值"

      // 3.简便的写法: 默认参数
      console.log(arg1)
    }

    foo(123, 321)
    foo()
    foo(0)
    foo("")
    foo(false)
    foo(null)
    foo(undefined)

另外参数的默认值我们通常会将其放到最后，但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配

    // 1.注意一: 有默认参数的形参尽量写到后面
    // 2.有默认参数的形参, 是不会计算在length之内(并且后面所有的参数都不会计算在length之内)
    // 3.剩余参数也是放到后面(默认参数放到剩余参数的前面)
    function foo(age, name = "why", ...args) {
      console.log(name, age, args)
    }

    foo(18, "abc", "cba", "nba")

    console.log(foo.length)

默认值也可以和解构一起来使用

    // const obj = { name: "why" }
    // const { name = "kobe", age = 18 } = obj

    // function foo(obj = { name: "why", age: 18 }) {
    //   console.log(obj.name, obj.age)
    // }

    function foo({ name, age } = { name: "why", age: 18 }) {
      console.log(name, age)
    }

    function foo({ name = "why", age = 18 } = {}) {
      console.log(name, age)
    }

    foo()

而在ES6中，我们允许给函数一个默认值，但是默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了

2. 函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中，如果最后一个参数是 … 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组

剩余参数和arguments的区别

 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参
 arguments对象不是一个真正的数组，而rest参数是一个真正的数组，可以进行数组的所有操作；
 arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构，而rest参数是ES6中提供并且希望以此来替代arguments的；

注意：剩余参数必须放到最后一个位置，否则会报错

3. 箭头函数的补充

箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象

箭头函数也不绑定this、arguments、super参数

    // 1.function定义的函数是有两个原型的:
    // function foo() {}
    // console.log(foo.prototype) // new foo() -> f.__proto__ = foo.prototype
    // console.log(foo.__proto__) // -> Function.prototype

    // 2.箭头函数是没有显式原型
    // 在ES6之后, 定义一个类要使用class定义
    var bar = () => {}
    // console.log(bar.__proto__ === Function.prototype)
    // 没有显式原型
    // console.log(bar.prototype)
    // var b = new bar()

5. 展开语法

可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开

还可以在构造字面量对象时, 将对象表达式按key-value的方式展开

    // 1.基本演练
    // ES6
    const names = ["abc", "cba", "nba", "mba"]
    const str = "Hello"

    // const newNames = [...names, "aaa", "bbb"]
    // console.log(newNames)

    function foo(name1, name2, ...args) {
      console.log(name1, name2, args)
    }

    foo(...names)
    foo(...str)

    // ES9(ES2018)
    const obj = {
      name: "why",
      age: 18
    }
    // 不可以这样来使用
    // foo(...obj) // 在函数的调用时, 用展开运算符, 将对应的展开数据, 进行迭代
    // 可迭代对象: 数组/string/arguments

    const info = {
      ...obj,
      height: 1.88,
      address: "广州市"
    }
    console.log(info)

注意：展开运算符其实是一种浅拷贝

js 本身并没有实现深拷贝机制

    const obj = {
      name: "why",
      age: 18,
      height: 1.88,
      friend: {
        name: "curry"
      }
    }

    // 1.引用赋值
    // const info1 = obj

    
    // 2.浅拷贝
    // const info2 = {
    //   ...obj
    // }
    // info2.name = "kobe"
    // console.log(obj.name)
    // console.log(info2.name)
    // info2.friend.name = "james"
    // console.log(obj.friend.name)


    // 3.深拷贝
    // 方式一: 第三方库
    // 方式二: 自己实现
    // function deepCopy(obj) {}
    // 方式三: 利用先有的js机制, 实现深拷贝JSON
    const info3 = JSON.parse(JSON.stringify(obj))
    console.log(info3.friend.name)
    info3.friend.name = "james"
    console.log("info3.friend.name:", info3.friend.name)
    console.log(obj.friend.name)

6. 进制表示

在ES6中规范了二进制和八进制的写法

另外在ES2021新增特性：数字过长时，可以使用_作为连接符

    // 1.进制
    console.log(100)
    console.log(0b100)
    console.log(0o100)
    console.log(0x100)

    // 2.长数字的表示
    const money = 100_00_00_0000_00_00

7. Symbol

在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突，比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性

Symbol就是为了解决上面的问题，用来生成一个独一无二的值，Symbol值是通过Symbol函数来生成的，生成后可以作为属性名

    // ES6之前存在的问题
    const obj = {
      name: "why",
      fn: "aaa"
    }

    // 添加一个新的属性 name
    function foo(obj) {
      obj.why = function() {}
    }
    foo(obj)
    console.log(obj.fn)

Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；

    // ES6之后可以使用Symbol生成一个独一无二的值
    const s1 = Symbol()
    const s2 = Symbol()
    const obj = {
      // 使用计算属性
      [s1]: "aaa" 
    }

    obj[s2] = "bbb"

    function foo(obj) {
      // 在使用中添加一个函数， 使用后删除可以使用 Symbol 
      const sKey = Symbol()
      obj[sKey] = function() {}
      delete obj[sKey]
    }

    foo(obj)

Symbol 作为属性的 key

    const s1 = Symbol() // aaa
    const s2 = Symbol() // bbb

    // 1.加入对象中
    const obj = {
      name: "why",
      age: 18,
      [s1]: "aaa",
      [s2]: "bbb"
    }

    const obj1 = {}
    obj1[s1] = "aaa"
    obj2[s2] = "bbb"

    const obj2 = {}
    Object.defineProperty(obj, s1, {
      value: "aaa"
    })

获取symbol对应的key

    console.log(Object.keys(obj))
    console.log(Object.getOwnPropertySymbols(obj))
    const symbolKeys = Object.getOwnPropertySymbols(obj)
    for (const key of symbolKeys) {
      console.log(obj[key])
    }

我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性

    // 3.description
    // 3.1.Symbol函数直接生成的值, 都是独一无二
    const s3 = Symbol("ccc")
    console.log(s3.description)
    const s4 = Symbol(s3.description)
    console.log(s3 === s4) // false

	// 如果我们现在就是想创建相同的Symbol应
    // 如果相同的key, 通过Symbol.for可以生成相同的Symbol值
    const s5 = Symbol.for("ddd")
    const s6 = Symbol.for("ddd")
    console.log(s5 === s6) // true

    // 获取传入的key
    console.log(Symbol.keyFor(s5))

8. Set 集合

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重

    // 1.创建Set
    const set = new Set()
    console.log(set)

    // 2.添加元素
    set.add(10)
    set.add(22)
    set.add(35)
    set.add(22)
    console.log(set)

    const info = {}
    const obj = {name: "obj"}
    set.add(info)
    set.add(obj)
    set.add(obj)
    console.log(set)

    // 3.应用场景: 数组的去重
    const names = ["abc", "cba", "nba", "cba", "nba"]
    // const newNames = []
    // for (const item of names) {
    //   if (!newNames.includes(item)) {
    //     newNames.push(item)
    //   }
    // }
    // console.log(newNames)
    const newNamesSet = new Set(names)
    const newNames = Array.from(newNamesSet)
    console.log(newNames)

    // 4.Set的其他属性和方法
    // 属性
    console.log(set.size)
    // 方法
    // 4.1. add方法
    set.add(100)
    console.log(set)
    // 4.2. delete方法
    set.delete(obj)
    console.log(set)
    // 4.3. has方法
    console.log(set.has(info))
    // 4.4. clear方法
    // set.clear()
    // console.log(set)
    // 4.5. forEach
    set.forEach(item => console.log(item))

    // 5.set支持for...of
    for (const item of set) {
      console.log(item)
    }

WeakSet中只能存放对象类型，不能存放基本数据类型

WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收

    // 1.Weak Reference(弱引用)和Strong Reference(强引用)
    let obj1 = { name: "why" }
    let obj2 = { name: "kobe" }
    let obj3 = { name: "jame" }

    // let arr = [obj1, obj2, obj3]
    // obj1 = null
    // obj2 = null
    // obj3 = null

    // const set = new Set(arr)
    // arr = null

    // 2.WeakSet的用法
    // 2.1.和Set的区别一: 只能存放对象类型
    const weakSet = new WeakSet()
    weakSet.add(obj1)
    weakSet.add(obj2)
    weakSet.add(obj3)

    // 2.2.和Set的区别二: 对对象的引用都是弱引用


    // 3.WeakSet的应用
    const pWeakSet = new WeakSet()
    class Person {
      constructor() {
        pWeakSet.add(this)
      }

      running() {
        if (!pWeakSet.has(this)) {
          console.log("Type error: 调用的方式不对")
          return
        }
        console.log("running~")
      }
    }

    let p = new Person()
    // p = null
    p.running()
    const runFn = p.running
    runFn()
    const obj = { run: runFn }
    obj.run()

9. Map 映射

另外一个新增的数据结构是Map，用于存储映射关系

const info = { name: "why" }
    const info2 = { age: 18 }

    // 1.对象类型的局限性: 不可以使用复杂类型作为key
    // const obj = {
    //   address: "北京市",
    //   [info]: "哈哈哈",
    //   [info2]: "呵呵呵"
    // }
    // console.log(obj)

    // 2.Map映射类型
    const map = new Map()
    map.set(info, "aaaa")
    map.set(info2, "bbbb")
    console.log(map)

    // 3.Map的常见属性和方法
    // console.log(map.size)
    // 3.1. set方法, 设置内容
    map.set(info, "cccc")
    console.log(map)
    // 3.2. get方法, 获取内容
    // console.log(map.get(info))
    // 3.3. delete方法, 删除内容
    // map.delete(info)
    // console.log(map)
    // 3.4. has方法, 判断内容
    // console.log(map.has(info2))
    // 3.5. clear方法, 清空内容
    // map.clear()
    // console.log(map)
    // 3.6. forEach方法
    // map.forEach(item => console.log(item))

    // 4.for...of遍历
    for (const item of map) {
      const [key, value] = item
      console.log(key, value)
    }

WeakMap的key只能使用对象，不接受其他的类型作为key

WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象

    let obj1 = { name: "why" }
    let obj2 = { name: "kobe" }

    // 1.WeakMap的基本使用
    const weakMap = new WeakMap()
    // weakMap.set(123, "aaa")
    weakMap.set(obj1, "aaa")
    weakMap.set(obj2, "bbb")

    obj1 = null
    obj2 = null