ES6新特性

新的ECMA代码执行描述

◼ 在执行学习JavaScript代码执行过程中，我们学习了很多ECMA文档的术语：
    执行上下文栈：Execution Context Stack，用于执行上下文的栈结构；
    执行上下文：Execution Context，代码在执行之前会先创建对应的执行上下文；
    变量对象：Variable Object，上下文关联的VO对象，用于记录函数和变量声明；
    全局对象：Global Object，全局执行上下文关联的VO对象；
    激活对象：Activation Object，函数执行上下文关联的VO对象；
    作用域链：scope chain，作用域链，用于关联指向上下文的变量查找；
◼ 在新的ECMA代码执行描述中（ES5以及之上），对于代码的执行流程描述改成了另外的一些词汇：
    基本思路是相同的，只是对于一些词汇的描述发生了改变；
    执行上下文栈和执行上下文也是相同的；

词法环境（Lexical Environments）

◼词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；
    一个词法环境是由环境记录（Environment Record）和一个外部词法环境（oute;rLexical Environment）组成；
    一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；
◼ 也就是在ES5之后，执行一个代码，通常会关联对应的词法环境；
    那么执行上下文会关联哪些词法环境呢？
    1.词法环境组件LexicalEnvironment
    2.变量词法环境组件VariableEnvironment

LexicalEnvironment和VariableEnvironment

◼ LexicalEnvironment用于处理let、const声明的标识符：
◼ VariableEnvironment用于处理var和function声明的标识符：

环境记录（Environment Record）

◼ 在这个规范中有两种主要的环境记录值:声明式环境记录和对象环境记录。
    声明式环境记录：声明性环境记录用于定义ECMAScript语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript语言值关联起来的Catch子句。
    对象式环境记录：对象环境记录用于定义ECMAScript元素的效果，例如WithStatement，它将标识符绑定与某些对象的属性关联起来。

let/const基本使用

◼ 在ES5中我们声明变量都是使用的var关键字，从ES6开始新增了两个关键字可以声明变量：let、const
    let、const在其他编程语言中都是有的，所以也并不是新鲜的关键字；
    但是let、const确确实实给JavaScript带来一些不一样的东西；
◼ let关键字：
    从直观的角度来说，let和var是没有太大的区别的，都是用于声明一个变量；
◼ const关键字：
    const关键字是constant的单词的缩写，表示常量、衡量的意思；
    它表示保存的数据一旦被赋值，就不能被修改；
    但是如果赋值的是引用类型，那么可以通过引用找到对应的对象，修改对象的内容；
◼ 注意：
    另外let、const不允许重复声明变量；
    案例:

        <script>
        // var 变量可以重复声明

        var message = "111"
        var message = "222"

        // let 和const不允许变量重复声明
        let address = "天津"
        // let address = "北京" // Uncaught SyntaxError: Identifier 'address' has already been declared(不允许重复声明)

        // const
        const age = 21
        // const age = 25//Uncaught SyntaxError: Identifier 'age' has already been declared
      </script>

let/const作用域提升

◼ let、const和var的另一个重要区别是作用域提升：
    我们知道var声明的变量是会进行作用域提升的；
    但是如果我们使用let声明的变量，在声明之前访问会报错；
    console.log(foo) // Uncaught ReferenceError: Cannot access 'info' before initialization(不能再声明之前使用)
    let foo = "foo"
◼ 那么是不是意味着foo变量只有在代码执行阶段才会创建的呢？
    事实上并不是这样的，我们可以看一下ECMA262对let和const的描述；
    这些变量会被创建在包含他们的词法环境被实例化时，但是是不可以访问它们的，直到词法绑定被求值；

let/const有没有作用域提升呢？

◼ 从上面我们可以看出，在执行上下文的词法环境创建出来的时候，变量事实上已经被创建了，只是这个变量是不能被访问的。
    那么变量已经有了，但是不能被访问，是不是一种作用域的提升呢？
