面试回顾题

[Silencer-1984]

长期更新

冒泡和捕获

DOM 事件标准描述了事件传播的 3 个阶段：

1. 捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
2. 目标阶段（Target phase）—— 事件到达目标元素。
3. 冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。

   冒泡

当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
// 点击p，会依次执行p、div、from的事件

大部分事件都会冒泡。focus、bulr不会。冒泡用event.stopPropagation()阻止。event.stopPropagation()停止向上移动，但是当前元素上的其他处理程序都会继续运行。阻止冒泡严格上是阻止继续传播冒泡。 有一个 event.stopImmediatePropagation()方法，可以用于停止冒泡，并阻止当前元素上的处理程序运行。使用该方法之后，其他处理程序就不会被执行。

不要在没有需要的情况下停止冒泡！

冒泡很方便。不要在没有真实需求时阻止它：除非是显而易见的，并且在架构上经过深思熟虑的。

例如捕获在整个窗口上的点击，以追踪用户的行为（用户点击的位置）。有些分析系统会这样做。通常，代码会使用 document.addEventListener('click'…) 来捕获所有的点击。如果阻止冒泡这样的方式就不可行。

捕获

捕获阶段很少被使用。通常我们看不到它。它的过程与冒泡刚好相反

事件委托

事件委托又叫事件代理。就是指绑定事件不绑定本身而是绑定父级或者其他元素。

当一个节点中的子节点是动态生成的（或者很多），那么子节点需要注册事件的话应该注册在父节点上。这样会节省内存也不需要给子节点注销事件（React之前就是这么做的）。

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    let ul = document.querySelector('#ul')
    ul.addEventListener('click', (event) => {
        console.log(event.target);
    })
</script>

intersectionObserver实现图片懒加载和无限滚动

io = new IntersectionObserver(callback, option);
// 开始观察
io.observe(document.getElementById('example'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

var intersectionObserver = new IntersectionObserver(
  function (entries) {
    // 如果不可见，就返回
    if (entries[0].intersectionRatio <= 0) return; // intersectionRatio<0 表示不可见
    loadItems(10);
    console.log('Loaded new items');
  });

// 开始观察
intersectionObserver.observe(
  document.querySelector('.scrollerFooter') // 观察最底部
);

常见的content-type

常见的媒体格式类型如下：

text/html ： HTML格式 text/plain ：纯文本格式 text/xml ： XML格式 image/gif ：gif图片格式 image/jpeg ：jpg图片格式 image/png：png图片格式 以application开头的媒体格式类型：

application/xhtml+xml ：XHTML格式 application/xml： XML数据格式 application/atom+xml ：Atom XML聚合格式 application/json： JSON数据格式 application/pdf：pdf格式 application/msword ： Word文档格式 application/octet-stream ： 二进制流数据（如常见的文件下载） application/x-www-form-urlencoded ：

中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式） 另外一种常见的媒体格式是上传文件之时使用的：

multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

[Silencer-1984]

yarn和npm的区别

虽然很无语，但是还是记录下来吧

• 速度快 。速度快主要来自以下两个方面： 并行安装：无论 npm 还是 Yarn 在执行包的安装时，都会执行一系列任务。npm 是按照队列执行每个 package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。而 Yarn 是同步执行所有任务，提高了性能。 离线模式：如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。
• 安装版本统一：为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。
• 多注册来源处理：所有的依赖包，不管他被不同的库间接关联引用多少次，安装这个包时，只会从一个注册来源去装，要么是 npm 要么是 bower, 防止出现混乱不一致。

[Silencer-1984]

如果判断一个空对象

1.最常见的思路，for...in... 遍历属性，为真则为“非空数组”；否则为“空数组”

for (var i in obj) { // 如果不为空，则会执行到这一步，返回true
    return true
}
return false // 如果为空,返回false

2.通过 JSON 自带的 stringify() 方法来判断:

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

if (JSON.stringify(data) === '{}') {
    return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

3.ES6 新增的方法 Object.keys():

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

如果我们的对象为空，他会返回一个空数组，如下：

if (Object.keys(object).length === 0) {
    return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

[Silencer-1984]

for...in与for...of的区别

• for in是遍历（object）键名，for of是遍历（array）键值。
• for...in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性，对象数组等）
• for...of语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，for...of不可循环对象

for await of 简介

for await of 用于异步迭代。约等于promise.all.

for和forEach谁快

for更快因为forEach每一次循坏都会创建新的函数，而for只创建一次函数。