前端习题-基础知识

ajax fetch axios 的区别

ajax 是一种技术称呼，即使用 JS 进行异步请求，不是具体的 API 和库。基于当时 JS 规范，异步请求主要使用 XMLHttpRequest 这个底层 API 。

• fetch 是新的异步请求 API ，可代替 XMLHttpRequest。
• axios 是第三方库。

// 用 XMLHttpRequest 实现 ajax：
function ajax(url, successFn) {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url, false)
    xhr.onreadystatechange = function () {
        // 这里的函数异步执行，可参考之前 JS 基础中的异步模块
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                successFn(xhr.responseText)
            }
        }
    }
    xhr.send(null)
}

// 用 fetch 实现一个 ajax
function ajax(url) {
    return fetch(url).then(res => res.json())
}

节流和防抖

防抖和节流都用于处理频繁触发的操作，优化操作体验。
防抖是限制执行次数，多次密集的触发只执行一次。如输入搜索框。
节流是限制执行次数，有节奏的执行。如拖拽回调/上传进度的回调。

触发频率：

• 防抖，不固定。
• 节流，固定。

场景：

• 防抖，结果式，即一次调用即可。
• 节流，过程式，即需要持续一个过程，一次不够。

// 实现防抖
function debounce(fn, delay = 200) {
    let timer = 0

    return function () {
        if (timer) clearTimeout(timer)

        timer = setTimeout(() => {
            fn.apply(this, arguments) // 透传 this 和参数
            timer = 0
        }, delay)
    }
}

// 实现节流
function throttle(fn, delay = 100) {
    let timer = 0

    return function () {
        if (timer) return

        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = 0
        }, delay)
    }
}

箭头函数的缺点

箭头函数的缺点：

• arguments 参数
• 无法改变 this

不适用的场景：

• 对象方法
• 对象原型
• 构造函数
• 动态上下文的回调函数
• Vue 生命周期和methods

for…in 和 for…of 的区别

for…in 遍历 key , for…of 遍历 value。
for…in 可以遍历对象，for…of 不可以。
for…of 可以遍历 Map/Set ，for…in 不可以。
for…of 可遍历 generator ，for…in 不可以。

• for…in 遍历一个对象的可枚举属性，如对象、数组、字符串。针对属性，所以获得 key
• for…of 遍历一个可迭代对象，如数组、字符串、Map/Set 。针对一个迭代对象，所以获得 value

连环问：for await…of
用于遍历异步请求的可迭代对象。

JS 严格模式

• 全局变量必须声明
• 禁止使用 with
• 创建 eval 作用域
• 禁止 this 指向全局作用域
• 函数参数不能重名

Vue computed 和 watch 区别

• computed 就已有数据产出新数据，有缓存
• watch 监听已有数据

Vue 组件通讯

• 父子组件通讯
  • props emits this.$emit
  • $attrs （也可以通过 v-bind="$attrs" 向下级传递）
  • $parent $refs
• 多级组件上下级
  • provide inject
• 跨级、全局
  • 自定义事件
  • Vuex

Vuex中mutation和action的区别

• mutation
  • 建议原子操作，每次只修改一个数据，不要贪多
  • 必须是同步代码，方便查看 devTools 中的状态变化
• action
  • 可包含多个 mutation
  • 可以是异步操作

px、%、em、rem、vw/vh 的区别

• px：像素，基本单位，绝对单位(其他的都是相对单位)。
• %：相对于父元素的尺寸。
• em：相对于当前元素的 font-size。
  首行缩进可以使用 text-indent: 2em。
• rem = root em
  相对于根元素的 font-size 。可以根据媒体查询，设置根元素的 font-size ，实现移动端适配。
• vw 屏幕宽度的 1%
• vh 屏幕高度的 1%
• vmin 两者最小值
• vmax 两者最大值

offsetHeight、clientHeight 、scrollHeight区别

• offsetHeight： border + padding + content
• clientHeight： padding + content
• scrollHeight： padding + 实际内容的高度
• scrollTop scrollLeft：DOM 内部元素滚动的距离

HTMLCollection 和 NodeList 的区别

HTMLCollection 和 NodeList 的区别，Node 和 Element 的区别

DOM 结构是一棵树，树的所有节点都是 Node ，包括：document，元素，文本，注释，fragment 等。

• HTMLCollection 是 Element 集合，NodeList 是 Node 集合
• Node 是所有 DOM 节点的基类，Element 是 html 元素的基类

TCP 连接 三次握手 四次挥手

握手，是建立连接。挥手，就是告别，就是关闭连接。

三次握手：
过程

• 客户端发包，服务端收到。服务端确认：客户端的发送能力是正常的。
• 服务端发包，客户端收到。客户端确认：服务端的接收能力是正常的。
• 客户端发包，服务端收到。服务端确认：客户端即将给我发送数据，我要准备接收。

四次挥手：
过程

• 客户端发包，服务端接收。服务端确认：客户端已经请求结束
• 服务端发包，客户端接收。客户端确认：服务端已经收到，我等待它关闭
• 服务端发包：客户端接受。客户端确认：服务端已经发送完成，可以关闭
• 客户端发包，服务端接收。服务端确认：可以关闭了

跨域为何需要 options 请求？

浏览器同源策略，默认限制跨域请求。跨域的解决方案：

• jsonp
• CORS

options 请求就是对 CORS 跨域请求之前的一次预检查，检查成功再发起正式请求，是浏览器自行处理的。