2022-02-27前面优质面试题第四章

109 阅读4分钟

一.Ajax Fetch Axios的区别?

1.三者都用于网络请求,但是不同纬度
2.Ajax(Asynchronous Javascript and XML),一种技术统称
3.Fetch一个具体的API
a.浏览器原生API,用于网络请求
b.和XMLHttpRequest一个级别
c.Fetch语法更加简洁,易用,支持Promise
4.Axios,第三个库https://axios-http.com/
a.最常用的网络请求lib(随着Vue火爆起来)
b.内部可用XMLHttpRequest和Fetch来实现
function ajax1(url, successFn) {
    const xhr = new XMLHttpRequest()
    xhr.open("GET", url, false)
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if(xhr.status == 200) {
                successFn(xhr.responseText)
            }
        }
    }
    xhr.send(null)
}
function ajax2(url) {
    return fetch(url).then(res => res.json())
}

二.箭头函数的缺点,哪里不能用箭头函数?

1.没有arguments
2.无法通过call,apply,bind改变this
3.某些箭头函数代码难以阅读
4.对象方法
5.对象原型
6.构造函数 
7.动态上下文的回调函数 
8.Vue生命周期method

三.Vue组件通信方式有几种?尽量说全面

1.props和$emit 
2.自定义事件 
3.$attrs 
4.$parent 
5.$refs
6.provide/inject
7.Vuex

四.防抖和节流

一、函数防抖:事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时
二、场景:搜索框(电商网站商品搜索,后台管理系统数据查询)
const search = document.getElementById('search')
const debounce = (fn, inital) => {
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(fn, inital)
    }
}
search.oninput = debounce(function(){
    console.log('xiaolin')
}, 2000)


一、函数节流:规定在一个单位时间内,事件响应函数只能被触发一次。如果这个单位时间内触发多少函数,只有一次生效
二、场景:a.window.onresize事件 b.mousemove事件
function throttle(fn, interval) {
    var timer;
    return (event) => {
        if (timer) {
            return false
        }
        timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
            fn(event)
        }, interval)
    }
}
window.onresize = throttle(function(event) {
    console.log(1)
}, 2000)


区别:
1.节流:限制执行频率,有节奏的执行
2.防抖:限制执行次数,多次密集的触发只执行一次
3.节流关注"过程",防抖关注"结果"

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

1.px基本单位,绝对单位(其他的都是相对单位)
2.%相对于父元素的宽度比例
3.em相对于当前元素的font-size 
4.rem相对于根节点的font-size
5.vw屏幕宽度的1% 
6.vh屏幕高度的1%
7.vmin两者的最小值,vmax两者的最大值

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

1.建立TCP连接
a.先建立连接(确保双方都有收发消息的能力)
b.再传输内容(如发送给一个get请求)
c.网络连接是TCP协议,传输内容是HTTP协议

2.三次握手-建立连接
a.Client发包,Server接收。Server:有Client要找我
b.Server发包,Client接收。ClientServer已经收到信息了
c.Client发包,Server接收。Server:Client要准备发送了 

3.四次挥手
a.Client发包,Server接收。Server:Client已请求结束
b.Server发包,Client接收。ClientServer已收到,我等待它关闭 
c.Server发包,Client接收。ClientServer此时可以关闭连接了
d.Client发包,Server接收。Server:可以关闭了(然后关闭连接)

七.for in 和for of有什么区别

1.for in 遍历得到key 
2.for of遍历得到value
3.遍历对象:for in可以,for of不可以 
4.遍历Map Set:for in不可以,for of可以
5.遍历generator:for in不可以,for of可以
6.for in用于可枚举数据,如对象、数组、字符串 
7.for of用于可迭代数据、如数组、字符串、Map、Set

八.for await of有什么作用?

1.for await of遍历Promise

九.offsetHeight scrollHeight clientHeight区别?

1.offsetHeight offsetWidth: border + padding + content
2.clientHeight clientWidth: padding + content 
3.scrollHeight scrollWidth: padding + 实际内容尺寸

十.HTMLCollection和NodeList区别

1.获取NodeElement的返回结果可能不一样
2.如elem.childNodes和elem.children不一样
3.前者会包含TextComment节点,后者不会
4.HTMLCollectionNodeList都不是数组,而是"类数组"
const arr1 = Array.from(list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]

十一、Vue computed 和watch区别

1.computed用于计算产生新的数据 有缓存
2.watch用于监听现有数据

十二.Vuex mutations 和 actions区别

1.mutations:原子操作;必须同步代码
2.actions:可包含多个mutations;可包含异步代码

十三.JS严格模式有什么特点

1.全局变量必须先声明
2.禁止使用with
3.创建eval作用域
4.禁止this指向window
5.函数参数不能重名

十四.HTTP跨域请求时为何发送options请求

1.浏览器同源策略
2.同源策略一般限制Ajax网络请求,不能跨域请求server
3.不会限制<link><img><script><iframe>加载第三方资源
4.options请求,是跨域请求之前的预检查
5.浏览器自行发起的,无需我们干预
6.不会影响实际的功能