ES6中class类、类的继承extends、多态、字面量的增强、解构、let/const、字符串模板、函数的默认参数、展开语法、数值、Symbol使用、Set、Map、es7-13总结_class extends

文章根据codewhy老师的课程学习整理深入JavaScript高级语法-coderwhy大神新课-学习视频教程-腾讯课堂

一、认识class定义类

我们会发现，按照前面的构造函数形式创建 类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。

在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；

但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；

可以使用两种方式来声明类：类声明和类表达式

// 类的声明
class Person {
 
}
// 类的表达式
var Animal = class {
}

类和构造函数的异同

类的一些特性和我们的构造函数的特性其实是一致的

// 研究一下类的特性
console.log(Person)   //[class Person]
console.log(Person.prototype)   //{}
console.log(Person.prototype.__proto__) //[Object: null prototype] {}
console.log(Person.prototype.constructor) //[class Person]
console.log(typeof Person) // function
 
var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

1. 类的构造函数

如果我们希望在创建对象的时候给类传递一些参数，这个时候应该如何做呢？

        每个类都可以有一个自己的构造函数（方法），这个方法的名称是固定的constructor；

        当我们通过new操作符，操作一个类的时候会调用这个类的构造函数constructor；

        每个类只能有一个构造函数，如果包含多个构造函数，那么会抛出异常；

当我们通过new关键字操作类的时候，会调用这个constructor函数，并且执行如下操作：

        1.在内存中创建一个新的对象（空对象）；

        2.这个对象内部的[[prototype]]属性会被赋值为该类的prototype属性；

        3.构造函数内部的this，会指向创建出来的新对象；

        4.执行构造函数的内部代码（函数体代码）；

        5.如果构造函数没有返回非空对象，则返回创建出来的新对象；

2. 类的实例方法

在上面我们定义的属性都是直接放到了this上，也就意味着它是放到了创建出来的新对象中：

        在前面我们说过对于实例的方法，我们是希望放到原型上的，这样可以被多个实例来共享；

        这个时候我们可以直接在类中定义

// 类的声明
class Person {
  // 类的构造方法
  // 注意: 一个类只能有一个构造函数
  // 1.在内存中创建一个对象 moni = {}
  // 2.将类的原型prototype赋值给创建出来的对象 moni.__proto__ = Person.prototype
  // 3.将对象赋值给函数的this: new绑定 this = moni
  // 4.执行函数体中的代码
  // 5.自动返回创建出来的对象
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eating() {
    console.log(this.name + " eating~")
  }
 
  running() {
    console.log(this.name + " running~")
  }
}
 
 
var p1 = new Person("why", 18)
var p2 = new Person("kobe", 30)
p.eating()
p.running()
console.log(p1, p2)

3. 类的访问器方法

我们之前讲对象的属性描述符时有讲过对象可以添加setter和getter函数的，那么类也是可以的：

4. 类的静态方法

静态方法通常用于定义直接使用类来执行的方法，不需要有类的实例，使用static关键字来定义

var names = ["abc", "cba", "nba"]
 
class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }
 
  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~")
  }
 
  running() {
    console.log(this.name + " running~")
  }
 
  // 类的访问器方法
  get address() {
    console.log("拦截访问操作")
    return this._address
  }
 
  set address(newAddress) {
    console.log("拦截设置操作")
    this._address = newAddress
  }
 
  // 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length)
    var name = names[nameIndex]
    var age = Math.floor(Math.random() * 100)
    return new Person(name, age)
  }
}
 
var p = new Person("why", 18)
p.eating()
p.running()
 
console.log(p.address)
p.address = "北京市"
console.log(p.address)
 
// console.log(Object.getOwnPropertyDescriptors(Person.prototype))
 
for (var i = 0; i < 50; i++) {
  console.log(Person.randomPerson())
}

二、ES6

1. 类的继承 - extends

在ES6中新增了使用extends关键字，可以方便的帮助我们实现继承：

super关键字

在子（派生）类的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！

super的使用位置有三个：子类的构造函数、实例方法、静态方法

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
 
  running() {
    console.log(this.name + " running~")
  }
 
  eating() {
    console.log(this.name + " eating~")
  }
 
  personMethod() {
    console.log("处理逻辑1")
    console.log("处理逻辑2")
    console.log("处理逻辑3")
  }
 
  static staticMethod() {
    console.log("PersonStaticMethod")
  }
}
 
// Student称之为子类(派生类)
class Student extends Person {
  // JS引擎在解析子类的时候就有要求, 如果我们有实现继承
  // 那么子类的构造方法中, 在使用this之前
  constructor(name, age, sno) {
    super(name, age)
    this.sno = sno
  }
 