◼ 事实上维基百科并没有对作用域提升有严格的概念解释，那么我们自己从字面量上理解；
    作用域提升：在声明变量的作用域中，如果这个变量可以在声明之前被访问，那么我们可以称之为作用域提升；
    在这里，它虽然被创建出来了，但是不能被访问，我认为不能称之为作用域提升；
◼ 所以我的观点是let、const没有进行作用域提升，但是会在解析阶段被创建出来。

暂时性死区(TDZ)

◼ 我们知道，在let、const定义的标识符真正执行到声明的代码之前，是不能被访问的
    从块作用域的顶部一直到变量声明完成之前，这个变量处在暂时性死区（TDZ，temporal dead zone）
◼ 使用术语 “temporal” 是因为区域取决于执行顺序（时间），而不是编写代码的位置；
  function foo(){
  console.log(bar,baz)// 暂时性死区
  console.log("hello")// 暂时性死区
  console.log("你好")// 暂时性死区
  let bar = "bar"
  let baz = "baz"
}
  //2. 暂时性死区和定义的位置没有关系,和代码的执行顺序有关
  function foo1(){
    console.log(message)
  }
  let message = "hello world"
  foo1()
  console.log(message)

  // 3.暂时性死区形成后,在该区域这个标识符不能访问
  let message1 = "hello world"
  function foo(){
    console.log(message1)
    let message1 = "哈哈哈哈哈"
  }
  foo() //  Uncaught ReferenceError: Cannot access 'message1' before initialization

Window对象添加属性

◼ 我们知道，在全局通过var来声明一个变量，事实上会在window上添加一个属性：
    但是let、const是不会给window上添加任何属性的。
◼ 那么我们可能会想这个变量是保存在哪里呢？
  全局的环境记录 从逻辑上来说是一个简单的记录 但是他是被作为合成对象环境记录和声明环境记录

var的块级作用域

◼ 在我们前面的学习中，JavaScript只会形成两个作用域：全局作用域和函数作用域。
◼ ES5中放到一个代码中定义的变量，外面是可以访问的：
// 代码块
  {
    var message ="hello World"
  }
    
  console.log(message)

let/const的块级作用域

◼ 在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的：
◼ 但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的：
    这是因为引擎会对函数的声明进行特殊的处理，允许像var那样在外界直接访问；
      // ES6开始 let const声明的变量是有块级作用域的
        {
            let foo = "foo"
            function bar(){
              console.log("bar")
            }
            class Person{

            }
        }
        console.log(foo) // Uncaught ReferenceError: foo is not defined
        bar() // bar
        const p = new Person() //Uncaught ReferenceError: Person is not defined
// 块级作用域的应用
  // 2.监听按钮的点击
const btnEls = document.querySelectorAll("button")
for(let i = 0 ; i<btnEls.length;i++){
  const btnEl = btnEls[i]
  btnEl.onclick = function(){
    console.log(i)
  }
}

var、let、const的选择

◼ 那么在开发中，我们到底应该选择使用哪一种方式来定义我们的变量呢？
◼ 对于var的使用：
    我们需要明白一个事实，var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些历史遗留问题；
    其实是JavaScript在设计之初的一种语言缺陷；
    当然目前市场上也在利用这种缺陷出一系列的面试题，来考察大家对JavaScript语言本身以及底层的理解；
    但是在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；
◼ 对于let、const：
    对于let和const来说，是目前开发中推荐使用的；
    我们会优先推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
    只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let；
    这种在很多其他语言里面也都是一种约定俗成的规范，尽量我们也遵守这种规范；

字符串模板基本使用

◼ 在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。
◼ ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接：
    首先，我们会使用 `` 符号来编写字符串，称之为模板字符串；
    其次，在模板字符串中，我们可以通过 ${expression} 来嵌入动态的内容；
// ES6 模板字符串
const ifno = `my name is ${name},age is ${age}`
console.log(ifno)

function foo(){
  return "function is foo"
}
console.log(`function : ${foo()}`)

标签模板字符串使用

