前端八股

小魏每天都学习

已于 2022-10-17 10:48:34 修改

阅读量865

点赞数 1

文章标签：前端 css

于 2022-09-28 10:21:55 首次发布

本文链接：https://blog.csdn.net/weixin_47417033/article/details/126896718

版权

面试题预测之八股

前言
HTML CSS
JS
JS新特性
计算机基础知识
Vue
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

HTML CSS

0、选择器优先级

!important无条件优先
内联样式 style = ‘color:red’ 1000
id选择器 100
class类选择器伪类选择器属性选择器10
元素选择器伪元素选择器 1
*通配符选择器 >子类选择器 +兄弟选择器 0
继承来的没有优先级

1、块级元素与行内元素区别

块级元素独占一行，可以设置宽度和高度；行内元素会在一行显示，不能设置宽度高度 padding margin，由元素的内容撑开的
通过display:inline display:block转换两者
行内块元素inline-block既有块级元素可以设置宽高的特性，也有行内元素一行显示的特性，行内块元素独有一个vertical-align属性
块级：div p h ul li ol form
行内：span input img a select

2、script的defer async标签

script会阻塞DOM加载，从外部引入js会出现空白页问题，引入defer async属性

defer:不会阻塞页面加载；并行下载对应的js文件，下载完后不会立即运行；当其他的js脚本下载完成后，页面加载之前触发
async:不会阻塞DOM加载；并行下载对应的js文件，下载完成后立即运行js文件

3、css的flex布局

flex布局是弹性布局
给父元素设置display:flex可以将它变成flex盒子
父元素称为容器，有以下几个属性：flex-direction 、flex-wrap、flex-flow、justify-content、align-items、align-content
子元素称为项目，有以下几个属性：order、flex-grow0、flex-shrink1、flex-basis、align-self

4、grid网格布局

5、清除浮动的方式

额外标签法：在浮动元素的后面添加一个元素，设置clear:both属性
给父元素清除浮动触发BFC：父元素增加overflow:hidden
after伪元素法：给父元素增加一个after伪元素，IE6-7不支持after，需要给父元素设置 *zoom:1
before after双伪元素法：
给父元素手动设置高度

6、BFC是什么如何触发

BFC是块级格式化上下文，形成一个独立的渲染区，内部布局规则是独立的
触发方式：
（1）float不为none
（2）position为absolute fixed
（3）display为Inline-block flex table
（4）overflow不为hidden（hidden auto scroll）
BFC布局方式
（1）内部是box，在垂直方向上排列
（2）同一个BFC中的两个相邻盒子的margin会发生重叠
（3）BFC区域不会与浮动元素发生重叠
（4）BFC计算高度时，浮动的元素也参与计算
BFC的作用
（1）解决垂直方向上的margin重叠问题：可以使用div将两个盒子分别包起来，设置overflow:hidden，触发两个不同的BFC，两个BFC之间不会互相影响
（2）解决包含子元素的margin-top塌陷问题：当子元素设置margin-top时，会带动父元素一起向下移动，因为内部的布局规则影响到父元素了。这时候触发父元素的BFC，使其内部形成独立的渲染规则，这样可以解决margin-top塌陷问题。
也可以对父元素设置一个大小不为0的边框
（3）清除浮动：当父元素没有设置高度时，子元素浮动时父元素会高度塌陷，可以给父元素触发BFC，因为BFC计算高度时，浮动的盒子也参与计算
（4）自适应布局栏，左侧设置浮动，右侧设置成BFC，因为BFC不会与浮动区域发生重叠

7、 px rem em vh vw

（1）px是相对于屏幕显示器分辨率而言的，无法适应页面大小
（2）rem是相对单位，相对根元素html的字体大小font-size来决定的
（3）em是相对单位，相对当前元素的字体大小，如果当前元素没有设置字体大小，则继承父元素的字体大小，否则，相对浏览器默认的字体大小16px。
默认 1em = 16px，所以10px = 0.625em，在body中声明Font-size = 62.5%;
（4）vh vw是视口高度和视口宽度，1vw是1/100的视口宽度， 1vh是1/100的视口高度
（5）rpx是自适应屏幕宽度的，规定屏幕宽度 = 750rpx

8、 HTML5新特性

声明方式 !DOCTYPE html 告诉浏览器文档使用哪一种HTML5规范
新增的语义化标签 header nav footer section
新增的audio video播放视频和音频
input的type属性值新增了：number tel email file等，可以进行数字电话邮箱验证
表单新增的属性：placholder放占位文本，required表示文本框不能为空，autofocus默认获取焦点，min最小长度，max最大长度
新增canvas标签：与js联合通过getContent(2d)获取2d环境，进行画图
新增svg标签：用来画图，比canvas更好，不失帧
web worker：js是单线程，前面一个任务在执行时后面的任务只能等待，降低了性能。web worker为js创建多线程执行环境。js在主线程执行，new一个线程在后台执行，使用webworker计算数据返回给主线程，两个进程互不影响，独立运行。
web storage：新增了浏览器本地存储localStorage sessionStorage，比cookie存储空间大，有5MB，而且可以使用自带的getItem() setItem() removeItem() clear()存储或读取数据，数据以key value的形式存储在本地。localStorage的作用域：可以在同源的不同页面不同标签不同窗口中共享数据。sessionStorage不能在不同页面不同标签不同窗口中共享数据。同源：协议相同域名相同端口号相同
web socket：是一个基于TCP连接的全双工通信协议。当浏览器向服务器发送建立socket连接请求时，服务器返回信息给客户端，建立完成后，浏览器和服务器可以进行数据传输。

9、CSS3新特性

border-radius
box-shadow
translate3d
动画 @keyframes
3d旋转
box-sizing怪异盒模型

10、DOM事件流和事件委托

10.1事件流

事件分为三个阶段：事件捕获阶段、目标阶段、冒泡阶段
事件捕获阶段：从window传导到目标对象，从上到下
目标阶段：事件发生阶段
事件冒泡阶段：从目标对象向window传导，从下到上
一般事件在冒泡阶段执行，addEventListener的第三个参数默认为false表示在冒泡阶段执行。如果把第三个参数改为true表示在捕获阶段进行。

10.2事件委托

原理：事件冒泡
把原本该绑定在子元素上的事件委托到父元素身上，使用父元素来监听事件
优点：可以减少内存占用，减少子事件注册。比如把li的click事件绑定到父元素ul身上。