  studying() {
    console.log(this.name + " studying~")
  }
 
  // 类对父类的方法的重写
  running() {
    console.log("student " + this.name + " running")
  }
 
  // 重写personMethod方法
  personMethod() {
    // 复用父类中的处理逻辑
    super.personMethod()
 
    console.log("处理逻辑4")
    console.log("处理逻辑5")
    console.log("处理逻辑6")
  }
 
  // 重写静态方法
  static staticMethod() {
    super.staticMethod()
    console.log("StudentStaticMethod")
  }
}
 
var stu = new Student("why", 18, 111)
console.log(stu)

继承内置类

我们也可以让我们的类继承自内置类，比如Array

class HYArray extends Array {
  firstItem() {
    return this[0]
  }
 
  lastItem() {
    return this[this.length-1]
  }
}
 
var arr = new HYArray(1, 2, 3)
console.log(arr.firstItem())
console.log(arr.lastItem())

类的混入mixin

JavaScript的类只支持单继承：也就是只能有一个父类

        那么在开发中我们我们需要在一个类中添加更多相似的功能时，应该如何来做呢？

        这个时候我们可以使用混入（mixin）；

class Person {
 
}
 
function mixinRunner(BaseClass) {
  class NewClass extends BaseClass {
    running() {
      console.log("running~")
    }
  }
  return NewClass
}
 
function mixinEater(BaseClass) {
  return class extends BaseClass {
    eating() {
      console.log("eating~")
    }
  }
}
 
// 在JS中类只能有一个父类: 单继承
class Student extends Person {
 
}
 
var NewStudent = mixinEater(mixinRunner(Student))
var ns = new NewStudent()
ns.running()
ns.eating()

2. JavaScript中的多态

不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现

那么从上面的定义来看，JavaScript是一定存在多态的

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象
 
// Shape形状
class Shape {
  getArea() {}
}
 
class Rectangle extends Shape {
  getArea() {
    return 100
  }
}
 
class Circle extends Shape {
  getArea() {
    return 200
  }
}
 
var r = new Rectangle()
var c = new Circle()
 
// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea())
}
 
calcArea(r)
calcArea(c)

3.字面量的增强

ES6中对 对象字面量 进行了增强，称之为 Enhanced object literals（增强对象字面量）

字面量的增强主要包括下面几部分：

属性的简写：Property Shorthand

方法的简写：Method Shorthand

计算属性名：Computed Property Names

var name = "why"
var age = 18
 
var obj = {
  // 1.property shorthand(属性的简写)
  name,
  age,
 
  // 2.method shorthand(方法的简写)
  foo: function() {
    console.log(this)
  },
  bar() {
    console.log(this)
  },
  baz: () => {
    console.log(this)
  },
 
  // 3.computed property name(计算属性名)
  [name + 123]: 'hehehehe'
}
 
obj.baz()
obj.bar()
obj.foo()
 
// obj[name + 123] = "hahaha"
console.log(obj)
// {
//   name: 'why',
//   age: 18,
//   foo: [Function: foo],
//   bar: [Function: bar],
//   baz: [Function: baz],
//   why123: 'hehehehe'
// }

4. 解构Destructuring

ES6中新增了一个从数组或对象中方便获取数据的方法，称之为解构Destructuring。 n

我们可以划分为：数组的解构和对象的解构

数组的解构： 

• 基本解构过程 
• 顺序解构
• 解构出数组
• 默认值

对象的解构：

• 基本解构过程
•  任意顺序
•  重命名
• 默认值

var names = ["abc", "cba", "nba"]
 
// 对数组的解构: []
var [item1, item2, item3] = names
console.log(item1, item2, item3) //abc cba nba
 
// 解构后面的元素
var [, , itemz] = names
console.log(itemz) //nba
 
// 解构出一个元素,后面的元素放到一个新数组中
var [itemx, ...newNames] = names
console.log(itemx, newNames) //abc [ 'cba', 'nba' ]
 
// 解构的默认值
var [itema, itemb, itemc, itemd = "aaa"] = names
console.log(itemd) //aaa

var obj = {
  name: "why",
  age: 18,
  height: 1.88
}
 
// 对象的解构: {}
var { name, age, height } = obj
console.log(name, age, height) //why 18 1.88
 
var { age } = obj
console.log(age)  //18
 
//重命名成newName
var { name: newName } = obj
console.log(newName) //why
 
