ES6知识点详细解析跟着coderwhy学习 1.字符串模板基本使用在ES6之前，如果我们想要将字符串和一些动态的变量

跟着coderwhy学习

1.字符串模板基本使用

在ES6之前，如果我们想要将字符串和一些动态的变量（标识符）拼接到一起，是非常麻烦和丑陋的（ugly）。

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

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

const message = `my name is ${name}, age is ${age}, height is ${height}`
console.log(message)

const info = `age double is ${age * 2}`
console.log(info)

function doubleAge() {
    return age * 2
}

const info2 = `double age is ${doubleAge()}`
console.log(info2)

2. 标签模板字符串使用

模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。
来看一个普通的JavaScript的函数：

 function foo(...args) {
     console.log(args)
 }
 
 // [ 'Hello World']
 foo('Hello World')

如果我们使用标签模板字符串，并且在调用的时候插入其他的变量：
- 模板字符串被拆分了；
- 第一个元素是数组，是被模块字符串拆分的字符串组合；
- 后面的元素是一个个模块字符串传入的内容；
```
cpnst name = 'mint'
const age = 18
// [ ['Hello ', ' World ', ''] ,'mint', 18 ]
foo`Hello ${name} World ${age}`
```

3.【扩展】 React的styled-components库

4.函数的默认参数

在ES6之前，我们编写的函数参数是没有默认值的，所以我们在编写函数时，如果有下面的需求：
- 传入了参数，那么使用传入的参数；
- 没有传入参数，那么使用一个默认值；
而在ES6中，我们允许给函数一个默认值：

function foo(x=20, y=30) {
    console.log(x, y)
}

foo(50, 100) // 50 100
foo() // 20 30

function foo() {
    var x = 
        arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 20;
    var y = 
        arguments.length > 0 && arguments[1] !== undefined ? arguments[1] : 30;
    console.log(x, y);
}

5.函数默认值的补充

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

// 1.ES6可以给函数参数提供默认值
function foo(m = "aaa", n = "bbb") {
 console.log(m, n)
}

// 2.对象参数和默认值以及解构
function printInfo({name, age} = {name: "why", age: 18}) {
 console.log(name, age)
}

6.展开语法

展开语法(Spread syntax)：
- 可以在函数调用/数组构造时，将数组表达式或者string在语法层面展开；
- 还可以在构造字面量对象时, 将对象表达式按key-value的方式展开；

展开语法的场景：

在函数调用时使用；
在数组构造时使用；
在构建对象字面量时，也可以使用展开运算符，这个是在ES2018（ES9）中添加的新特性；

const names = ["abc", "cba", "nba"]
const name = "mint"
const info = {name: "mint", age: 18}

// 1.函数调用时
function foo(x, y, z) {
  console.log(x, y, z)
}

// foo.apply(null, names)
foo(...names)
foo(...name)

// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames)

// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)

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

const info = {
    name: 'mint',
    friend: {name: 'pika'}
}

const obj = { ...info, name: 'pika-web'}
// console.log(obj);
obj.friend.name = 'andy'

console.log(info.friend.name)

7.数值的表示

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

const num1 = 100 // 十进制 100

// b -> binary
const num2 = 0b100 // 二进制 4
// o -> octonary
const num3 = 0o100 // 八进制 64
// x -> hexadecimal
const num4 = 0x100 // 十六进制 256

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

// 大的数值的连接符(ES2021 ES12)
const num = 10_000_000_000_000_000
console.log(num) // 10000000000000000

8.Symbol的基本使用

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

// 在ES6之前，对象的属性名（key）
// var obj = {
//     name: 'mint',
//     friend: {name: 'pika'},
//     age: 18
// }
//
// obj['name'] = 'soft'
// console.log(obj)

// 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

9.Symbol作为属性名

我们通常会使用Symbol在对象中表示唯一的属性名：

// 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])
// 注意: 不能通过.语法获取
// console.log(obj.s1) undefined

// 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))
const sKeys = Object.getOwnPropertySymbols(obj)
for (const sKey of sKeys) {
    console.log(obj[sKey])
}

10.相同值的Symbol

讲Symbol的目的是为了创建一个独一无二的值，那么如果我们现在就是想创建相同的Symbol应该怎么来做呢？

我们可以使用Symbol.for方法来做到这一点；
并且我们可以通过Symbol.keyFor方法来获取对应的key；

// 5.Symbol.for(key) / Symbol.keyFor(symbol)
const sa = Symbol.for('aaa')
const sb = Symbol.for('aaa')
console.log(sa === sb);//true

const key = Symbol.keyFor(sa)
console.log(key) //aa
const sc = Symbol.for(key)
console.log(sa === sc) //true

11.Set的基本使用

在ES6之前，我们存储数据的结构主要有两种：数组、对象。
- 在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。
Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。
- 创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)
// console.log(set) //Set { 10, 20, 40, 333 }

set.add(10)
console.log(set) // Set { 10, 20, 40, 333 }

// 2.添加对象时特别注意：
set.add({})
set.add({})
console.log(set) // Set { 10, 20, 40, 333, {}, {} }

我们可以发现Set中存放的元素是不会重复的，那么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 ]

12.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的遍历的。

/ 4.size属性
console.log(arrSet.size) // 4