11、盒模型

分为标准盒模型和怪异盒模型
当box-sizing设置为content-box时，是标准盒模型，盒子宽度=width+padding+border+margin
当box-sizing设置为border-box时，是怪异盒模型，盒子宽度=width+margin，因为width已经包含了padding和border

JS

1、数据类型

数据类型共8种

基本数据类型：Number String Boolean Null Undefined BigInt Symbol
引用数据类型：Object，包括Array Function Date等

2、如何判断数据类型

判断数据类型1

typeof a
不能区分Null Object。由于null是空对象指针，使用typeof(null) 值为Object
不同的对象都是使用二进制存储的，如果二进制前三位都是0的话，系统会判断为是Object类型，而null的二进制全是0，自然也就判断为Object
a instanceof b
null和undefined除外
判断对象的原型链中是不是能找到类型的 prototype Object instanceof Object为true
判断一个对象是否为数据类型的实例对象，返回布尔值，主要用于判断引用类型
当简单数据类型以字面量形式创建时，instanceof 无法判断 1 instanceof Number 返回false
可以以new形式创建简单数据类型，new Number(1) instanceof Number 返回true
Object.prototype.toString.call(a)
a.constructor
null和undefined除外

3、== 与 ===

Null == Undefined ->true

4、call apply bind

1 区别

传参方式不同：这三个函数的第一个参数都是this的指向对象，第二个参数不同。call bind是将参数以逗号分隔放进去的，apply是将参数放在数组中传入
调用方式不同：bind的返回值是一个函数，需要二次调用

2 手写

call

Function.prototype.myCall = function(context) {
	// 先判断调用call的对象是否为函数。因为只有函数才能调用call来进行改变this指向
	if(typeof this !== 'function') {
		throw new TypeError('not a function');
	}
	context = context || window;
	context.fn = this; //将函数方法保存到context身上，方便后续的调用
	//将为数组转为真实数组，从1索引开始截取到最后形成args参数数组
	let args = [...arguments].slice(1); 
	let result = context.fn(...args); 
	delete context.fn;
	return args;
}

apply

Function.prototype.myApply = function(context) {
	if(typeof this !== 'function') {
		throw new TypeError('not a function');
	}
	context = context || window;
	context.fn = this;
	//已知arguments有两项，第一项是this，第二项是一个参数数组，解构出来，形成args参数数组
	let args = [...arguments[1]]; 
	let result = context.fn(...args);
	delete context.fn;
	return result;
}

bind

Function.prototype.myBind = function(context) {
	if(typeof this !== 'function') {
		throw new TypeError('not a function');
	}
	context = context || window;
	context.fn = this;
	let args = [...arguments].slice(1);
	return function() {
		// bind涉及二次调用，可能存在initObj.bind(this,args)(args2);多个参数
		let otherargs = [...arguments]; 
		return context.fn.apply(context, args.concat(otherargs));
	}
}

5、手写new

new做了什么
（1）创建了一个空对象
（2）将空对象的隐式原型属性proto指向构造函数的显示原型prototype
（3）调用apply改变this指向，将构造函数的this指向新创建的实例对象
（4）判断执行结果是否为Null或undefined，如果是则返回新创建的对象obj，否则返回执行结果

function myNew(fn, args) {
	const obj = {};
	obj.__proto__ = fn.prototype;
	let result = fn.apply(fn, ...args);
	return result instanceof Object ? result : obj;
}

6、setTimeOut()与setInterval()

setTimeOut和setInterval都是JS中的定时器，第一个参数是要执行的表达式，第二个参数是延迟时间，单位是毫秒，也可以有第三个参数，作为表达式的补充参数
setTimeOut和setInterval执行的返回结果是唯一的ID，可以作为定时器的ID
可以使用clearTimeOut或clearInterval，把ID作为参数，清除定时器
setTimeOut()表示延迟多少毫秒后，执行表达式，只执行一次
setInterval()表示每隔多少毫秒后就执行一次表达式，会一直执行，直到clearInterval或窗口关闭
使用setInterval可能存在两个问题：定时器的间隔比预设的小或者没有间隔。如果想每隔200ms就执行一次程序，但是程序执行需要300ms时，就会不间隔地重复执行，因此可以使用链式setTimeOut()进行

JS新特性

1、作用域与作用域链

规定函数或变量可使用范围的称为作用域。

全局作用域：
在函数外部声明的变量，或者没有声明直接使用的变量是全局变量。它可以在全局条
件下访问
局部作用域：
在函数内部声明的变量或函数，它只能在函数内部访问，在函数外部访问不到
作用域之间可以互相嵌套
作用域链
各个作用域的嵌套形成了作用域链，主要用来进行变量或函数的访问。沿着作用域链由内向外一层一层查找变量
如果自身作用域中声明了该变量，则直接访问
如果自身作用域中没有该变量，则沿着作用域链，从内向外查找

2、变量声明提升和函数声明提升

变量提升：使用var声明的变量，提升到作用域顶部，变量的赋值语句是不提升的，所以在赋值语句之前，变量的值都为Undefined
函数声明提升：使用function关键字声明的函数，提升到作用域的顶部
函数表达式不提升

3、闭包

闭包是什么：本质是函数内部嵌套函数，用来实现全局作用域下访问局部变量，或函数内部访问其他函数内部的变量
特性：（1）函数内部嵌套函数（2）函数内部可以引用函数外部的变量和参数（3）参数和变量不会被垃圾回收机制回收
两种形式：（1）作为返回值（2）作为参数传递
优点：保护+保存（1）保护函数内部的变量，防止流入其他环境造成命名冲突（2）在内存中维持一个变量，作为缓存（3）匿名函数自执行减少性能的消耗
缺点：（1）被引用的私有变量不会被回收，造成内存泄漏，可以手动赋值为null（2）闭包涉及到跨域访问，可以将跨域的变量作为局部变量，提高性能

4、执行上下文与执行栈

1 执行上下文

全局执行上下文：创建一个window对象，this执行window，在执行js时，压入栈底，关闭浏览器时弹出
函数执行上下文：每次执行函数时，都会创建一个新的函数执行上下文。分为创建阶段和执行阶段

2 执行栈

