2023-01-20

[kongmingLatern]

2023-01-20

1. 你学习了哪些知识？

2. 学习过程中是否有存在的问题？

关于如何写每日任务：

如何写每日任务

[kongmingLatern]

今日学习总结

1. 生成器的提前结束

1.1 iterator.return

作用：

• return 传值后这个生成器函数就会结束，之后调用 next 就不会继续生成值了。

  generator.return('next1')

  1.2 iterator.throw

  generator.throw(new Error('error msg'))

  作用：

• 抛出异常后我们可以在生成器函数中捕获异常
• 但是在 catch 语句中不能继续 yield 新的值了，但是可以在 catch 语句外继续使用 yield 继续中断函数的执行

function* foo() {
    console.log('函数开始执行')
    try {
        yield "why"
    } catch(err) {
        console.log('内部错误', err)
    }
    yield 222

    console.log('函数结束执行')
}

1.3 自定义类的可迭代对象

yield* obj（可迭代对象）

数组

const arr = ["asd", "asbdf", "asgfdg"]

function* createArrayObject(arr) {
    yield* arr
}
const nameIterator = createArrayObject(arr)
console.log(nameIterator.next())
console.log(nameIterator.next())
console.log(nameIterator.next())

类

class Person {
    constructor(name, age, height, friends) {
        this.name = name
        this.age = age
        this.height = height
        this.friends = friends
    }
    *[Symbol.iterator]() {
        *yield this.friends
    }
}
const p = new Person('syj', 19, 190, ["ckh", "wjl", "fzh", "wl", "wdq"])
for(const item of p) {
    console.log(p) // ckh wjl fzh wl wdq
}

const pIterator = p[Symbol.iterator]()
console.log(pIterator.next())
console.log(pIterator.next())
console.log(pIterator.next())
console.log(pIterator.next())
console.log(pIterator.next())

1.4 生成器处理逻辑的封装优化

function exeGenFn(genFn) {
    const generator = genFn()

    function exec(res) {
        const result = generator.next()
        if(result.donw) return
        result.value.then(res => {
            exec(res)
        })
    }
    exec()
}
exeGenFn(getData)

2. 宏任务与微任务

事件循环中并非只维护着一个队列，事实上是有两个队列：

2.1 宏任务

• ajax
• setTimeout
• setInterval
• DOM 监听
• UI Rendering

  2.2 微任务

• Promise 的 then 回调
• Mutation Observer API
• queueMicroTask() 等

  2.3 优先级

  1. main script 中的代码优先执行（编写的顶层 script 代码）
  2. 在执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行
  3. 也就是宏任务执行之前，必须保证微任务队列是空的；
  4. 如果不为空，那么就优先执行微任务队列中的任务（回调）

     2.3 执行顺序

     在每次执行宏任务前，都要保证微任务里的内容清空

console.log('script start')

function requestData(url) {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('setTimeout')
            resolve(url)
        }, 2000)
    })
}

function getData() {
    console.log('getData start')
    requestData("why").then(res => {
        console.log('then1-res': res)
    })
    console.log('getData end')
}

getData()
console.log('script end')

结果：

script start
getData start
getData end
script end
setTimeout
then1-res: why

2.4 面试题

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(() => {
    console.log('setTimeout')
}, 0)

async1()

new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function() {
    console.log('promise2')
})

console.log('script end')

答案：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout