面试题汇总（27）

1. Ajax Fetch Axios 的区别？

三者都用于网络请求，但是不同维度。

• Ajax(Asynchronous JavaScript and XML)，一种技术统称
• Fetch，浏览器提供的 API，和 XMLHttpRequest 一个级别，Fetch 语法更加简洁、易用，支持 Promise
• Axios，最常用的网络请求 lib，内部可用 XHR 和 Fetch 实现

2. 箭头函数的缺点，哪里不能用箭头函数？

3. Vue 组件通讯方式有几种？尽量说全面。

4. 使用 XMLHttpRequest 实现 Ajax

function ajax1(url, method, data, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(null, xhr.responseText);
    } else if (xhr.readyState === 4) {
      callback(new Error("Request failed"));
    }
  };
  xhr.send(JSON.stringify(data));
}

function ajax2(url, method, data, callback) {
  fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  })
    .then((response) => response.json())
    .then((data) => callback(null, data))
    .catch((error) => callback(error));
}

5. 节流和防抖

• 防抖，防止抖动，“你先抖动着，啥时候停了，再执行下一步”，例如一个输入框，等输入停止之后，再执行搜索

function debounce(fn, delay) {
  // 修复拼写错误 dobounce -> debounce
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args); // 使用箭头函数保持 this 指向
      timer = null; // 清空 timer 引用
    }, delay);
  };
}

• 节流，节省交互沟通。流，不一定指流量，“别急，一个一个来，按时间节奏来，插队者无效”，例如，drag 或 scroll 事件

function throttle(fn, delay) {
  let timer = null;
  return function (...args) {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
}

6. px % em rem vw vh 有什么区别

• px 基本单位，绝对单位
• % 相对于父元素的宽度比例
• em 相对于当前元素的 font-size
• rem 相对于根元素的 font-size
• vw 相对于视窗宽度的比例
• vh 相对于视窗高度的比例
• vmin 相对于视窗较小的尺寸
• vmax 相对于视窗较大的尺寸

7. 箭头函数有有什么缺点

• 没有 arguments

8. 什么时候不能使用箭头函数

• 不能使用 apply, call, bind 改变 this
• 某些箭头函数较为复杂时，可读性较差
• 对象方法获取不到 this
• 对象的原型方法同理
• 构造函数不行（不能 new）
• 动态上下文中的回调函数不行
• Vue 生命周期和 method 不行

9. 请描述 TCP 三次握手和四次挥手

建立 TCP 连接

• 先建立链接（确保双方都有收发消息的能力）
• 再传输内容
• 网络连接是 TCP 协议，传输内容是 HTTP 协议

三次握手

• Client 发包，Server 接受。Server：有 Client 要找我
• Server 发包，Client 接受。Client：Server 已经收到消息了
• Client 发包，Server 接受。Server：Client 要准备发送了

-- SYN --> <-- SYN + ACK -- -- ACK -->

四次挥手

• Client 发包，Server 接受。Server: Client 已请求结束
• Server 发包，Client 接受。Client: Server 已收到，我等待它关闭
• Server 发包，Client 接受。Client: Server 此时可以关闭链接了
• Client 发包，Server 接受。Server: 可以关闭了（然后关闭连接）

-- FIN --> <-- ACK -- <-- FIN -- -- ACK -->

10. for...in 和 for...of 的区别

• for...in 用于遍历对象的可枚举属性，如对象、数组、字符串等
• for...of 用于遍历可迭代对象、如数组、字符串、Map、Set 等

11. for await ...of 有什么作用？

遍历 promise

12. offsetHeight scrollHeight clientHeight 有什么区别

offsetHeight = content + padding + scroll + border clientHeight = content + padding scrollHeight = padding + 实际内容尺寸

13. HTMLCollection 和 NodeList 有什么区别？

• DOM 是一颗树，所有节点都是 Node
• Node 是 Element 的基类
• Element 是其他 HTML 元素的基类，如 HTMLDivElement
• HTMLCollection 是 Element 的集合
• NodeList 是 Node 的集合

Vue 中 computed'和 watch 的区别

• computed 是计算属性，依赖其他属性计算值，并且具有缓存功能
• watch 是监听器，监听属性值的变化，进行一些操作

Vue 组件通讯的方式有几种？

• props / $emit
• 自定义事件
• $attrs /$listeners
• $parent
• $refs
• provide / inject
• Vuex