先进后出
进入一个执行环境后，创建对应的执行上下文，压入栈中，当执行完毕后，销毁执行上下文，弹出栈
栈底是全局执行上下文，栈顶是当前正在执行的函数执行上下文
只有当浏览器关闭后，全局执行上下文才会弹出栈

5、原型与原型链

1 原型

分为显示原型prototype和隐式原型__proto__
实例对象的隐式原型指向构造函数的显示原型
所有的显式原型prototype都是一个对象，所有它的隐式原型proto指向Object.prototype
构造函数的隐式原型指向Function的显示原型
Object的隐式原型指向null

2 原型链

查找对象的某个属性时，先从对象自身查找，如果没找到，则从对象的隐式原型即构造函数的显式原型上查找，如果仍然没找到，则向上从显式原型prototype的隐式原型即Object的显式原型上找，这样一层层向上查找形成的链式，称为原型链。

所有的prototype是对象，所以它的隐式原型是Object的显式原型
原型链的尽头是null。Object.prototype.proto === null
如果到尽头仍然没找到，则返回undefined

6、继承

1 原型继承

父类的实例对象作为子类的原型 ch.proto === Child.prototype === new Parent();
子类共享父类原型上的属性和方法；实例既是父类的实例对象，也是子类的实例对象
只能单一继承；创建子类实例时不能传参

function Parent(){
	this.name = name;
	this.age = age;
	showName = function(name) {
		console.log(this.name);
	}
}
Parent.prototype.working = function(work){
	console.log('is' + 'work');
}

function Child(){
}

// 父类的实例作为子类的原型
Child.prototype = new Parent();

2 构造继承

在子类中调用父类的构造函数，通过call改变this指向，继承父类实例中的属性和方法
子类能获得父类实例中的属性和方法；创建子类时可以传入参数；可以多个继承
不能获得父类原型上的属性和方法；实例是子类的实例，并不是父类的实例

function Parent(name,age){
	this.name = name;
	this.age = age;
	showName = function(name) {
		console.log(this.name);
	}
}
Parent.prototype.working = function(work){
	console.log('is' + 'work');
}
function Child(name,age){
	// 调用父类构造函数，将父类的属性和方法给子类
	Parent.call(this);
}

3 组合继承

在子类中调用父类构造函数，继承父类实例中的属性和方法
将父类的实例挂载到子类构造函数的原型上，继承父类原型中的属性和方法
优点：实例既是父类的实例，也是子类的实例；创建实例时可以传入参数；可以继承父类实例和原型上的属性和方法；
缺点：调用两次父类构造函数，生成两份实例（子类身上那份会被销毁）

function Parent(name,age){
	this.name = name;
	this.age = age;
	showName = function(name) {
		console.log(this.name);
	}
}
Parent.prototype.working = function(work){
	console.log('is' + 'work');
}
function Child(name,age){
	// 调用父类构造函数，继承父类实例上的属性和方法
	Parent.call(this);
}

// 调用父类构造函数生成父类实例，作为子类的原型，继承父类原型上的属性和方法
Child.prototype = new Parent();
// 将子类原型上的构造器指回子类
Child.prototype.constructor = Child;

4 寄生组合继承

为了减少调用父类的构造函数的次数（减小开销），我们不再通过new Parent()来让父构造函数生成实例，可以直接用 Object.create(Parent.prototype) 来继承父类的原型。
几乎是完美的

function Parent(name,age) {
	this.name = name;
	this.age = age;
	showName = function() {
		console.log(this.name);
	}
}
Parent.prototype.working = function(work) {
	console.log('is' + work);
}

function Child(name, age){
	// 调用父类构造函数，继承父类实例上的属性和方法
	Parent.call(this);
	this.name = name;
	this.age = age;
}

// 不再使用new Parent来生产父类实例
Child.prototype = Object.create(Parent.prototype);
// 将子类原型上的构造器指回子类
Child.prototype.constructor = Child;

5 extends继承

ES6新增class和extends继承

如果子类中有构造器，则在this之前使用super。
因为（1）子类没有自己的this对象，而是继承父类的this（2）调用super()继承父类中的this

class Father{
    constructor(name){
        this.name=name
    }
    getName(){
        return this.name
    }
}

class Son extends Father{
    constructor(name,age,sex){
        // 这里如果子类中存在构造函数，就必须在使用 this 之前先调用 super()
        // 相当于借用父类的 constructor 跟构造函数式继承中的 call 继承方法类似
        super(name)
        this.age=age
        this.sex=sex
    }
}

const son= new Son('joney',18,'女')
console.log(son);

7、箭头函数和普通函数的区别

箭头函数定义比较简单，使用()=>{}，和普通函数的定义上有不同
箭头函数在只有一个参数时，不需要加小括号，只有一句返回语句时省略函数体和return
箭头函数没有自己的this，在声明的时候捕获上下文中的this来使用，并且以后不能更改this指向，普通函数的this指向函数的调用者
箭头函数的this一旦确定后，不能通过call apply bind来修改this指向
箭头函数不能作为构造函数new实例对象，因为它没有自己的this不能调用call，也没有prototype
箭头函数没有arguments数组，如果使用不定项参数时用rest

8、函数的this指向

全局作用域下，this指向window
普通函数的this指向函数的调用对象
构造函数的this指向新创建的实例对象
箭头函数在声明时捕获上下文中的this供自己使用，this指向它的父级作用域，此后不能作更改
call apply bind的this指向传入的第一个参数对象

9、深拷贝与浅拷贝

10、节流与防抖

防抖和节流都是用来控制函数在一段时间内的执行次数，减小事件触发频率，避免资源的浪费。
应用场景：resize scroll mousedown mousemove keyup keydown事件中使用防抖节流来减少触发的频率
防抖：在触发事件后，等待n秒，执行一次函数，如果等待的n秒期间，事件再次被触发，就需要重新计算时间。在连续触发事件时，只执行最后一次。
节流：连续触发事件，但在n秒内只执行一次，稀释函数的执行频率。一段时间内只执行一次。
应用：防抖（搜索框在输入完成后发送请求、窗口大小调整完成后执行一次resize计算大小）
节流（滚动加载监听scroll事件、射击类游戏）

11、ES6新特性之set

