零碎知识点记录（持续记录）

目录

1、使用 @babel/plugin-proposal-optional-chaining 主要是解决链式调用某一步会出现 undefined 或 null 导致程序报错的问题

2、配置webpack，运行dev-server时出现 warning：

3、Git报错 - refusing to merge unrelated histories （拒绝合并不相关的历史）

4、利用 Generator 函数实现斐波那契数列

5、Reflect.ownKeys()的作用

6、 微任务和宏任务

---

 

---

1、使用 @babel/plugin-proposal-optional-chaining 主要是解决链式调用某一步会出现 undefined 或 null 导致程序报错的问题

例如：

let obj = {
    obj1: {
        obj2: {
            fn1 () {
                console.log('hello')
            }
        }
    }
}

正常调用为： obj.obj1.obj2.fn1()，但是如果中间有一步导致某对象为undefined了，那么整个程序会报错。

使用该插件后，可以写为：obj?.obj1?.obj2?.fn1() 如果中间有对象变为undefined，那么会返回undefined，不会报错。

不仅仅用于对象，数组中也可以，如：

let arr = [1, 2, 3]

arr?.[0] // 判断数组的第1项是否存在


arr?.map() // 避免arr为undefined而报错

函数中也可以：

function fn (callback) {

    callback?.()

}

 

babel配置需要在.babelrc文件中配置 ：

plugins："@babel/plugin-proposal-optional-chaining"

---

2、配置webpack，运行dev-server时出现 warning：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)

可以通过配置关闭提示：

performance: {
 
    hints:false   
 
}

performance 是优化的意思，设置 hints：false 只是把webpack的warning 给关闭！ 

 

杀毒软件一直提示有病毒怎么办？

很简单，把杀毒软件卸载就行了（笑）

 

---

3、Git报错 - refusing to merge unrelated histories （拒绝合并不相关的历史）

      git pull origin master --allow-unrelated-histories 即可

---

4、利用 Generator 函数实现斐波那契数列

function* gen() {
 let [current, prev] = [0 ,1]
 for(;;) {
   yield prev
   let temp = prev + current
   current = prev
   prev = temp
 }
}


  for(let v of gen()) {
    if (v > 1000) break;
    console.log(v)
  }            

---

5、Reflect.ownKeys()的作用

用于遍历所有对象的属性并返回为数组，不管其属性是否可以遍历

---

6、 微任务和宏任务

微任务必定是在某个宏任务执行的时候创建的。

为什么？ 

因为 执行 执行栈就是一个宏任务，在执行 执行栈的时候，如果遇到异步任务，则会根据类型分配到不同的队列中，即微任务队列和宏任务队列。 微任务队列： promise、process.nextTick 等   宏任务队列：  setTimeout setInterval 等。 而在执行下一个宏任务之前，会优先执行微任务。

假如，我在promise里面写的是同步的代码，而非异步代码，那么promise还会被加入到微任务队列吗？

不会。promise本身是同步的，但是其中的异步任务仍会改变。

但是如果promise里面写的是同步任务，外部仍调用了，promise.then(callback)方法，callback的执行是异步的，且该异步任务是微任务。

 

微任务 和 宏任务的区别是什么？

在执行宏任务的时候，会有一次 页面的重新渲染。即：

宏任务1 - >  渲染页面-> 宏任务2

而在执行完宏任务1后，如果微任务队列里面有任务，那么在渲染页面前，会执行完所有的微任务。

 

关于 js 的 消息队列 和 执行栈 

js仅有1个线程，但是浏览器本身有多个线程。

js代码会在执行栈里面执行，如果碰到异步事件(DOM事件的监听、ajax、setTimeout等)，那么会用事件处理线程将异步事件放到相应的线程去执行。执行完毕后，事件处理线程会在一个合适的时间（DOM事件被触发、ajax数据回来、倒计时结束），将其 回调函数 放到 消息队列。执行栈里面的主代码执行完毕后，会去消息队列里面取回调函数进行执行，执行完毕后，再去消息队列里面取，如此循环。 这种被称为 event loop 即事件循环。

---