1、防抖节流
防抖 debounce
防止抖动、‘先抖完再执行下一步’，比如一个输入框，无论你持续输入多少次，等你输入完成只后再处理
限制执行次数，多次密集的触发至执行一次，关注结果
节流 throttle 节省相互沟通，‘一个一个来，按时间节奏，插队无效’，比如drag和scroll期间触发回调，要设置一个时间间隔
限制执行频率，有节奏的执行，关注过程
// 防抖
function debounce(fn, delay = 200) {
let timer = 0;
return function () {
if (timer) clearTimeout(timer); // 当前存在任务则清除当前任务，delay时间后执行新的任务
timer = setTimeout(() => {
fn.apply(this, arguments); // 透传this和参数
timer = 0
}, delay)
}
}
const input1 = document.getElementById('input1');
input1.addEventListener('keyup', debounce(() => {
console.log('触发了搜索', input1.value);
}, 3000))
// 节流
function throttle(fn, delay = 200) {
let timer = 0;
return function () {
if (timer) return; // 当前存在任务则不执行新任务
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = 0;
}, delay)
}
}
const box = document.getElementById('box');
box.addEventListener('drag', throttle((e) => {
console.log('drag', e.offsetY)
}, 300))
2、箭头函数
// 箭头函数的缺点
1、没有argument
2、无法通过apply、bind、call改变this，箭头函数的this指向定义时的父元素的this
// 不适用情况
1、--------------------------------------------------对象方法
const obj = {
name: 'aa',
getName: () => {
console.log(this.name)
}
}
console.log(obj.getName()) // 空 指向window
2、---------------------------------------------------原型方法
const obj = {
name: 'aa',
}
obj._proto_.getName = () => {
return this.name;
}
console.log(obj.getName()) // 空 指向window
3、----------------------------------------------------构造方法
箭头函数不可以new，没有constructor
4、----------------------------------------------------动态上下文中的回调函数
const box = document.getElementById('box');
box.addEventListener('click', () => {
// this === window
this.innerHTML = 'clicked' // error
})
5、----------------------------------------------------Vue生命周期和method
vue组件本质生是一个js对象
// react Class组件可以（hooks除外）， 是es6中的Class
3、原型、原型链
每个对象都拥有一个原型对象 当访问对象属性时会在该对象和原型对象以及原型对象的原型上搜索直到搜索为止原型链的末尾
4、ajax
// XMLHttpRequest 实现ajax
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.responseType)
}
}
}
xhr.send(null);
}
// fetch（浏览器原生api、语法简介易用，支持promise） 实现ajax
function ajax2(url) {
return fetch(url).then(res => res.json());
}
// axios 第三方库， 内部可以使用xmlHttpRequest和fecth实现
5、for in 和for of
for in 得到index
for of 得到value
适用数据类型
for..in 可以遍历对象，不可以遍历Map和Set，不可以遍历generator
for..of 反之
可枚举 vs 可迭代
for .. in 用于可枚举数据， enumable为true的数据，如对象、数组、字符串，得到key
for ..of 用于可迭代数据， [Symbol.iterator]如数组、字符串、Map、Set， 得到value
for await ..of 用于遍历多个promise
const p1 = Promise.resolve(100);
const p2 = Promise.resolve(200);
const p3 = Promise.resolve(300);
const list = [p1, p2, p3]
// Promise.all(list).then(res => console.log(res)) // [100, 200, 300]
for await (let res of list) {
console.log(res); // 100, 200, 300
}
6、跨域请求
1、跨域
浏览器同源策略（协议、域名、端口一致），非同源下的请求，会产生跨域问题，限制ajax网络请求，不会限制link、img、script、iframe加载第三方资源
解决跨域-JSONP、CORS（都需要服务端进行控制）
1、JSONP
客户端定义onSuccess全局函数，在script请求，服务端返回一段字符串，在客户端中当作一段js执行，调用onSuccess方法
2、CORS
使用cors进行跨域请求时有时候会发生options请求，是浏览器自行发起的，是跨域请求之前的预检查，不会影响实际功能
7、严格模式特点
1、全局变量必须先声明
2、禁止使用with
3、禁止使用创建eval作用域
4、禁止this对象指向window
5、函数参数不能同名
8、let const var
var全局变量，有状态提升，可以重复定义
let const块级变量，无状态提升，不可以重复定义，必须先定义再使用，否则造成暂时性死区
const定义常量，一旦定义不能更改，除非是定义对象，指向的指针不变则可以更改
9、盒子模型
// 盒子模型
包含content、width、height、padding、margin、border
标准盒子模型宽度 = width+padding+margin+border，其中width代表content的宽度
怪异盒子模型跨度 = width+margin， 其中width代表content+padding+border的宽度
offsetWidth/offsetHeight: border+padding+content
clientWidth/clientHeight: padding+content
scrollWidth/scrollHeight: padding+ 实际内容尺寸
10、promise
promise是一种异步编程解决方案；解决了经典的回调地狱问题
它有三种状态，pending、fulfilled和reject
他的状态由异步操作结果决定，状态一旦改变就不会再变化，（pending-》fulfilled or pending-》reject）
用法：
promise通过new操作符生成实例，接受reslove和reject两个参数，这两个函数会将状态变成成功或者失败
有then（状态发生改变时调用）、catch、finally实例方法
还有all（都成功则成功，否则失败）、race（第一个成功or失败的状态）、allSetlled（都返回结果。返回新的实例）、reslove、reject、try构造方法
11、px % em rem vw、vh
px是基本单位，绝对单位（其他的都是相对单位）
%相对于父元素的宽度比例
em相当于当前元素的font-size
rem相当于根元素的font-size
vw屏幕宽度的1%
vh屏幕高度的1%
vmin vmax 上面vw和vh中的最小值和最大值
12、TCP三次握手四次挥手
问题：
1.为什么会是三次和四次
2.什么是握手和挥手
握手是tcp连接的过程，
挥手是tcp断开的过程
建立tcp连接
*先建立连接（确保双方有都有收发消息的能力）
*再传输内容（如发送一个get请求）
*网络连接是tcp协议， 传输内容是http协议
client server
| |
三次握手（建立） | -------------------------------->| client发包，server接收。 server: 有client找我
|<-------------------------------- | serve发包， client接收。 client: server已经收到消息了
| -------------------------------->| client发包，server接收。 server: client要准备发送了
| |
| |
| ----------------------------------> |
数据传输 | <---------------------------------- |
| ----------------------------------> |
| <---------------------------------- |
| |
| |
四次挥手（断开）| ----------------------------------> | client发包，server接收。 server： client请求已经结束
| <---------------------------------- | server发包，client接收。 client： server收到，等待关闭
| <---------------------------------- | server发包， client接收。client： server已经处理完毕，可以关闭连接
| ----------------------------------> | client发包， client接收。 server: client确认关闭了，然后关闭