var { address: newAddress = "广州市" } = obj
console.log(newAddress) //广州市
 
 
function foo(info) {
  console.log(info.name, info.age) 
}
 
foo(obj) //why 18
 
function bar({name, age}) {
  console.log(name, age)
}
 
bar(obj) //why 18

解构目前在开发中使用是非常多的：

• 比如在开发中拿到一个变量时，自动对其进行解构使用；
• 比如对函数的参数进行解构； 解构的应用场景

5. let/const基本使用

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

注意事项一: const本质上是传递的值不可以修改

但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的

let/const和var的区别

1. 通过let/const定义的变量名是不可以重复定义

2.  let、const没有进行作用域提升，但是会在解析阶段被创建出来

3. Window对象添加属性

• 全局通过var来声明一个变量，事实上会在window上添加一个属性：
• 但是let、const是不会给window上添加任何属性的。
• 变量被保存到VariableMap中

也就是说我们声明的变量和环境记录是被添加到变量环境中的

• v8中其实是通过VariableMap的一个hashmap来实现它们的存储的。
• 那么window对象呢？而window对象是早期的GO对象，在最新的实现中其实是浏览器添加的全局对象，并且 一直保持了window和var之间值的相等性

4.块级作用域区别

ES5中没有块级作用域，只有两个东西会形成作用域

• 全局作用域
• 函数作用域

在ES6中新增了块级作用域，并且通过let、const、function、class声明的标识符是具备块级作用域的限制的

但是我们会发现函数拥有块级作用域，但是外面依然是可以访问的： p这是因为引擎会对函数的声明进行特殊的处理，允许像var那样进行提升

var、let、const的选择

var所表现出来的特殊性：比如作用域提升、window全局对象、没有块级作用域等都是一些 历史遗留问题

在实际工作中，我们可以使用最新的规范来编写，也就是不再使用var来定义变量了；

对于let、const：

• 我们会有限推荐使用const，这样可以保证数据的安全性不会被随意的篡改；
•  只有当我们明确知道一个变量后续会需要被重新赋值时，这个时候再使用let

6.字符串模板基本使用

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

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

// ES6之前拼接字符串和其他标识符
const name = "why"
const age = 18
const height = 1.88
 
// console.log("my name is " + name + ", age is " + age + ", height is " + height)
 
// ES6提供模板字符串 ``
const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message) //my name is why, age is 18, height is 1.88
 
const info = `age double is ${age * 2}`
console.log(info) //age double is 36
 
function doubleAge() {
  return age * 2
}
 
const info2 = `double age is ${doubleAge()}`
console.log(info2) //double age is 36

标签模板字符串使用

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

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

// 第一个参数依然是模块字符串中整个字符串, 只是被切成多块,放到了一个数组中
// 第二个参数是模块字符串中, 第一个 ${}
function foo(m, n, x) {
  console.log(m, n, x, '---------')
}
 
// foo("Hello", "World")
 
// 另外调用函数的方式: 标签模块字符串
// foo``
 
// foo`Hello World`
const name = "why"
const age = 18
// ['Hello', 'Wo', 'rld']
foo`Hello${name}Wo${age}rld`

7.函数增强

函数的默认参数

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

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

而在ES6中，我们允许给函数一个默认值：

函数默认值的补充

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

另外参数的默认值我们通常会将其放到最后（在很多语言中，如果不放到最后其实会报错的）

• 但是JavaScript允许不将其放到最后，但是意味着还是会按照顺序来匹配；

另外默认值会改变函数的length的个数，默认值以及后面的参数都不计算在length之内了、

函数的剩余参数

ES6中引用了rest parameter，可以将不定数量的参数放入到一个数组中：

• 如果最后一个参数是 ... 为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组；

那么剩余参数和arguments有什么区别呢？

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

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

// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
  console.log(m, n)
}
 
// foo()
foo(0, "") //0 
 
// 2.对象参数和默认值以及解构
function printInfo({name, age} = {name: "why", age: 18}) {
  console.log(name, age)
}
 
printInfo({name: "kobe", age: 40})  //kobe 40
 
// 另外一种写法
function printInfo1({name = "why", age = 18} = {}) {
  console.log(name, age)
}
 
printInfo1()// why 18
 
// 3.有默认值的形参最好放到最后
function bar(x, y, z = 30) {
  console.log(x, y, z)
}
 
bar(10, 20) //10 20 30
bar(undefined, 10, 20) //undefined 10 20
 
// 4.有默认值的函数的length属性
function baz(x, y, z, m, n = 30) {
  console.log(x, y, z, m, n)
}
 
console.log(baz.length) //4

 剪头函数补充