// 5.Set的方法
// add
arrSet.add(100)
console.log(arrSet)

// delete
arrSet.delete(33)
console.log(arrSet)

// has
console.log(arrSet.has(100)) //true

// clear
// arrSet.clear()
console.log(arrSet) //Set { 10, 26, 30, 100 }

// 6.对Set进行遍历
arrSet.forEach(item => {
    console.log(item) // 10 26 30 100

})

for (const item of arrSet) {
    console.log(item) // 10 26 30 100
}

13.WeakSet使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。
那么和Set有什么区别呢？
- 区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
```
const weakSet = new WeakSet()

// TypeError: Invalid value used in weak set
// weakSet.add(10)
```
- 区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
- add(value)：添加某个元素，返回WeakSet对象本身；
- delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
- has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；
```
let obj = {
   name: "mint"
}

// weakSet.add(obj)

const set = new Set()
// 建立的是强引用
set.add(obj)

// 建立的是弱引用
weakSet.add(obj)
```

14.WeakSet的应用

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

那么这个东西有什么用呢？

事实上这个问题并不好回答，我们来使用一个Stack Overflow上的答案；

const personSet = new WeakSet()
// const personSet = new Set()
class Person {
    constructor() {
        personSet.add(this)
    }
    running() {
        if (personSet.has(this)) {
            throw new Error("不能通过非构造函数方法创建出来的对象调用running方法")
        }
        console.log('running~', this)
    }
}

let p = new Person()
p.running()
p = null

p.running.call({name: 'mint'})

15.Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。
但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？
- 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
- 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
那么我们就可以使用Map：

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = {name: 'mint'}
const obj2 = {name: 'pika'}

// const info = {
//     [obj1]: 'aaa',
//     [obj2]: 'bbb'
// }
//
// console.log(info)// { '[object Object]': 'bbb' }

// 2.Map就是允许我们对象类型来作为key的
// 构造函数
const map = new Map()
map.set(obj1, 'aaa')
map.set(obj2, 'bbb')
map.set(1, 'ccc')
console.log(map)
/*
* Map {
  { name: 'mint' } => 'aaa',
  { name: 'pika' } => 'bbb',
  1 => 'ccc'
}
* */

const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)

16.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.常见的属性和方法
console.log(map2.size);

// get(key)
console.log(map2.get('mint'));

// has(key)
console.log(map2.has("mint"))

// delete(key)
map2.delete("mint")
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)
}

17.WeakMap的使用

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

那么和Map有什么区别呢？

区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；

const weakMap = new WeakMap()
// Invalid·value ·used as  weak map key
weakMap.set(1, "abc ")
// Invalid ·value used as weak map key
weakMap.set( "aaa" ,  "cba")

const obj = {name: "obj1"}
// 1.WeakMap和Map的区别二:
const map = new Map()
map.set(obj, "aaa")
console.log(map); //Map { { name: 'obj1' } => 'aaa' }

const weakMap = new WeakMap()
weakMap.set(obj, "aaa")
console.log(weakMap) //WeakMap { <items unknown> }

// 2.区别一: 不能使用基本数据类型
// weakMap.set(1, "ccc")

WeakMap常见的方法有四个：
- set(key, value)：在Map中添加key、value，并且返回整个Map对象；
- get(key)：根据key获取Map中的value；
- has(key)：判断是否包括某一个key，返回Boolean类型；
- delete(key)：根据key删除一个键值对，返回Boolean类型；
```
// get方法
console.log(weakMap.get(obj))// aaa

// has方法
console.log(weakMap.has(obj)) // ture

// delete方法
console.log(weakMap.delete(obj)) // true
// WeakMap { <items unknown> }
console.log(weakMap) // WeakMap { <items unknown> }
```

18.WeakMap的应用

注意：WeakMap也是不能遍历的
- 因为没有forEach方法，也不支持通过for of的方式进行遍历；
那么我们的WeakMap有什么作用呢？

// 应用场景(vue3响应式原理)
const obj1 = {
    name: 'mint',
    age: 18
}

function obj1NameFn1() {
    console.log('obj1NameFn1被执行')
}

function obj1NameFn2() {
    console.log('obj1NameFn2被执行')
}

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

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

const obj2 = {
    name: 'pika',
    height: 1.88,
    address: "武汉市"
}

function obj2NameFn1() {
    console.log("obj1NameFn1被执行")
}

function obj2NameFn2() {
    console.log("obj1NameFn2被执行")
}

// 1.创建WeakMap
const weakMap = new WeakMap()

// 2.收集依赖结构
// 2.1对obj1收集的数据结构
const obj1Map = new Map()
obj1Map.set('name',[obj1NameFn1,obj2NameFn2])
obj1Map.set('age',[obj1AgeFn1,obj1AgeFn2])
weakMap.set(obj1, obj1Map)

// 2.2.对obj2收集的数据结构
const obj2Map = new Map()
obj2Mpa.set('name', [obj2NameFn1,obj2NameFn2])
weakMap.set(obj2, obj2Map)

// 3.如果obj1.name发生了改变
// Proxy/Object.defineProperty
obj1.name = 'soft'
const targetMap = weakMap.get(obj1)
const fns = targetMap.get('name')
fns.forEach(item => item())