ES6

HaoOuBa
2021-04-11 / 18 评论 / 600 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月29日,已超过548天没有更新,若内容或图片失效,请留言反馈。

模板字符串

带标签的模板的字符串

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都指向全局对象

5

评论 (18)

取消
  1. 头像
    如意
    Windows 10 · Google Chrome

    好滥的主题,滥,滥,滥

    回复
  2. 头像
    Test
    Windows 10 · Google Chrome

    测试2

    回复
  3. 头像
    Test
    Windows 10 · Google Chrome

    测试

    回复
  4. 头像
    Takipçi Satın AL
    Windows 10 · Google Chrome

    Heya i am for the first time here. I found this board and I to find It truly helpful
    & it helped me out much. I am hoping to offer one thing again and help others like you helped me.

    回复
  5. 头像
    波野多结衣
    Android · QQ Browser

    亚麻嘚

    回复
  6. 头像
    joe睡我
    Windows 10 · FireFox

    画图

    回复
  7. 头像
    爱Joe
    Windows 10 · Google Chrome

    浩哥牛逼 浩哥无敌!

    回复
  8. 头像
    江小白
    Android · QQ Browser

    画图

    回复
  9. 头像
    TEST
    iPhone · Safari

    画图

    回复
  10. 头像
    分享机
    Windows 7 · Google Chrome

    http://82.156.206.243:8888/
    分享一台4h8g
    账户1915781115
    密码123456789

    回复