8. ES6中展开语法的使用

const names = ["abc", "cba", "nba"]
const name = "why"
const info = {name: "why", age: 18}
 
// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z)
}
 
// foo.apply(null, names)
foo(...names) //abc cba nba
foo(...name) //w h y
 
// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames) //[ 'abc', 'cba', 'nba', 'w', 'h', 'y' ]
 
// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)
// {
//   '0': 'abc',
//   '1': 'cba',
//   '2': 'nba',
//   name: 'why',
//   age: 18,
//   address: '广州市'
// }

 展开运算符是浅拷贝

展开运算符是浅拷贝，他第一层是深拷贝，互不影响，如果有对象，里面的对象是相同的内存地址，是浅拷贝，所以总体是浅拷贝

引用赋值

在ES6中，引用赋值是指将一个变量的值赋给另一个变量时，两个变量实际上是指向同一个内存地址，即它们引用的是同一个对象或值。

在JavaScript中，基本类型（如数字、字符串、布尔值等）是按值传递的，而对象类型（如数组、对象、函数等）是按引用传递的。这意味着，当你将一个对象赋值给另一个变量时，实际上是将对象的引用赋值给另一个变量，而不是创建一个新的对象副本。

let obj1 = { name: "John" };  
let obj2 = obj1; // 引用赋值  
  
obj2.name = "Jane";  
console.log(obj1.name); // 输出 "Jane"

在这个例子中，obj1 和 obj2 指向同一个对象，修改 obj2 的属性也会影响到 obj1。

需要注意的是，对于基本类型，赋值操作会创建一个新的值副本，修改其中一个变量不会影响另一个变量。

浅拷贝、深拷贝

1. 浅拷贝（Shallow Copy）：当复制一个对象时，如果只对对象的第一层属性进行复制，而对内部的子对象或数组仍然保持引用关系，这种复制方式称为浅拷贝。换句话说，浅拷贝只会复制对象的顶层属性，而不会复制嵌套的对象或数组。这意味着，修改复制后的对象中的嵌套对象或数组，会影响到原始对象。

let obj1 = { name: "John", age: 25, address: { city: "New York" } };  
let obj2 = Object.assign({}, obj1); // 浅拷贝  
  
obj2.address.city = "Los Angeles";  
console.log(obj1.address.city); // 输出 "Los Angeles"

1. 深拷贝（Deep Copy）：当复制一个对象时，不仅对对象的第一层属性进行复制，还会递归地复制内部的所有子对象和数组，这种复制方式称为深拷贝。换句话说，深拷贝会创建一个新的对象，并复制原始对象的所有层级和数据，而不仅仅是顶层属性。这意味着，修改复制后的对象中的任何属性，都不会影响到原始对象。

let obj1 = { name: "John", age: 25, address: { city: "New York" } };  
let obj2 = JSON.parse(JSON.stringify(obj1)); // 深拷贝  
  
obj2.address.city = "Los Angeles";  
console.log(obj1.address.city); // 输出 "New York"

9.ES6中的数值表示：大的数值的连接符_

const num1 = 100 // 十进制
 
// b -> binary
const num2 = 0b100 // 二进制
// o -> octonary
const num3 = 0o100 // 八进制
// x -> hexadecimal
const num4 = 0x100 // 十六进制
 
console.log(num1, num2, num3, num4)
 
// 大的数值的连接符(ES2021 ES12)
const num = 10_000_000_000_000_000
console.log(num)

10.Symbol的基本使用方式

在ES6中，Symbol是一种新的数据类型，用于创建独一无二的标识符。它的基本使用方式如下

创建Symbol类型：可以使用Symbol()函数来创建一个Symbol类型的值。

作为属性名：由于Symbol值是独一无二的，它们经常用作对象的属性名，以避免属性名的冲突。

// 1.ES6之前, 对象的属性名(key)
var obj1 = {
  name: "why",
  friend: { name: "kobe" },
  age: 18
}
 
obj1['newName'] = "james"
console.log(obj1) //{ name: 'why', friend: { name: 'kobe' }, age: 18, newName: 'james' }
 
 
// 2.ES6中Symbol的基本使用:生成的值都是唯一的
const s1 = Symbol()
const s2 = Symbol()
 
console.log(s1 === s2) //false
 
// ES2019(ES10)中, Symbol还有一个描述(description)
const s3 = Symbol("aaa")
console.log(s3.description) //aaa
 
// 3.Symbol值作为key
// 3.1.在定义对象字面量时使用
const obj = {
  [s1]: "abc",
  [s2]: "cba"
}
 
