20211021

1、js里的事件循环机制（event loop）
答：js事件循环中有异步队列有两种：宏任务队列（macro）和微任务队列（micro）
常见的宏任务比如：setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作、UI 渲染等。
常见的微任务比如：process。nextTick、Pormise、MutationObserver 等。
eventLoop循环过程：
1、初始状态：微任务队列只有一个script脚本；（整体代码为宏任务）
2、【宏任务阶段】执行script代码，创建宏任务到宏任务调用栈中，创建的微任务到微任务调用栈中。
3、【微任务阶段】执行微任务，调出当前微任务中的所有微任务，一次性执行，其中如果有宏任务推到宏任务栈中。
4、【宏任务阶段】执行宏任务，调用当前宏任务栈中的第一个宏任务，其中有创见的微任务推到微任务栈中。
5、如果代码没结束，循环执行3、4步骤。
总结：1、宏任务和微任务是交替进行的
2、每个宏任务只执行栈中的第一个任务，执行完就执行微任务。微任务执行栈中所有的微任务。

console.log('sync');
 
setTimeout(function () {
   console.log('setTimeout')
}, 0);
 
var promise = new Promise(function (resolve, reject) {
   console.log('promise');
   setTimeout(function() {
      promise.then(function(){
        console.log('promise-setTimeout-then')    
      })
      console.log('promise-setTimeout')
   }, 0);
   resolve();
});
 
promise.then(function() {
    setTimeout(function() { 
            promise.then(function(){
                console.log('then-setTimeout-then')    
            })
            console.log('then-setTimeout')
    }, 0);
    console.log('then');
    promise.then(function(){
        console.log('then-than')    
    })
})
////宏任务阶段
sync  
promise
//微任务阶段
then
then - than
//宏任务阶段
setTimeout
//微任务阶段（没有任务，没有输出）
//宏任务阶段
promise - setTimeout
//微任务阶段
promise - setTimeout - then
//宏任务阶段
then - setTimeout
//微任务阶段
then-setTimeout-then

如果不清楚请跳转链接：https://blog.csdn.net/webjhh/article/details/116759051
2、This指向怎么去改变
答：call、apply、bind三个为改变this指向的方法。
共同点：第一个参数都为改变this的指针。若第一参数为null/undefined，this默认指向window
区别：call（无数个参数）参数是一个一个传递。第一个参数：改变this指向；第二个参数：实参；使用之后会自动执行该函数

function fn(a,b,c){
        console.log(this,a+b+c); // this指向window
    }
    fn();
    fn.call(document,1,2,3);//call改变之后this指向document  
    //输出 #document 6   1,2,3是实参 结果相加为6

apply（两个参数）是把所有参数组成一个数组传递。第一个参数：改变this指向；第二个参数：数组（里面为实参）；使用时候会自动执行函数

function fn(a,b,c){
        console.log(this,a+b+c); 
    }
    fn();
    fn.apply(document,[1,2,3]);

bind（无数个参数），第一个参数：改变this指向；第二个参数之后：实参；返回值为一个新的函数

function fn(a,b,c){
    console.log(this,a+b+c); //window
}
let ff = fn.bind('小明',1,2,3); //手动调用一下

使用的时候需要手动调用下返回的新函数（不会自动执行）
3、箭头函数和function的区别
答：1、箭头函数语法比普通函数简洁
2、箭头函数没有自己的this，它里面的this属于函数的上下文中的this
对箭头函数的了解：
语法比较简单
没有this指向arguments/window 如果有就是来自父级作用域。
4、一个array去改变数组里的某一项，视图里会发生变化吗？
答：直接改变数组是不能改变视图的，修改array的length也无法触发视图更新。
触发视图更新的方法有如下几种：
1、Vue.set，可以设置对象或数组的值，通过key或数组索引，可以触发视图更新

// 数组修改
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)
// 对象修改
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)

2、Vue.delete，删除对象或数组中元素，通过key或数组索引，可以触发视图更新

// 数组修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
// 对象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)

3、数组对象直接修改属性，可以触发视图更新

this.array[0].show = true;
this.array.forEach(function(item){
   item.show = true;
});

4、splice方法修改数组，可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

5、数组赋值为新数组，可以触发视图更新

this.array = this.array.filter(...)
this.array = this.array.concat(...)

6、用Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign与Object.assign一样
this.obj = _.assign({},this.obj,{a:1, b:2})

//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})

7、Vue提供了如下的数组的变异方法，可以触发视图更新

push()
pop()
shift()
unshift()
splice()  
sort()
reverse()

20211021

推荐阅读更多精彩内容