一.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接收。Client:Server已经收到信息了
c.Client发包,Server接收。Server:Client要准备发送了
3.四次挥手
a.Client发包,Server接收。Server:Client已请求结束
b.Server发包,Client接收。Client:Server已收到,我等待它关闭
c.Server发包,Client接收。Client:Server此时可以关闭连接了
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.获取Node和Element的返回结果可能不一样
2.如elem.childNodes和elem.children不一样
3.前者会包含Text和Comment节点,后者不会
4.HTMLCollection和NodeList都不是数组,而是"类数组"
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.不会影响实际的功能