◼ 模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
◼ 我们一起来看一个普通的JavaScript的函数：
  function bar(...args){
      console.log("参数:",args) // (3) ['hdc', 21, 1.88]
  }
  bar("hdc",21,1.88)
◼ 如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：
模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；
// 标签模板字符串的用法
function bar(...args){
    console.log("参数:",args) // (3) ['hdc', 21, 1.88]
}
bar("hdc",21,1.88)

bar`my name is${name},my age is${age},height is ${1.88}` //[Array(4), 'hdc', 18, 1.88]

函数的默认参数

◼ 在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：
    传入了参数，那么使用传入的参数；
    没有传入参数，那么使用一个默认值；
◼ 而在ES6中，我们允许给函数一个默认值：
    <script>
    // 默认参数不会对null对判断
      function foo(arg1 ="我是默认值",arg2="我也是默认值"){
        // 默认值写法一:
          // arg1 = arg1?arg1:"我是默认值"
          // 默认值写法二:
          // arg1 = arg1 || "我是默认值"
          // 默认值写法三:(严谨)
          // 三元运算符
          // arg1 = (arg1 === undefined || arg1 === null)?"我是默认值":arg1
          // 默认值写法四(严谨)
          //ES6新增语法:
          // arg1 = arg1 ?? "我是默认值"
          
          console.log(arg1,arg2)

      } 
      foo(123,321)
      foo()//我是默认值 我也是默认值
      foo(0)//我是默认值 我也是默认值
      foo("")//我是默认值 我也是默认值
      foo(false)//我是默认值 我也是默认值
    </script>

函数默认值的补充

  ◼ 默认值也可以和解构一起来使用：
    <script>
      const obj = {name:"hdc"}
      const {name ="kobe",age=18} = obj

      //函数的默认值是对象
      // function foo(obj={name:"hdc",age:21}){
      //   console.log(obj)
      // }
      // function foo({name,age}={name:"hdc",age:21}){
      //   console.log(name,age)
      // }
      function foo({name="hdc",age=21}={}){
        console.log(name,age)
      }
      foo()
    </script>
  ◼ 另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）：
      但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；
  ◼ 另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了。

    // 注意一: 1.给默认参数的最好放到后面
    // 注意二:有默认参数的形参,是不会计算在length之内的,并且后面的所有参数都不会计算在length之内
    // 注意三:剩余参数放在最后(两个都有将默认参数放在剩余参数之前)
    function foo(age,name="hdc",...args){
      console.log(name,age,args)
    }
    foo(18,"hhh","ddd","ccc")

函数箭头函数的补充

  ◼ 在前面我们已经学习了箭头函数的用法，这里进行一些补充：
      箭头函数是没有显式原型prototype的，所以不能作为构造函数，使用new来创建对象；
      箭头函数也不绑定this、arguments、super参数；
案例:
    <script>
      function foo(){}
      console.log(foo.prototype)
      console.log(foo.__proto__)

      //2. 箭头函数没有显式原型
      // ES6 创建构造函数要使用class定义
      var bar = ()=>{}
      console.log(bar.__proto__)
      console.log(bar.__proto__ === Function.prototype)//true
      // 没有显式原型
      console.log(bar.prototype) // undefined
      // var b = new bar() // bar is not a constructor
    </script>

展开语法

  ◼ 展开语法(Spread syntax)：
      可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
      还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；
  ◼ 展开语法的场景：
      在函数调用时使用；
      在数组构造时使用；
      在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；
  ◼ 注意：展开运算符其实是一种浅拷贝；
  <script>
// 1.基本演练
    const names = ["abc","nba","bbba"]
    const newNames = [...names,"hhh"]
    const str = "Hello"
    function foo (name1,name2,...args) {
      console.log(name1,name2,args) 
    }
    foo(...names)// abc nba ['bbba']
    foo(...str)  // H e (3) ['l', 'l', 'o']
    // ES9 
    const obj = {
      name : "hdc",
      age:18
    }
    // 不可以这么使用
    // foo(...obj)// 在函数调用时,用展开运算符,将对应的展开数据进行迭代
    // 可迭代:数组/字符串/arguments
    // 对象默认不是可迭代的
    const info= {
      ...obj,
      height:1.88,
      address:"天津市"
    }
  </script>

