面试总结，事件循环机制和react面试题（公司规模100人左右）

1.今天在一家小公司做笔试题，发现自己还是有很多不足的地方 一共5道题，自己记录一下。以免日后找不到

1.考察同步异步问题

function test(){
    console.log("start")
    setTimeout(()=>{
        console.log("children2")
        Promise.resolve().then(()=>{console.log("children2-1)})
    },0)
    setTimeout(()=>{
        console.log("children3")
        Promise.resolve().then(()=>{console.log("children3-1)})
    },0)
    Promise.resolve().then(()=>{console.log("children1)})
    console.log("end")
}
test()

结果：

个人总结（如有错误请纠正）：

js事件循环机制中，同一层级情况下，同步任务先执行，再到微任务，再到宏任务（重点关注同一层级）。 分析：

第一次是,所以第一次事件循环执行结果分析如下：

1)同步任务：start end

2)同步任务执行完毕后检查任务队列是否有异步任务，有的话取出来，明显这里有异步任务（有微任务和宏任务），结果先执行微任务：children1；再执行宏任务，宏任务按顺序执行，先执行第一个setTimout,再执行第二个setTimeout（实际执行顺序还跟第二个参数多少秒有关，延迟久的后执行）,到此第一次循环结束。

3)第二次循环各个setTimeout的，再次按上面先同步->异步（先微任务->宏任务），按此顺序直到结束。

2.考察react的setState执行机制和同步异步问题

运行环境：codesandbox.io/p/sandbox/a…

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: 0,
    };
  }

  componentDidMount() {
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val, "第1次"); //
    this.setState({ val: this.state.val + 1 });
    console.log(this.state.val, "第2次"); //
    setTimeout(() => {
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val, "第3次"); //
      this.setState({ val: this.state.val + 1 });
      console.log(this.state.val, "第4次"); //
    }, 0);
  }

  render() {
    return <div>{this.state.val}</div>;
  }
}
export default App;

执行结果：

总结：

• 在组件生命周期或React合成事件中，setState是异步
• 在setTimeout或者原生dom事件中，由于setTimeout是宏任务，useState是微任务，因此可以拿到useState更新后的值。
• 对同一个值进行多次 setState， setState 的批量更新策略会对其进行覆盖，取最后一次的执行结果。

3.考察var定义变量提升和作用域问题：

4.考察引用地址问题

var a = {n:1};
var b = a;
a.x=a={n:2};
console.log(a.x)
console.log(b.x)

结果：

这题有点蒙，借助百度通义千问ai，解释如下，有大佬可以解释更清楚那更好了