花式js片段

玩转js

Posted by BY on April 12, 2019

花式片段

for in 循环(枚举对象属性,体现了属性的enumerable特征)

let obj = {a: 10, b: 20}
// 指定属性不可枚举,将不输出
Object.defineProperty(obj, "c", {enumerable: false, value: 30})
for (let p in obj){
    console.log(p)
}
// 输出a和b

for of循环(背后的机制是iterator机制)

for(let e of [1, 2, 3, 4]){
    console.log(e)
}
// 给任意对象添加iterator机制
let obj = {
    [Symbol.iterator]:() => ({
        _value: 0,
        next(){
            if (this._value == 10){
                return {
                    done: true
                }
            }else {
                return {
                    value: this._value++,
                    done: false
                }
            }
        }
    })
}

for (let e of obj) {
    console.log(e);
}
// 输出 0~9

实际操作中不会如上去定义iterator,可以使用generator function

function* foo() {
    yield 0;
    yield 1;
    yield 2;
    yield 3;
}
for (let e of foo()) {
    console.log(e)
}
// 输出0~3

for await of 循环(用过异步生成器为例)

function sleep(duration) {
    return new Promise(function(resolve, reject) {
        setTimeout(resolve,duration);
    })
}

async function* foo() {
    i = 0;
    while(true) {
        await sleep(1000);
        yield i++;
    }
}

for await(let e of foo()) {
    console.log(e);
}
// 每隔1s生成一个数字

带标签的break和continue语句[用处不多]

outer:for(let i = 0 i < 100; i++){
    inner:for(let j = 0; j < 100; j++) {
        if (i == 50 && j == 50) {
            break outer;
        }
    }
}

outer:for(let i = 0 i < 100; i++){
    inner:for(let j = 0; j < 100; j++) {
        if (i == 50 && j == 50) {
            continue outer;
        }
    }
}