前端百日进阶-3.ES6中不常用但需要知道的新东西-一一网

带标签的模板字符串

function nice(a, b) {
    console.log(a, b) //[ '1 ', ' 3' ] hh
}
const name = 'hh'
nice`1 ${name} 3`
复制代码

Proxy

用于对象的代理

const person = {
    name: 'meng',
    age: 18
}
const p = new Proxy(person, {
    // 当获取get时执行
    get(obj, prop) {
        console.log(obj, prop) // { name: 'meng', age: 18 } age
        return obj[prop]
    },
    // 当设置时执行
    set(obj, prop, value) {
        console.log(obj, prop, value) //{ name: 'meng', age: 18 } name s
        obj[prop] = value
    }
})

console.log(p.age)
p.name = 's'
console.log(p.name)
复制代码

以前也有个defineProperty Api也可以对对象进行拦截但远不如proxy强大，proxy不止是可以对get和set进行拦截。还有很多的拦截操作: mdn proxy

Reflect

这个对象把以前所有对对象进行的操作封装成了一个静态类.比如获取对象，更改对象属性，删除对象属性之类的。

const person = {
    name: 'meng',
    age: 18
}

// 若是以前则使用perosn['age']来获取对象中的值
console.log(Reflect.get(person, 'age'))
Reflect.set(person, 'age', 19)
console.log(Reflect.get(person, 'age'))
复制代码

更多的Reflect静态方法参考:mdn reflect

个人认为把以前对象操作都用reflect进行操作可能是为了形成统一规范吧。

Symbol

使用Symbol包裹的属性只能用对应Symbol属性去获取。

const s = Symbol('like')
const person = {
    name: 'meng',
    age: 18,
    [s]: 'fish'
}

console.log(person[s]) // fish
console.log(person[Symbol('like')]) // undefined

// 使用symbol包裹的属性也无法被for循环遍历出来
// 所以当对象需要私有变量时可以使用symbol
for (const [key, value] of Object.entries(person)) {
    console.log(key, value)
}
复制代码

迭代器

只要对象中含有Symbol.iterator都是实现了可迭代接口

实现了可迭代接口的数据都可以被for of循环遍历

Array
String
Map
Set

const items = ["1", "2", "3"];
// 创建迭代器
const it = items[Symbol.iterator]();

console.log(it.next(0)) // { value: '1', done: false }
console.log(it.next(0)) // { value: '2', done: false }
console.log(it.next(0)) // { value: '3', done: false }
console.log(it.next(0)) // { value: undefined, done: true }
复制代码

也可以实现自己的可迭代接口进行遍历

const obj = {
    [Symbol.iterator]: function() {
        return {
            next() {
                return {
                    value: 1,
                    done: false
                }
            }
        }
    }
}

const it = obj[Symbol.iterator]()
console.log(it.next())

// 会一直循环下去
for (const item of obj) {
    console.log(item)
}
复制代码