是es6新增的集合类型，通过new Set()创建实例，也可以传入值进行初始化
如果传入重复的值，set会自动删掉重复元素，所以可以用set对数组去重。通过new Set(arr)将数组转为set并自动去重，再通过Array.from()将set转化为数组
通过s.size获取set中元素个数
通过add(1)增加 delete(3)删除set中的元素，通过clear()清空set中的元素
通过has()判断set中是否含有某个元素，返回布尔值
通过keys()获取set中的键名，values()获取set中的键值。在set中键名=键值
通过entries()返回键值对

12、clientHeight offsetHeight scrollHeight

clientHeight：内容的高度+上下padding
offsetHeight：内容的高度+上下padding+border
scrollHeight：滚动部分的高度
scrollTop：元素距离页面顶部的高度

13、JS性能优化

闭包中被引用的对象手动赋值null
垃圾回收
防抖节流
事件委托（事件代理）
1、原理：事件冒泡，事件发生有三个阶段，事件捕获目标和冒泡
2、事件捕获：从window到目标对象，从上层到底层
目标阶段：事件发生
事件冒泡：从目标对象向上传导到window，是事件委托的原理
3、事件委托：把原本要绑定到子元素身上的事件委托给父元素，让父元素监听
4、减少事件注册，提高性能。比如让ul代理所有的li
CDN
script标签中的defer async

1.引入库

计算机基础知识

1、经典排序算法

（1）冒泡排序

1、平均时间复杂度为O(n^2)，最好情况下为O(n)
2、原理：使用双层for循环，比较相邻的两个元素，如果后面一个元素比前面元素大，则交换两个元素位置，比较一趟后，最大的元素会出现在末尾
3、代码演示：
i = 0; i < arr.length; i++
j = 0; j < arr.length - 1 - i; j++
if(arr[j] > arr[j+1])

（2）选择排序

1、平均时间复杂度、最好情况下、最坏情况下为O(n^2)
2、原理：从未排序的数组中，选择一个最小的元素，把她放在起始位置。再从剩下未排序的数组中，继续选择最小的元素，把它放在已经排序元素的下一个。以此类推，直到排序完毕。
3、n个元素，需要 n-1 趟，完成排序
3、代码演示
i = 0; i < arr.length - 1; i++
minIndex = i;
j = i; j < arr.length; j++
if(arr[j] < arr[minIndex]) {
minIndex = j;
}

（3）插入排序

1、平均时间复杂度为O(n^2)，最好情况下为O(n)
2、原理：默认第一个元素是已经排序好的，第二个元素作为新元素，如果新元素小于已经排序好的元素，则从后往前扫描已经排序好的序列，就要把已经排序好的元素反复向后移动，直到找到新元素应该插入的位置，然后把新元素插入进去。
3、代码演示：
i = 1; i < arr.length; i++
if(arr[i] < arr[i - 1]) {
let tmp = arr[i];
let p = i - 1;
while(p >=0 && arr[p] > tmp) {
arr[p+1] = arr[p];
p–;
}
arr[p+1] = tmp;
}

（4）快速排序

1、算法的平均时间复杂度为O(nlogn)
2、原理：先找一个基准，一般为Math.floor(arr.length / 2)，把小于基准元素的放到left数组，把大于基准元素的放到right数组中。对left right数组采用递归的方式，然后使用concat连接left 基准值和 right
3、代码演示：

function QuickSort(arr){
	let povitIndex = Math.floor(arr.length / 2);
	let povit = arr[povitIndex];
	let left = [ ], right = [ ];
	for(let i = 0; i < arr.length; i++) {
		if(i != povitIndex) {
			if(arr[i] <= povit) {
				left.push(arr[i]);
			}else{
				right.push(arr[i]);
			}
	    }	
   }
	return 	QuickSort(left).concat(povit,QuickSort(right));
}

2、B树

3、数组遍历的方式

for循环遍历数组
for of循环遍历数组，如果数组中的元素是对象的话，可以将对象的每个属性解构出来。for(const {name, age} of arr)。对象不能使用for of
for in循环遍历数组或对象，得到的是数组的索引或者对象的属性名key
forEach遍历数组，回调函数可以有三个参数，第一个是数组中每个元素item，第二个是数组下标index，第三个是数组array，在内部可以通过index的形式修改原数组中的元素，没有返回值。
map，和forEach用法相似，但是map有返回值，返回一个新的数组，不会改变原来的数组。
filter，对数组中所有的元素进行判断，将满足条件的元素放在一个新数组中，返回。不会改变原来的数组
find，查找到符合要求的第一个元素，返回这个元素，后面的就不再遍历了。如果找不到，则返回undefined
findIndex，查找符合条件的第一个元素下标，返回这个下标，后面的元素就不再遍历。如果找不到，则返回 -1
every，返回的是布尔值，当数组中的每个元素都满足回调函数中的条件时，返回true，否则返回false。当有一个元素不满足时返回false且后面的元素不再进行检验。不对空数组检查，不改变原数组
some，返回的是布尔值，当数组中有一个元素满足条件，就返回true且剩余的元素不再进行检验，否则返回false。
reduce，对数组中的每个元素执行一次reduce函数，将执行的结果与当前元素进行计算

arr.reduce(function(pre,cur,index,arr) {

},init)

pre：必须，累计器的返回值，或上一次执行reduce的返回值。如果指定了初始值Init，则pre是初始值；如果没指定，pre是数组中第一个元素值
cur：必须，当前正在处理的元素
index：正在处理的元素下标
arr：数组本身
init：迭代的初始值
可以对数组求和求积，求元素出现次数，去重

4、数组去重的方式

indexOf() === -1去重，遍历需要去重的数组，当新数组中查找不到该元素时，就把该元素push到新数组中。
双层for循环+splice去重，遍历数组，当后一个元素和前一个元素相同时，则调用splice(j,1)

function unique(arr) {
	for(let i = 0; i < arr.length; i++) {
		for(let j = i + 1; j < arr.length; j++) {
			if(arr[i] ===arr[j]) {
				arr.splice(j,1);
			}
		}
	}
	return arr;
}

Map()去重，遍历需要去重的数组，将数组元素作为Key值存放在map中。利用Map中key值不能重复的特点，当map中已经有了key值时，就不要放到新数组；当map中没有key值时，push到新数组中。

function unique(arr){
	let array = [];
	for(let i = 0; i < arr.length; i++) {
		if(array.indexOf(arr[i]) === -1) {
			array.push(arr[i]);
		}
	}
	return array;
}