// 3.2.新增属性
obj[s3] = "nba"
 
// 3.3.Object.defineProperty方式
const s4 = Symbol()
Object.defineProperty(obj, s4, {
  enumerable: true,
  configurable: true,
  writable: true,
  value: "mba"
})
 
console.log(obj[s1], obj[s2], obj[s3], obj[s4]) //abc cba nba mba
// 注意: 不能通过.语法获取
// console.log(obj.s1)
 
// 4.使用Symbol作为key的属性名,在遍历/Object.keys等中是获取不到这些Symbol值
// 需要Object.getOwnPropertySymbols来获取所有Symbol的key
console.log(Object.keys(obj)) //[]
console.log(Object.getOwnPropertyNames(obj)) //[]
console.log(Object.getOwnPropertySymbols(obj))  //[ Symbol(), Symbol(), Symbol(aaa), Symbol() ]
const sKeys = Object.getOwnPropertySymbols(obj)
for (const sKey of sKeys) {
   console.log(obj[sKey])  //abc cba nba mba
}
 
// 5.Symbol.for(key)/Symbol.keyFor(symbol)
const sa = Symbol.for("aaa")
const sb = Symbol.for("aaa")
console.log(sa === sb) //true
console.log(sa) //Symbol(aaa)
 
const key = Symbol.keyFor(sa)
console.log(key) //aaa
const sc = Symbol.for(key)
console.log(sa === sc) //true

11.Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象

• 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap

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

• 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）： 

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

Set常见的属性：

• size：返回Set中元素的个数； 

Set常用的方法：

• add(value)：添加某个元素，返回Set对象本身；
• delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断set中是否存在某个元素，返回boolean类型；
• clear()：清空set中所有的元素，没有返回值；
• forEach(callback, [, thisArg])：通过forEach遍历set；

另外Set是支持for of的遍历的。

// 10, 20, 40, 333
// 1.创建Set结构
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)
 
set.add(10)
 
// 2.添加对象时特别注意:
set.add({})
set.add({})
 
const obj = {}
set.add(obj)
set.add(obj)
 
// console.log(set)
 
// 3.对数组去重(去除重复的元素)
const arr = [33, 10, 26, 30, 33, 26]
// const newArr = []
// for (const item of arr) {
//   if (newArr.indexOf(item) !== -1) {
//     newArr.push(item)
//   }
// }
 
const arrSet = new Set(arr)
const newArr = Array.from(arrSet)
// const newArr = [...arrSet]
console.log(newArr) //[ 33, 10, 26, 30 ]
 
// 4.size属性
console.log(arrSet.size) //4
 
// 5.Set的方法
// add
arrSet.add(100) //Set(5) { 33, 10, 26, 30, 100 }
console.log(arrSet)
 
// delete
arrSet.delete(33)
console.log(arrSet)
 
// has
console.log(arrSet.has(100)) //true
 
// clear
// arrSet.clear()
console.log(arrSet)
 
// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
})
 
for (const item of arrSet) {
  console.log(item)
}

12.WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；

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

WeakSet常见的方法：

• add(value)：添加某个元素，返回WeakSet对象本身；
• delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
• has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

WeakSet不能遍历

• 因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。
• 所以存储到WeakSet中的对象是没办法获取的

13.Map的基本使用

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

但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

• 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
• 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key； 

那么我们就可以使用Map

1. JavaScript中对象中是不能使用对象来作为key的
2. .Map就是允许我们对象类型来作为key的

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进行遍历

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" }
const obj2 = { name: "kobe" }
 
// const info = {
//   [obj1]: "aaa",
//   [obj2]: "bbb"
// }
 
// console.log(info)
 
// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)
 
const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)
 
// 3.常见的属性和方法
console.log(map2.size)
 
// set
map2.set("why", "eee")
console.log(map2)
 
// get(key)
console.log(map2.get("why"))
 
// has(key)
console.log(map2.has("why"))
 
// delete(key)
map2.delete("why")
console.log(map2)
 
// clear
// map2.clear()
// console.log(map2)
 
// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
})
 
for (const item of map2) {
  console.log(item[0], item[1])
}
 
for (const [key, value] of map2) {
  console.log(key, value)
}

WeakMap的使用

和Map类型相似的另外一个数据结构称之为WeakMap，也是以键值对的形式存在的。 

那么和Map有什么区别呢？ 

区别一：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也是不能遍历的

• 因为没有forEach方法，也不支持通过for of的方式进行遍历

！！总结！！

ES11:globalThis

ES11: for...in标准化