引用赋值-浅拷贝-深拷贝

  <script>
    const obj = {
      name:"hdc",
      age:18,
      height:1.88,
      friend:{
        name:"curry"
      }
    }
    // 引用赋值:两个不管是哪个更改另一个都会更改
    const info1 = obj
    // 浅拷贝:更改info2里的内容obj不会改变
    const info2 = {
      ...obj
    }
    info2.name="kobe"
    console.log(obj.name) // hdc
    console.log(info2.name) // kobe
    // 浅拷贝:对象里面还有一个对象是不会拷贝的
    info2.friend.name = "jams"
    console.log(obj.friend.name)// jams

    // 深拷贝
      // 方式一:借助第三方库
      // 方式二:自己实现深拷贝
      // 方式三:利用现有的JS机制实现深拷贝
      const info3 = JSON.parse(JSON.stringify(obj))
  </script>

数值的表示

◼ 在ES6中规范了二进制和八进制的写法：
  // 1. 进制
      console.log(100)
      console.log(0b100)// 二进制
      console.log(0o100)//八进制
      console.log(0x100)//十六进制
◼ 另外在ES2021新增特性：数字过长时，可以使用_作为连接符
    const num1 = 100_000_000

Symbol的基本使用

◼ Symbol是什么呢？Symbol是ES6中新增的一个基本数据类型，翻译为符号。
◼ 那么为什么需要Symbol呢？
    在ES6之前，对象的属性名都是字符串形式，那么很容易造成属性名的冲突；
    比如原来有一个对象，我们希望在其中添加一个新的属性和值，但是我们在不确定它原来内部有什么内容的情况下，很容易造成冲突，从而覆盖掉它内部的某个属性；
    比如我们前面在讲apply、call、bind实现时，我们有给其中添加一个fn属性，那么如果它内部原来已经有了fn属性了呢？
    比如开发中我们使用混入，那么混入中出现了同名的属性，必然有一个会被覆盖掉；
◼ Symbol就是为了解决上面的问题，用来生成一个独一无二的值。
    Symbol值是通过Symbol函数来生成的，生成后可以作为属性名；
    也就是在ES6中，对象的属性名可以使用字符串，也可以使用Symbol值；
◼ Symbol即使多次创建值，它们也是不同的：Symbol函数执行后每次创建出来的值都是独一无二的；
◼ 我们也可以在创建Symbol值的时候传入一个描述description：这个是ES2019（ES10）新增的特性；
案例:
   <script>
      // ES6 之前
      // const obj = {
      //   name :"hdc"
      // }

      // 添加一个新的属性 name
      const s1 = Symbol()
      const obj = {
        [s1]:"aaa"
      }
      function foo(obj){
        const sKey = Symbol()
        console.log(sKey)
        obj[sKey] = function(){}
        delete obj[sKey]
      }
      foo(obj)
      console.log(obj)//{Symbol(): 'aaa'}
    </script>

Symbol作为属性名

   const s1 = Symbol()//aaa
const s2 = Symbol()//bbb
//1.加入对象中
      const obj = {
        [s1]:"aaa",
        [s2]:"bbb"
      };
      const obj1 = {}
        obj1[s1] = "aaa"
        obj1[s2] = "bbb"
      const obj2 = {}
      Object.defineProperty(obj2,s1,{
        value : "aaa"
      })

      // 2.获取Symbol对应的key
      console.log(Object.keys(obj))// 获取不到Symbol的key
      console.log(Object.getOwnPropertySymbols(obj))//(2) [Symbol(), Symbol()]
      const SymbolKeys = Object.getOwnPropertySymbols(obj)
      for (const key of SymbolKeys) {
        console.log(obj[key])
      }

相同值的Symbol

      // description 描述