ES6的Set()去重，通过new Set(arr)将数组转为set，再通过Array.from(s)将set转为数组。array = […new Set(arr)]

function unique(arr){
	return Array.from(new Set(arr));
	// return [...new Set(arr)];
}

先sort排序，再使用for循环去重
通过filter去重，当数组中元素出现的第一个索引为当前索引时，就保留

function unique(arr) {
	return arr.filter((item,index,arr) {
		arr.indexOf(item,0) === index;
	}
}

reduce去重：迭代功能实现数组的扩展，判断当前元素cur是否已经添加到数组中，如果不存在就push到pre中

arr.reduce(function(pre,cur,index,arr){
	if(pre.indexOf(cur) === -1) {
		pre.push(cur);
	}
	return pre;
},[])

5、数组中常见的方法

push pop unshift shift splice sort
concat合并数组 join变成字符串 slice截取
indexOf includes find foreach reduce

6、OSI七层模型

1、应用表示会话传输网络数据链路物理层
2、TCP属于传输层

7、三次握手

建立一个TCP连接时，需要客户端和服务端一共发送三个包。来确认双方的发送和接收能力正常，方便后续的数据可靠传输

第一次握手：客户端向服务器发送一个SYN包，其中同步标志位SYN=1，发送一个初始序列号seq = x，客户端在发送等待状态
第二次握手：服务端接收了客户端发过来的包，并发送一个自己的SYN包作为应答，确认号是初始序列号+1，并发送一个自己的序列号y。其中同步标志位SYN=1，确认标志位ACK=1，确认序号ack = x+1，并发送自己的序列号seq = y
第三次握手：客户端收到了来自服务端的应答包，发送一个自己的包告诉服务端自己接收成功。其中确认标志位ACK=1，确认序号ack = y+1，序列号是seq = x+1
为什么非要三次不能两次？
第一次握手：客户端发送包服务端收到，此时服务端可以得知：客户端的发送能力和服务端的接受能力正常
第二次握手：服务端发送包客户端收到。此时客户端可以得知：客户端的发送接受能力正常，服务端的发送接收能力正常。但是服务端不能得知客户端是否成功接收
第三次握手：客户端发送包服务端收到。此时服务端可以得知：服务端的发送接收能力正常，客户端的发送接收能力正常
携带数据
第一次握手时携带数据让服务器更加容易受到攻击，第二次握手不可以携带，第三次握手可以携带
第一次握手：客户端发送网络包，服务端收到了。
这样服务端就能得出结论：客户端的发送能力、服务端的接收能力是正常的。
第二次握手：服务端发包，客户端收到了。
这样客户端就能得出结论：服务端的接收、发送能力，客户端的接收、发送能力是正常的。不过此时服务器并不能确认客户端的接收能力是否正常。
第三次握手：客户端发包，服务端收到了。
这样服务端就能得出结论：客户端的接收、发送能力正常，服务器自己的发送、接收能力也正常

8、四次挥手

释放一个TCP连接需要客户端和服务端发送四个包。客户端和服务端都可以发起释放连接请求。

客户端发送一个FIN包，FIN = 1，seq = u
服务端收到客户端的FIN，发送一个确认应答包，ACK = 1，ack = u +1，seq = v
服务端也想关闭连接时，发送一个FIN包，FIN = 1，ACK = 1，ack = u+1，seq = w
客户端收到服务端的FIN+ACK后，发送一个ACK包应答，ACK = 1，ack = w+1

9、状态码

（1）2：成功 200
（2）3：重定向
301永久重定向：请求的资源永久移到别的位置。一般用在跨域中，如访问http://www.baidu.com会返回301并进入https://www.baidu.com
302临时重定向：请求的资源临时从别的URL访问。如未登录时访问主页会重定向到登录页面
（3）4：客户端错误 403跨域 404资源请求不存在
（4）5：服务端错误

10、sessionStorage localStorage cookie

都是用来存储数据的，有生命周期和作用域两点不同

10.1localStorage

生命周期：永久的，浏览器关闭后，数据仍然存在，除非手动删除数据，否则数据不会丢失
API：用setItem(key,value)来存储键值对 getItem(key)取值，removeItem(key)删除，clear()清空
存储空间比较大有5M

10.2 sessionStorage

生命周期：在浏览器会话期间有效，当浏览器关闭时数据被销毁
API和存储空间与localStorage相同

10.3 cookie

生命周期：在设置的过期时间之前，一直有效
存储空间比较小，4K，存储个数一般不超过20个

10.4使用场景

vue是单页面应用，基本操作是在一个页面内进行路由跳转，多数情况下使用sessionStorage。
1、sessionStorage可以保证在页面打开时，sessionStorage中数据是空的
2、如果使用localStorage，每次打开页面，localStorage都存储上一次页面打开时的数据

11、http https

http：超文本传输协议，用于web浏览器和服务器之间传递信息。信息是以明文形式存在，不对数据进行加密，不适合传输卡号密码等。
https：在http基础上增加SSL/TSL，依靠证书来确认服务器身份真实，并对通信数据进行加密处理。
区别
（1）http无连接无状态，不太安全，传输信息是明文传输，不对数据进行加密处理，默认在80端口
（2）https是加密传输协议，具有不可否认性，默认在403端口

12、tcp udp

连接：tcp面向连接，需要三次握手建立连接四次挥手释放连接，udp无连接
可靠性：tcp是可靠传输，传输过程中出现丢包时会重传，udp是不可靠传输但会尽最大努力交付
工作效率：udp实时性高，不需要建立连接也没有重传机制
是否支持多对多：tcp点对点，udp支持一对一和一对多
首部大小：tcp20字节，udp8字节

13、get post

get post是HTTP请求的两种方式

get请求一般用于从服务器获取数据，post一般用于发送数据到后台
get请求参数携带在地址栏url中，以?分割URL和传输数据，参数之间以&相连。安全性低，参数长度有限制，一般是不超过2048字符；post请求的参数携带在请求体中，不显示在地址栏，安全性较高，长度无限制
get请求有缓存机制，保存在浏览器历史记录中；post请求无缓存，不保存在历史记录中
get请求产生一个tcp包，浏览器把header和data一起发送出去，服务器响应200并返回数据；post请求产生两个tcp包，浏览器先发送header，服务器响应100continue，再发送data，服务器响应200并返回数据

14、从输入url到获取页面经历什么

DNS预解析：从url中获得域名，通过DNS将域名解析成对应的IP地址
（1）查找浏览器缓存：如果有目标IP，则返回
（2）查找本地缓存：如果host中有目标IP，则返回
（3）查找路由器缓存
（4）
建立TCP连接：在DNS获取到目标服务器的IP地址后，通过三次握手建立连接
（1）浏览器向目标服务器发送请求报文SYN=1
（2）服务器接收请求报文后，发送一个应答报文ACK=1
（3）浏览器收到服务器发来的报文后，发送一个报文作为应答
浏览器发送HTTP请求：TCP连接建立完成后，浏览器向服务器发送一个get请求
服务器处理相关的请求并返回结果：有些服务器会进行重定向，状态码为301，返回的响应数据中有Location，可以得到重定向之后的地址，浏览器根据这个地址重新发送http请求。服务器处理完毕后返回结果
关闭TCP连接：通过四次挥手关闭连接
（1）浏览器向服务器发送释放连接请求，FIN = 1，浏览器不再发送数据
（2）服务器接收后，发送一个应答报文，ACK = 1，服务端把没发完的数据继续发送
（3）服务器向客户端发送释放连接请求，FIN = 1
（4）浏览器接收服务端发的请求，给出确认，ACK = 1，连接释放
html解析与渲染页面：将html解析成DOM树，CSS树，渲染到页面上

Vue

1、双向绑定原理

vue通过数据劫持结合发布订阅者模式，核心是通过Object.defineProperty()方法重新定义了set get函数来实现数据劫持，在数据变化时发布消息给订阅者，触发相应的监听回调。让数据和视图同步变化。
Object.defineProperty()有三个参数，obj要定义属性的对象，prop是定义或修改的属性，des是具体的改变方法。一般是set和get方法，get函数在获取属性值时调用，set函数在修改属性值时调用。
消息订阅和发布：（1）在vue初始化时，所有的数据和属性被监听器Observe监听，当数据或属性变化时，Observe发布消息给订阅者watcher（2）每一个订阅者watcher都绑定一个更新函数，当收到监听器的消息时，执行更新函数，更新视图（3）每个数据都绑定一个消息订阅器Dep，Dep中存放用到这个数据的订阅者watcher。当Observe监听到数据变化时，就通知Dep，再通知watcher触发更新函数（4）有个解析器Compile，用来解析每个节点的相关指令
总结：消息订阅和发布：vue初始化时，所有的数据和属性被监听器Observe监听，当数据或属性变化时，发布消息给订阅器Dep，Dep中存放用到这个数据的所有订阅者Watcher，会通知Watcher触发更新函数，实现数据变化达到视图更新。

2、MVVM

vue采用数据劫持结合发布订阅模式来进行双向绑定的，通过Object.defineProperty劫持属性和数据的setter getter，数据变动时发布消息给消息收集器Dep，再由Dep去通知相应的订阅者Watcher，去触发对应的更新函数。
MVVM是双向绑定的入口，整合了Observer监听器，Compile模板解析器和Watcher订阅者。通过Observe监听model数据的变化，通过Compile解析模板指令，通过Watcher建立桥梁，达到数据变化实现视图更新，视图更新实现数据变化的双向绑定

3、nextTick()

在下一次DOM更新结束后，延迟执行回调函数。在修改数据后调用nextTick，可以获取更新后的DOM。在nextTick函数中，可以基于更新后的DOM进行操作。
使用场景：（1）created生命周期钩子中，这个时候真实DOM还没有生成，如果对真实DOM进行操作会报错，将DOM操作放在nextTick中（2）如果想基于更新后的DOM元素进行操作，需要把对新DOM的js代码放在nextTick的回调函数中。

4、生命周期函数

vue实例从创建到销毁的整个过程，包括开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、卸载等一系列过程。在这个过程中有八个生命周期函数会自动触发。

beforeCreate：创建之前，此时vue的挂载对象$el和data还没初始化，值为undefined
created：创建完成，此时data已经存在，可以调用methods中的方法对data中的数据进行初始化。但$el还不存在
beforeMount：挂载之前，此时vue实例的挂载对象$el和data都已经存在，挂载为虚拟的DOM节点，模板已经编译完成，但没有渲染到页面上。
mounted：挂载完成，此时虚拟DOM节点已经渲染为真实DOM，渲染到页面上了。
beforeUpdate：在数据更新之前调用，此时data中的数据还没有和最新的数据保持一致。
updated：数据更新完成。
beforeDestroy：在实例销毁之前调用，进行清除定时器，解除事件绑定操作
destroyed：实例销毁，此时vue解除事件监听和dom绑定，但是dom结构仍然存在。

5、computed watch method

computed：
（1）计算属性，和data中的数据使用方法相同，写法类似于一个函数
（2）必须有一个return返回值
（3）computed有缓存机制
（4）依赖data中的数据计算出来的，如果依赖的数据没有发生变化，就会使用缓存中的值
（5）不支持异步处理
watch：对数据或属性进行监听，当监听的数据属性发生变化时，立即执行handler函数，handler接收两个参数，newV oldV。
（1）可以用deep:true深度监听对象中属性的变化。如果对某个对象进行普通监听，当对象的某个属性改变时，由于对象的引用地址不会改变，所以无法监听到，可以通过deep:true深度监听到对象中属性的变化
（2）可以用immediate:true进行立即执行。当进行页面时，就立即监听数据或属性
（3）watch没有缓存机制，当数据变化时，立即调用handler函数，watch支持异步操作。
method：在模板中调用时，使用插值语法。在渲染模板时，会执行函数
computed适合一个属性受多个属性影响，比如求和
watch适合属性变化时就执行回调函数的数据响应

6、vue优化方式

6.1代码层面

v-if v-show分场景使用
computed watch分场景使用
v-for添加key值
长列表性能优化
当列表只是展示数据时，不需要对列表进行劫持和监听。使用Object.freeze()冻结对象，这样对象就不会再改变了。
图片懒加载
只有当图片进入可视区域再进行加载，提高加载性能和用户体验。
使用vue-lazyload插件进行懒加载，先npm安装插件，在main.js中import导入插件并使用Vue.use()，将图片img的src属性改成v-lazy
路由懒加载
vue单页面应用，路由组件很多，可能出现首屏加载过慢，出现白屏问题。可以将不同的路由分隔成不同的代码块，当路由被访问时，才加载对应的组件。
不再直接import导入路由组件，使用异步加载的写法，const Foo = () => import("…/ …/ ")
事件销毁
在vue的beforeDestroyed中，对指令和事件监听解除绑定，但是addEventListener不会自动解除绑定，需要手动removeEventListener
第三方插件的按需引入，使用babel-plugin插件

6.2webpack层面

6.3web技术层面优化

开启gzip压缩：减小文件体积，使传输速度更快。通过服务端，使用express做gzip压缩
（1）安装compression，npm i compression --save
（2）创建一个compression， var compression = require(‘compression’)
（3）app = express()
（4）在其他中间件之前使用compression app.use(compression());
CDN加载：浏览器下载css js文件都需要连接服务器，但服务器带宽有限制。可以通过不同域名加载文件，可以使并发下载文件数量增多。

7、vue-router路由导航

vue是单页面应用，需要设置不同的路由地址来展示不同的路由组件。通过vue-router配置路由和组件的映射关系。

7.1安装配置

通过npm 安装vueRouter
创建一个router文件夹，新建Index.js文件，将vue 和vuerouter导入，并使用
new一个VueRouter对象，对象里面放一个数组routes用来配置路由和组件之间的映射关系
将vuerouter对象export暴露出去

7.2使用

创建路由组件
在index文件中，import导入路由组件
在VueRouter对象的routes数组中配置映射关系，path表示路径，component表示对应的路由组件
在app.vue中，通过router-link和router-view来展示路由组件。router-link是vue内置的，会渲染成a标签，router-view会根据路径动态展示不同的组件
（1）router-link：使用to指定跳转的路径，使用tag指定这个路径渲染成什么标签，默认是a标签
（2）router-view：可以根据当前的路由地址，动态渲染不同的路由组件。
如果使用路由嵌套，需要增加一个children属性，在children中配置path和component，这里Path不需要加/

7.3路由重定向、路由模式、懒加载、动态路由

路由的重定向：输入url后默认进到首页或者登录页，需要新增一个路由配置，path:‘/’, redirect: ‘/Home’
路由模式：一共有2种，hash和histroy，默认是hash。

hash模式：路由默认的模式，地址栏中有#，#后面的路径不是真实的路径，几乎能兼容所有的浏览器和服务器。使用hash模拟完整的url，所以url改变时，页面不会重新加载
原理：使用onhashchange事件，监听Hash，当hash值变化时，执行hashchange事件中的js代码跳转到对应的页面。

history模式：在new VueRouter时，配置mode为histroy。url中的路径是服务端根目录下的真实路径，如果根目录下没有对应的文件，就会报错404。就需要在nginx代理中配置每一个route路由，缺少某个路由的配置就会返回404。刷新时可能存在404问题。

Histroy对象保存了当前窗口访问的历史记录。
属性：histroy.length 获取当前窗口访问路径的个数，histroy.state 获取histroy对象的当前状态。
方法：可以通过go() back() forward()实现跳转，后退，前进，go的参数为正值表示前进，为负值表示后退。
pushState()方法可以向Histroy历史记录中添加一个访问记录，一般有三个参数，object可以展示到新的页面，如果不需要展示，写为null。title是标题，一般为空。url是新的地址，与原来的地址在同一个域。
replaceState()方法用于修改当前的记录，用法和pushState一样

popState事件：在histroy有变化时，比如调用了go() back() forward()方法时，popState事件会被触发，触发后可以执行对应的回调函数。

懒加载：在index.js文件中，不直接导入路由组件，采用异步加载的形式。这样当进入不同的路径时才加载对应的路由组件，避免刚进入页面时，加载过慢，首屏出现白屏的问题。
动态路由：有的页面路径是不确定的，比如根据用户id进入不同的页面。（路由传参params方式）
（1）需要在配置文件path时使用 path:'/user/:userId’冒号形式写上动态路由
（2）在app.vue中，router-link需要使用v-bind动态拼接user和userId v-bind:to = " ‘/user/’ + userId "
（3）如果想要在别的页面获取用户id，可以使用this.$route.params.uid
this.$router拿到创建的VueRouter对象，可以调用push() replace()方法，这个对象里面包含了routes很多个路由
this.$route拿到当前活跃的路由，可以点出来params参数

7.4路由导航守卫

主要是用来进行跳转验证和拦截的，分为三类，全局导航守卫，路由独享守卫和组件内部守卫

全局导航守卫：beforeEach afterEach
（1）全局前置守卫有三个参数，to from next，分别表示要去的路由地址和现在的路由地址，next表示放行，
（2）afterEach只有to from两个参数
路由独享守卫：beforeEnter，在配置路由和组件间的映射关系path component时使用，也有to from next三个参数，和beforeEach相同
组件内部守卫：beforeRouterEnter beforeRouterLeave beforeRouterUpdate，和data mounted是平级的。beforeRouterEnter在组件渲染时调用，还不能获取this实例，beforeRouterUpdate在路由改变且组件被复用时调用，beforeRouterLeave在导航离开路由对应的组件时调用，一般用在用户修改了信息但还没保存，可以通过next(false)
阻止用户离开界面。

8、虚拟DOM及优缺点

虚拟DOM是一个js对象，用来描述真实DOM结构。
优点：虚拟DOM可以跟踪当前dom的状态。它会根据当前的dom元素生产一个可以描述它结构的虚拟dom。当dom数据改变时会重新生成一个新的虚拟DOM。对新旧虚拟DOM通过diff算法进行比较，得出一个最优的更新方法。将计算出来的不同点存储在patch对象中，通过patch中记录的不同点对dom进行局部更新，提升渲染的效率和用户体验。

9、diff算法

diff算法是用来比较虚拟DOM节点，将两个虚拟DOM的不同点存放在patch对象中，根据patch中记录的不同对dom进行局部更新。

9.1diff算法如何比较

同层级比较，不会跨层级比较；循环从两边向中间比较；采用深度优先的比较策略
如果两个节点类型不同，会把旧的虚拟DOM中的节点删掉，并添加一个新的节点和子节点
如果两个节点类型相同，更新旧节点中的属性
如果两个节点是同类节点，就是他们的节点类型和属性相同，只是里面的文本内容不同，就采用就地复用的策略，直接更新旧节点中的文本内容。

10、v-for key

10.1 v-for更新数据列表绑定key

在使用v-for更新已经渲染的元素列表时，会采用就地复用的策略：根据key值判断某个元素是否需要修改，如果需要，就重新渲染，否则就复用之前的元素。使用key可以提升渲染的效率
使用唯一的id作为key值，不使用index。如果使用index，在列表末尾添加数据时和使用id是没区别的，都只有最后一条数据需要重新渲染。
但是如果在列表中间添加一条数据，使用index时，会将这条添加的数据以后的每个数据都需要重新渲染，降低效率。

10.2 diff算法中使用Key

在同层的一组节点，使用key作为每个虚拟节点的唯一标识，通过对比新旧虚拟节点的key值，来判断节点是否需要改变，更高效地更新虚拟DOM

11、vue组件通信方式

11.1父子通信

props：子组件通过props接收父组件传过来的数据，父组件通过v-bind往子组件传值。props可以接收任何一种数据类型，只能父组件向子组件传数据，形成一种单向的下行绑定
$ emit：子组件通过$emit绑定一个自定义事件，事件触发时向父组件传递数据，在父组件中通过v-on监听事件，并接收传过来的数据
ref/refs：当子组件身上有一个ref属性时，ref就指向了子组件实例。可以通过this.$refs.xxx获取子组件实例，获取它的data或调用子组件的方法。
provide/inject注入依赖：适合父子、祖孙组件通信。provide用来提供数据，写法和data一样，inject用来接收数据。在父级组件中，通过provide向子孙组件提供一个数据，在子孙组件中通过inject注入数据
parent/children：通过$ parent访问父组件实例，可以获取父组件身上的数据，也可以调用方法。通过$children可以获取一个数组，数组中存放的是所有的子组件实例，且是无序的

11.2跨代通信

$ attrs $ listeners实现跨代通信：$ attrs可以继承父组件中除了props style class的所有属性，$ listeners是一个对象，包含这个组件身上所有的监听器

11.3任意组件间通信

eventBus事件总线：注册一个空的vue作为事件总线。通过$ emit触发事件并把数据发送出去，通过$on监听事件，对接收的数据作出相应的回调函数。相当于把数据存储在事件总线中，其他的组件通过事件总线来获取数据。
vuex

12、vuex

vuex适应于任何组件通信，即使是两个无关联的组件也可以使用vuex共用一组数据。它相当于一个公共的仓库，保存着所有组件都能共用的数据。

12.1普通使用

创建一个store文件夹，新建一个index.js文件，导入vue 和 vuex，并Vue.use(vuex)。通过new Vuex.store新建一个store，并export暴露出去，在main.js中导入store并全局注册。
vuex有以下几个属性

state：里面是一些自定义的变量，保存数据，相当于data。在app中可以通过this.$store.state获取数据。
mutations：存储的是方法，用来改变state中的数据，mutations中的方法有两个参数，第一个是state，第二个是传过来的参数，对state中的数据进行同步修改。在app.vue中通过this.$store.commit触发mutations中的方法。commit中有两个参数，第一个是commit中的方法，第二个参数是传过来的值。
actions：存储的也是方法，暴露给用户使用。方法中有两个参数，第一个是context上下文，第二个是传过来的参数。actions中的方法是通过commit提交mutations中的方法进行异步修改。在app.vue中通过this.$store.dispatch触发actions中的方法，dispatch中有两个参数，第一个参数是actions中的方法，第二个参数是传过去的参数。

12.2模块化使用

可以新建state mutations actions文件，里面分别存储所有的数据所有的方法并暴露出去，在index.js中导入这些模块，并在store中使用。

13、data写成函数式

vue组件是可以被复用的，当创建一个vuecomponent实例时，data函数就会生产一份新的data对象，这个对象就是vue实例的私有数据，每次复用一个组件时，都会生成一份新的私有数据，不同的实例数据之间不会有影响。

14、v-model

v-model可以在input textarea上创建元素的双向数据绑定，它可以监听用户的输入事件来更新数据。用户在登录注册时提交的用户名密码等使用v-model进行双向绑定。

原理：本质是语法糖，通过v-bind绑定value属性，通过v-on监听input事件，将输入的最新的值赋值给绑定的属性身上
v-model是双向数据绑定，但是是单向数据流，比如props就是单向数据流，将父组件的值传给子组件。

15、keep-alive

可以保存组件的状态，在tab栏切换的时候，把不活跃的组件缓存起来，但不销毁，这样当tab切换回来时，不需要重复渲染DOM，提高渲染的效率。

props：include exclude max
生命周期函数：actived deactived
keep-alive有一个最大缓存数量，采用的是最久未使用法LRU。当缓存一个组件时，就把组件放到最上面，当到了最大缓存数量时，从最下面的组件开始删除。

16、vue3与vue2 的对比

源码上采用typescript编写
新增了组合API，将实现同一种功能的代码封装在一个函数中，最后在setup中调用
新增了三个响应式函数 reactive toRefs ref
（1）reactive()将引用类型的数据，转变成响应式数据，页面随着数据变化会重新渲染
（2）toRef()将响应式对象的每个属性也变成响应式对象，它的参数是一个响应式对象，将每个属性解构出来，变成一个响应式对象，这个对象有个value属性存放值。
（3）ref()将基本数据的类型转为响应式对象，这个对象也有value属性，用来存放值。
生命周期函数的变化：
（1）beforeCreate created被setup替代
（2）beforeMount mounted beforeUpdate updated 在vue3中变成OnbeforeMount onMounted onBeforeUpdate onUpdated
（3）destroy变成了unmount，所以beforeDestroy 变成onbeforeUnmount destroyed变成onUnmounted
vue3的响应式系统从Object.defineProperty变成proxy，它可以监听到数组索引数组长度的变化，也可以监听到对象新增属性

17、v-if v-show

v-if v-show都是用来控制元素的显示与隐藏。

v-show是通过修改元素的display属性来控制元素的显示与隐藏，当display为none时，元素就隐藏。更适合频繁改变元素显示状态时使用。比如点击按钮显示或隐藏某个区域
v-if是通过增加或删除虚拟的DOM节点来控制元素的显示与隐藏，所以如果频繁操作dom会影响性能。它适合元素状态只会显示或隐藏，后续不再改变时使用。比如使用v-if v-else动态地显示一级或二级标签。