前端面试题

2022年8月22日写

以下是js

1.浅拷贝深拷贝的区别

浅拷贝是指，对基本（简单）类型的值拷贝，以及对象（复杂）类型的地址拷贝。
深拷贝是指，除了拷贝基本（简单）类型的值，还完全复刻了对象（复杂）类型。

2.谈一下对实例的理解

(实例是类的具象化产品，是一个类的真实对象，而对象是一个具有多种属性的内容结构；在javascript中里面没有类的语法，所以类的概念是通过创造一个对象来实现的)

实例，就是一个类的真实对象。比如我们都是“人”，你和我都是“人”类的实例了。而实例化就是创建对象的过程，用New关键字创建。

3.简单说出几种检测数据类型的方法

1、typeof 检测一些基本的数据类型
2、constructor构造函数
3、is Array 判断是否为数组
4、Object.portotype.toString （最好的）
Object.prototype.toString.call(obj).slice(8,-1)

4.什么是原型，什么是原型链

每个构造函数（class）都有一个显示的原型prototype
每个实例对象都有个隐示原型__proto__
实例的隐式原型__proto__等于其构造函数的显示原型prototype
当查找一个对象的属性或方法时先在实例上查找，找不到沿着__proto__向上逐级查找
我们把__proto__的__proto__形成的链条关系成为原型链
作用：1 原型链实现了js继承，2.原型可以给构造函数创建的实例添加公用方法

5.使用new关键字时都发生了什么

1. 创建空对象
2. call执行构造函数并传入空对象作为this
3. 指定空对象的构造函数

6.异步和同步的区别

同步是按顺序执行，会阻塞代码
异步非阻塞式执行代码

7.ES5和ES6的区别

1.新增箭头函数
2.新增let const声明变量的关键字
3.新增模板字符串 反引号（`）
3.扩展运算符 使得合并数组、对象，变得容易
4.新增 解构 主要应用于读取访问，操作部分属性或值

8.var const let 区别

let 不会变量提升，var声明的变量会变量提升
let 不能重复声明 var可重复声明
const 声明必须赋值，值类型的值不能修改

9.闭包

函数嵌套函数，（函数作为参数被传入，函数作为返回值被返回）

闭包作用：

1. 形成局部作用域，
2. 在函数外部可以访问函数内部的局部变量

闭包的缺点

被闭包引用的变量不会被 销毁，会常驻内存，使用不当容易造成内存崩溃

10.sessionStorage和 localStorage有什么区别

sessionStorage仅在当前会话下生效，当你关闭页面或浏览器后你存储的sessionStorage数据会被清除。
localStorage生命周期是永久，储存的信息是永远不会消失的，除非你自己主动清除localStorage信息

11.async await

1.async作为一个关键字放到函数前面，用于表示函数是一个异步函数。异步函数也就意味着该函数的执行不会阻塞后面代码的执行。异步函数语法很简单，就是在函数前面加上async 关键字，来表示它是异步的。
2.await 放置在 Promise 调⽤之前，会强制async函数中其他代码等待，直到 Promise 完成并返回结果

await 只能与 Promise ⼀起使⽤

await 关键字只能放到async 函数里面

12.实现数组扁平化

最佳方法、
使用ES6 中的 flat
我们还可以直接调用 ES6 中的 flat 方法来实现数组扁平化。flat 方法的语法：arr.flat ( [depth] )
其中 depth 是 flat 的参数，depth 是可以传递数组的展开深度（默认不填、数值是 1），即展开一层数组。如果层数不确定，参数可以传进 Infinity，代表不论多少层都要展开

let arr = [1, [2, [3, 4]]];
function flatten(arr) {
  return arr.flat(Infinity);
}
console.log(flatten(arr)); //  [1, 2, 3, 4，5]

写几道css

1.浅谈一下对BFC的理解

格式上下文
通俗的来说：BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部

2.flex布局 / 弹性布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
可以通过操作主轴 侧轴属性值 来控制子项目的排列方式 快速形成想要的布局模式

3.怎么实现一个三角形

利用视觉的效果
定义盒子的四条边宽 隐藏三条边 显示一条边

div{
            /*宽高为0*/
            width: 0;
            height: 0;
            /*在三角形底边设置一个边界颜色/
            border-top: 20px solid red;
            /*其它3边设置相同颜色，*/
            border-bottom: 20px solid white;
            border-left: 20px solid white;
            border-right: 20px solid white;
  }

以下是vue2

1.v-if 和v-for为什么不能同时使用

v-for的优先级比v-if高,在v-for遍历后，可能会造成多个v-if 一起使用会造成性能浪费

2.什么是虚拟DOM

虚拟 dom 的说法是相对于浏览器所渲染出来的真实 dom ，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

3.== 和 === 的区别

== 用来比较或者判断两者是否相等 比较时可以自动转换数据类型
=== 用来较为严格的比较,除判断数据2这是否相等 ,还会判断两者数据类型是否相同 不会转换数据类型

4.全部变量和vuex state数据有什么区别

1.vuex做的就是状态管理，主要时管理状态的一个库，把项目中公用的一些数据进行存储，某一个组件更改了vuex中的数据，其他相关的组件也会得到快速更新
2.全局变量可以任意修改 不安全

笔试

1.如果后端给出的数据量太大 前端会怎么处理

后端数据量很大，后端人员也是从别的地方拿过来的数据，他不能存库，只能做简单的处理就返给前端，前端一次性拿这么多数据

后果

1.是请求速度很慢，很可能影响页面的加载，
2.是前端在表格里面展示那么多数据，只能做假分页，不然界面上渲染的节点也太多

解决方法

1.一个简单的优化方法是对数据进行分页。假设每个页面都有n记录，那么数据可以分为(总数/n)个页面。之后，我们可以使用 setTimeout 顺序渲染页面，一次只渲染一个页。分页后，数据可以快速渲染到屏幕上，减少页面的空白时间。（没有解决根本问题）
2.延迟加载
虽然后端一次返回这么多数据，但用户的屏幕只能同时显示有限的数据。所以我们可以采用延迟加载的策略，根据用户的滚动位置动态渲染数据。
要获取用户的滚动位置，我们可以在列表末尾添加一个空节点空白。每当视口出现空白时，就意味着用户已经滚动到网页底部，这意味着我们需要继续渲染数据。
同时，我们可以使用getBoundingClientRect来判断空白是否在页面底部。

2.浏览器的缓存机制

定义: 浏览器的缓存机制就是把一个请求过的web资源拷贝一份副本存储存在浏览器中;缓存会根据进来的请求保存输出内容的副本,当一下个请求到来的时候,如果是相同的url,缓存会根据缓存机制决定是否直接使用副本响应访问请求,还是向服务器再次发送请求.比较常见的就是浏览器会缓存访问过的页面,当再次访问这个URL地址的时候,如果网页没有更新就不会再次下载网页,而是直接使用本地缓存的网页;只有当网站明确标识已更新,浏览器才会再次下载网页

3.什么宏任务，什么是微任务

我们都知道 Js 是单线程的，但是一些高耗时操作就带来了进程阻塞问题。为了解决这个问题，Js 有两种任务的执行模式：同步模式（Synchronous）和异步模式（Asynchronous）。
在异步模式下，创建异步任务主要分为宏任务与微任务两种
1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
2、系统将微任务执行完以后，才会去执行下一个宏任务。
3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，当宏任务中的微任务执行完毕，会最后执行。