//Symbol函数直接生成的值都是独一无二的
  const s3 = Symbol("ccc")
  console.log(s3.description)// ccc
  const s4 = Symbol(s3.description)
  console.log(s3 === s4) // false
// Symbol.for如果相同的key,通过Symbol.for可以生成相同的Symbol值
  const s5 = Symbol.for(s3.
  
  )
  console.log(s5 === s3) // false
  const s6 = Symbol.for(s3.description)
  console.log(s5 === s6) // true

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

Set的基本使用

◼ 在ES6之前，我们存储数据的结构主要有两种：数组、对象。
    在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
◼ Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
    创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：
◼ 我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。
// 以前
      <script>
      // 数组
      // 字面量方式
      const arr = []
      // Set 数据结构
      // 构造函数
      const setArr = new Set()
      console.log(setArr)
      // 添加元素
      setArr.add(10)
      setArr.add(20)
      setArr.add(22)
      setArr.add(23)
      setArr.add(20)
      setArr.add(20)
      console.log(setArr)// Set(4) {10, 20, 22, 23}
      const info = {}
      const obj = {}
      setArr.add(info)
      setArr.add(obj)
      setArr.add(info)
      setArr.add(info)
      console.log(setArr)// Set(6) {10, 20, 22, 23, {…}, …}

      // 应用场景:数组的去重
      const names = ["abc","aaa","bbb","ccc","nba","aaa"]
      // 普通去重
      const newArr = []
      for(const item of names){
        // console.log(newArr.includes(item))// false
        if(!newArr.includes(item)){
          newArr.push(item)
        }
      }
      console.log(newArr)//(5) ['abc', 'aaa', 'bbb', 'ccc', 'nba']
      // Set去重
      const newNames =Array.from( new Set(names))
      console.log(newNames)
      
    </script>

Set的常见方法

◼ Set常见的属性：
    size：返回Set中元素的个数；
    console.log(set.size)
◼ Set常用的方法：
    add(value)：添加某个元素，返回Set对象本身；
    delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
    has(value)：判断set中是否存在某个元素，返回boolean类型；
    clear()：清空set中所有的元素，没有返回值；
    forEach(callback, [, thisArg])：通过forEach遍历set；
◼ 另外Set是支持for of的遍历的
   // Set的方法
    console.log(setArr.size)//6
    // Set的属性
    setArr.add(20)// 添加
    setArr.delete(20)//删除
    console.log(setArr)
    if(setArr.has(20)){ // 没有20 返回布尔类型
      console.log("有20")
    }
    else{
      console.log("没有20")
    }
    // setArr.clear()
    // console.log(setArr)//没有20
    setArr.forEach(item => console.log(item))

    for (const item of setArr) {
      console.log(item)
    }

WeakSet使用

◼ 和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
◼ 那么和Set有什么区别呢？
    区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
    区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
◼ WeakSet常见的方法：
    add(value)：添加某个元素，返回WeakSet对象本身；
    delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
    has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
  <script>
    // 强引用 和  弱引用
    let obj1 = {name:"hdc"}
    let obj2 = {name:"kobe"}
    let obj3 = {name:"james"}
    // 强引用
    let arr = [obj1,obj2,obj3]
    obj1 = null
    obj2 = null
    obj3 = null
    const set = new Set(arr)
    arr = null
    // 2.weakSet的用法
    // 2.1 weakSet和Set 的区别一:只能存放对象类型
    var WeakSet = new WeakSet()
    WeakSet.add(obj1)
    WeakSet.add(obj2)
    WeakSet.add(obj3)
    //2.2weakSet和Set 的区别二:对对象的引用的弱引用
      // 弱引用垃圾回收器会认为他不存在
  </script>

WeakSet的应用

  ◼ 注意：WeakSet不能遍历
      因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
      所以存储到WeakSet中的对象是没办法获取的；
  ◼ 那么这个东西有什么用呢？
      事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；
    // 3.WeakSet的应用
      const pWeakSet = new WeakSet()
      class Person{
        constructor(){
          pWeakSet.add(this)
        }
        running(){
          if(!pWeakSet.has(this)){
            console.log("当前类型是错误的")
            return
          }
          console.log("running")
        }
      }
      const p = new Person()
      p.running()
      const runFn = p.running
      runFn()
      const obj = {run:runFn}
      obj.run()

