Ajax,Fetch,axios 区别?

Ajax 是一种网络请求的统称;

Fetch 是一个原生 API,和 XMLHttpRequest 同一级别;

Axios 是一个第三方库;

节流防抖

1 有什么区别?

2 分别用于什么场景?

防抖:防止抖动,"你先抖动着,什么时候停止,再执行下一步".例如:搜索框的联想搜索

function debounce(fn, delay = 2000) {
  let timer = 0;
  return function () {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = 0;
    }, delay);
  };
}

节流:节省交互沟通;"别急一个一个来,按照时间顺序,插队无效";例如:拖拽,滚动条触发事件

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

答案:

节流:限制执行频率,有节奏的执行;

防抖:限制执行次数,多次密集的触发只执行一次;

节流关注"过程",防抖关注"结果";

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

px 基本单位,绝对单位(其他都是相对单位);

% 是相对于父元素的单位;

em 是相对于当前元素的 font-size;

rem 是相对于根节点的 font-size;(rem:root 的 em)

vw 屏幕宽度的 1%;

vh 屏幕高度的 1%;

vmin 两者取最小值,vmax 两者的最大值;

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

箭头函数的缺点?

没有 arguments;

不能用 apply,call,bind 改变 this;
什么时候不能用箭头函数?

对象的方法;

原型的方法;(TODO:原型和原型链)

构造函数;

动态上下文中的回调函数(函数中包含 this);

Vue 生命周期(js 对象)和 method;(React 组件(非 hooks)他本质上是一个 ES6 的 class)

请描述 TCP 的三次握手和四次挥手

建立 TCP 链接

先建立连接(确保双方都有收发消息的能力);

在传输内容;

网络连接是 TCP 协议,传输内容是 HTTP 协议;
三次握手-建立连接

Client 发包,Server 接收.Server:有 Client 找我;

Server 发包,Client 接收.Client:Server 已经收到信息了;

Client 发包,Server 接收,Server:Client 要准备发送了;
四次挥手-关闭连接

Client 发包,Server 接收.Server:Client 已经请求结束;

Server 发包,Client 接收.Client:Server 已收到,我等待关闭;

Server 发包,Client 接收.Client:Server 此时可以关闭连接了;

Client 发包,Server 接收.Server:可以关闭了(关闭连接);

for...in 和 for...of 又什么区别?
1. key 和 value 的区别
  
  for...in 遍历得到 key
  
  for...of 遍历得到 value
2. 适用于不同的数据类型
  
  遍历对象:for...in 可以,for...of 不可以;
  
  遍历 Map,Set:for...of 可以,for..in 不可以;
  
  遍历 generator:for..of 可以,for...in 不可以;
3. 可枚举和可迭代
  
  for..in 用于可枚举数据,如对象,数组,字符串
```
const obj={a:100};
Object.getOwnPropertyDescriptors(obj)
//enumerate:true;可枚举
```
for..of 用于可迭代数据,如数组,字符串,map,set
```
const arr=['a','b','c'];
arr[Symbol.iterator];//是否含有Symbol.iterator属性
//执行这个函数
//含有next方法
```
for await...of 有什么作用?(TODO:promise,async,await)

用于遍历多个 promise;

offsetHeigth scrollHeight clientHeight 区别?(TODO:盒模型)

offsetHeigth:border+padding+content;

clientHeight:padding+content;

scrollHeight:border+实际内容尺寸;

HTMLCollection 和 NodeList 区别?

Node 和 Element DOM 是一棵树,所有节点都是 Node; Node 是 Element 的基类; Element 是其他 HTML 元素的基类,如 HTMLDivElement;
HTMLCollection 和 NodeList 区别? 获取 Node 和 Element 的返回结果可能不一样,如:ele.childNodes 和 ele.children 不一样,前者会包含 Text 和 comment 节点,后者不会;
HTMLCollection 和 NodeList 不是数组,是类数组(类数组转换成数组) const arr1=Arrery.from(list); const arr2=Arrery.prototype.slice.call(list); const arr3=[...list]

vue 中 computed 和 watch 有什么区别

两者用途不同

computed 用于计算产生新的数据;

watch 用于监听现有数据;

computed 有缓存,methods 没缓存;

数据不变 computed 不会重新计算,methods 会重新计算;

Vue 通讯方式

js 严格模式有什么特点?

开启严格模式'use strict',可开启全局或者某个作用域的严格模式;

特点:

全局变量必须先声明

禁止使用 whit

创建 eval 作用域

禁止 this 指向 window

函数参数不能重名

Http 跨域请求时为何发送 option 请求?

options 请求,是跨域请求之前的预检查;

浏览器自行发起的,无需我们干预;

不会影响实际开发;

跨域请求

浏览器同源策略

同源策略一般限制 Ajax 网络请求,不能跨域请求 Server

不会限制<link> <img> <Script> <iframe>加载第三方资源

JSONP:

A 网页定义一个函数,并通过 script 访问一个网址(script 不会跨域)

B 网页返回一个字符串,onSuccess({'error':0,'data':{/_内容_/}}) CORS:CORS 服务端配置允许跨域的网址

基础面试题(整理)