ES6

模板字符串

带标签的模板的字符串

const name = 'tom'
const gender = false
// 通过标签函数，获取模板字符串传递进来的值，可以将这个结果进行处理，返回出去
function tagFn(str, name, gender) {
    console.log(str)
    console.log(name)
    console.log(gender)
    return '111'
}
const res = tagFn`hello, my name is ${name}, my sex is${gender}`

字符串拓展方法

判断字符串是否包含某个字符

const msg = 'hello world'
msg.includes('world') // true

判断字符串是否以某个字符开头，或以某个字符结尾

const msg = 'hello world'
msg.startsWith('h') // true
msg.endsWith('d') // true

Reflect

提供一套统一操作对象的API，例如，像下面操作一个对象

const obj = {
    name: 'hi',
    age: 18
}
// 判断某个属性是否在对象里
console.log('name' in obj)
// 删除对象某个属性
console.log(delete obj.name)
// 将对象的属性名提取成数组
console.log(Object.keys(obj))

从上面的实现方法可以看出，操作一个对象，用的方法很乱，一下用 in 一下用 delete ，一下用Object上的方法，同样操作一个对象，没有统一性，换成用 Reflect 实现：

const obj = {
    name: 'hi',
    age: 18
}
// 判断某个属性是否在对象里
console.log(Reflect.has(obj, 'name'))
// 删除对象某个属性
console.log(Reflect.deleteProperty(obj, 'name'))
// 将对象的属性名提取成数组
console.log(Reflect.ownKeys(obj))

Map数据结构

有下面的一个例子，将 对象 作为另一个对象的键存入，但是实际打印结果不如所愿：

const obj = {}
obj[{ name: 'tom' }] = 'Tom'
console.log(obj) // { [object Object]: "Tom" }

无论传入什么数据当作属性名，都会强制转换成字符串，转换不了的会转换成 [object Object] ，而通过Map数据映射结构就没有这种问题

const map = new Map()
const tom = {
    name: 'tom'
}
map.set(tom, 'Tom')
console.log(map.get(tom))

Symbol

Symbol 是一个基本数据类型，主要用于创建一个独一无二的值

console.log(Symbol() === Symbol()) // false，永远不可能有两个相等的Symbol

在没有Symbol之前，一个对象里面，很有可能会存入属性名相同的两个属性，例如

// 例如这是一个全局公用的缓存对象
const cache = {}
...
cache['file_cache'] = 'xxx'
...
// 代码多了后，可能就不知道cache里面有个file_cache的缓存名，然后继续存入file_cache缓存名，此时就会将之前传入的缓存给覆盖掉，因此就可能会出现问题
cache['file_cache'] = 'ooo'

将上方缓存改成 Symbol 去实现：

// 例如这是一个全局公用的缓存对象
const cache = {}
...
// 括号里的是对这个Symbol的描述
cache[Symbol('file_cache')] = 'xxx'
...
cache[Symbol('file_cache')] = 'ooo'
/*
 *
 *  {
 *    Symbol(file_cache): "xxx"
 *    Symbol(file_cache): "ooo"
 *  }
 *
 */

Symbol 还可以作为对象的私有成员，让外界去无法访问

var People = (function() {
  var name = Symbol("name");
  class People {
    constructor(n) { //构造函数
        this[name] = n;
    }
    sayName() {
        console.log(this[name]);
    }
  }
  return People;
})();

Symbol内置属性

1、控制instanceof的返回值

class Person {
    static [Symbol.hasInstance](params) {
        console.log(params)
        console.log("我被用来检测")
        return false
    }
}
let o = {}
console.log(o instanceof Person)

Symbol的一些补充

1、创建的Symbol属性，永远 不相等

console.log(Symbol() === Symbol()) // false

2、注册全局的Symbol，注册全局的Symbol，接收一个字符串，如果不是字符串会转换成字符串，相同的字符串生成的全局Symbol会 相等

const s1 = Symbol.for('s1')
const s2 = Symbol.for('s1')
console.log(s1 === s2) // true
console.log(Symbol.for(true) === Symbol.for('true')) // true

3、对象内的Symbol，通过传统的获取，是 获取不到 的

const obj = {
    [Symbol('hi')]: 'hi',
    name: 'hello'
}
for(let key in obj) {
    console.log(key) // name
}
// 如果想获取Symbol，需要通过Object.getOwnPropertySymbols()方法
console.log(Object.getOwnPropertySymbols(obj))

生成器 Generator

function *fn() {
    console.log(111)
    yield 100
    console.log(222)
    yield 200
    console.log(333)
    yield 300
}
var g = fn()
// 调用一次，执行一次
g.next() // 100 {value: 100, done: false}

使用生成器实现一个自增的id

function *createId() {
    let id = 1
    while(true) {
        yield id++
    }
}
var c = createId()
c.next() // 1
c.next() // 2
c.next() // 3

generator传参

function *fn(arg) {
    console.log(arg)
    let one = yield 100
    console.log(one)
    let two = yield 100
    console.log(two)
    let three = yield 300
    console.log(three)
}
var g = fn('arg') // 会传入到arg处
g.next()
g.next('aaa') // 会传入到one的位置
g.next('bbb') // 会传入到two的位置
g.next('ccc') // 会传入到three的位置

使用生成器实现迭代器

let todos = {
    life: ['吃饭', '睡觉'],
    study: ['语文', '数学', '英语'],
    [Symbol.iterator]: function* () {
        const all = [...this.life, ...this.study]
        for (let item of all) {
            yield item
        }
    }
}
for (let item of todos) {
    console.log(item);
}

使用生成器实现按顺序调用 用户信息 -> 订单信息 -> 商品信息 接口

function getUser() {
    setTimeout(() => {
        let data = '用户信息'
        iterator.next(data)
    }, 1000)
}
function getOrder() {
    setTimeout(() => {
        let data = '订单信息'
        iterator.next(data)
    }, 1000)
}
function getGoods() {
    setTimeout(() => {
        let data = '商品信息'
        iterator.next(data)
    }, 1000)
}
function* fn() {
    let user = yield getUser()
    console.log(user);
    let order = yield getOrder()
    console.log(order);
    let goods = yield getGoods()
    console.log(goods);
}
let iterator = fn()
iterator.next()

数组includes方法与indexOf的区别

indexOf无法查找NaN的情况

const arr = ['foo', NaN, null]
arr.indexOf(NaN) // -1

使用includes可以查找出

const arr = ['foo', NaN, null]
arr.includes(NaN) // true

class中将属性挂载到实例身上

class Person {
    name = '杜恒'
    say = function() {
        console.log(1)
    }
}

class中static关键字的作用

static 关键字定义的属性，是属于类上面的，而不是实例化出来的对象上面

class Person {
    static name = 'hello'
}
const p = new Person()
console.log(p.name) // undefined
console.log(Person.name) // hello

Object.entries & Object.fromEntries

将对象转换成二维数组

const obj = {
    name: '杜恒',
    age: 23
}
const res = Object.entries(obj)
console.log(res) // [ ["name", "杜恒"], ["age", 23] ]

将二维数组、Map转换成普通对象

const map = new Map()
map.set("name", "杜恒")
map.set("age", 23)
console.log(map)
const res = Object.fromEntries(map)
console.log(res)

Promise.allSettled

Promise.allSettled用于接收一个数组， 与Promise.all很像，但是Promis.all是所有结果为成功状态，才返回成功。而Promise.allSellted是无论有没有失败情况下，都返回成功

globalThis

无论在什么环境下，globalThis都指向全局对象