Map的基本使用

◼ 另外一个新增的数据结构是Map，用于存储映射关系。
◼ 但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
    事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
    某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
◼ 那么我们就可以使用Map：
  const info = {name:"hdc"}
  const info2 = {age:18}
  // 1.对象类型的局限性:不可以使用复杂类型当作key
  const obj = {
    address:"天津市",
    [info]:"哈哈哈哈哈",
    [info2]:"呵呵呵呵" //{address: '天津市', [object Object]: '呵呵呵呵'}
  }
  console.log(obj)
  // 2.Map映射类型
  const map = new Map()
  map.set(info,"aaaa")
  map.set(info2,"bbbb")
  console.log(map)    //Map(2) {{…} => 'aaaa', {…} => 'bbbb'}

Map的常用方法

◼ Map常见的属性：
    size：返回Map中元素的个数；
◼ Map常见的方法：
    set(key, value)：在Map中添加key、value，并且返回整个Map对象；
    get(key)：根据key获取Map中的value；
    has(key)：判断是否包括某一个key，返回Boolean类型；
    delete(key)：根据key删除一个键值对，返回Boolean类型；
    clear()：清空所有的元素；
    forEach(callback, [, thisArg])：通过forEach遍历Map；
◼ Map也可以通过for of进行遍历。
  案例:
    // 3.Map常见属性和方法
    console.log(map.size)//2
    //3.1 set方法:设置内容
    map.set(info,"ccccc")
    console.log(map)
    // 3.2 get方法:获取内容
    console.log(map.get(info))//ccccc
    // 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.5 forEach方法
    map.forEach(item=>console.log(item)) // 获取的value
    // 3.4 for of
    for (const item of map) {
      // console.log(item)
      const [key,value] = item
      console.log(key,value)
    }

WeakMap的使用

◼ 和Map类型的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。
◼ 那么和Map有什么区别呢？
    const weakMap = new WeakMap()
    // weakMap.set(111,222) // Invalid value used as weak map key
    // weakMap.set("aaaa",2222) // Invalid value used as weak map key
    区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
    区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
◼ WeakMap常见的方法有四个：
    set(key, value)：在Map中添加key、value，并且返回整个Map对象；
    get(key)：根据key获取Map中的value；
    has(key)：判断是否包括某一个key，返回Boolean类型；
    delete(key)：根据key删除一个键值对，返回Boolean类型；

WeakMap的应用

◼ 注意：WeakMap也是不能遍历的
    没有forEach方法，也不支持通过for of的方式进行遍历；
◼ 那么我们的WeakMap有什么作用呢？（后续专门讲解）

posted @ 2024-10-20 01:44 韩德才阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· ES7-ES13新特性

· JavaScript函数

· ES6-ES12部分简单知识点总结，希望对大家有用~

· ES6—ES13开发技巧

· 第十四节：ES6之Symbol、Set和WeakSet、Map和WeakMap详解

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

昵称：韩德才
园龄： 9个月
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

hdc-web

ES6新特性

新的ECMA代码执行描述

词法环境（Lexical Environments）

LexicalEnvironment和VariableEnvironment

环境记录（Environment Record）

let/const基本使用

let/const作用域提升

let/const有没有作用域提升呢？

暂时性死区(TDZ)

Window对象添加属性

var的块级作用域

let/const的块级作用域

var、let、const的选择

字符串模板基本使用

标签模板字符串使用

函数的默认参数

函数默认值的补充

函数箭头函数的补充

展开语法

引用赋值-浅拷贝-深拷贝

数值的表示

Symbol的基本使用

Symbol作为属性名

相同值的Symbol

Set的基本使用

Set的常见方法

WeakSet使用

WeakSet的应用

Map的基本使用

Map的常用方法

WeakMap的使用

WeakMap的应用

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