2021大场面试题（四）

1.改造下面的代码，使之能输出 0 - 9，写出你能想到的所有解法

for (var i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

2.Virtual DOM 真的比操作原生DOM快吗？谈谈你的看法。

性能和可维护性的取舍。框架的意思在于为你掩盖底层的DOM操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护，没有任何框架可以比纯手动的优化DOM操作更快，因为框架的DOM操作层需要应对任何层上API可能产生的操作，它的实现必须是普适的，针对任何一个benchmark, 我都可以写出比任何框架更快的手动优化，但是那有什么意思呢？在构建一个实际应用的时候，你难道为每个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能，框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你过得去的性能。

react基本思维模式是每次有变动就重新渲染整个应用，如果没有Virtual DOM，简单来想就是直接重置 innerHTML，很多人都没有意识到，在一个大型列表所有数据都变了情况下，重置innerHTML 其实是一个还算合理的操作，真正的问题是在 “全部重新渲染” 的思维模式下，即使只有一行数据变了，它也需要重置整个innerHTML, 这时候显然就有大量的浪费。

 相比起React，其他MVVM系列框架采用的是数据绑定，通过指定绑定等，观察数据变化并保留对实际DOM元素的引用，当有数据变化时进行对应的操作，MVVM的变化检查是数据层面的，而React 的检查是DOM 结构层面的。

MVVM性能也根据变动检测的实现原理有所不同，Angular 脏检查使得变动都有固定的O的代价，Knockout/Vue/Avalon 都采用了依赖收集，在js 和 DOM 层面都是 O （change）

3.下面的代码打印什么内容，为什么？

var b = 10;
(function() {
  b = 20;
  console.log(b);
})()

4.浏览器缓存读取规则。

5.使用迭代的方式实现flatten函数。

6.为什么Vuex 的 mutation 和 Redux 的reducer 中不能做异步操作？

7.（京东）下面代码中 a 在什么情况下会打印 1 ？

var a = ？;
if (a == 1 && a == 2 && a == 3) {
  console.log(1);
}

8.介绍下BFC及其应用

9.在Vue中，子组件为何不可以修改父组件传递的prop

10.下面代码输出什么

var a = 10;
(function() {
  console.log(a)
  a = 5;
  console.log(window.a);
  var a = 20;
  console.log(a);
})()