前端校招面试题库

转转

篇一

来自 https://www.nowcoder.com/discuss/783584

http的状态码

http的请求方法

• GET：get 方法一般用于获取服务器资源
• POST：post 方法一般用于传输实体主体
• PUT：put 方法一般用于传输文件
• DELETE：delete 方法用于删除文件
• HEAD：head 方法用于获取报文首部，不返回报文主体
• OPTIONS：向服务器发送该方法，会返回对指定资源所支持的 HTTP 请求方法。

http报文

(楼主写的是http内容报文，预测是问http请求和响应报文内容)

• 用于 HTTP 协议交互的信息被称为 HTTP 报文。客户端的 HTTP 报文叫请求报文，服务端的 HTTP 报文叫响应报文。
• 请求报文 是由请求行（请求方法、协议版本）、请求首部（请求 URI、客户端信息等）和内容实体（用户信息和资源信息等，可为空）构成。

• 响应报文 是由状态行（协议版本、状态码）、响应首部（服务器名称、资源标识等）和内容实体（服务端返回的资源信息）构成。

基本数据类型，判断方法

（根据楼主下一题，预测是问JavaScript基本数据类型，判断方法应该是问数组几种判断方法）

JavaScript共有八种数据类型，分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型：

• Symbol 代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
• BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数，使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了 Number 能够表示的安全整数范围。

这些数据可以分为原始数据类型和引用数据类型：

• 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
• 堆：引用数据类型（对象、数组和函数）

两种类型的区别在于存储位置的不同：

• 原始数据类型直接存储在栈（stack）中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
• 引用数据类型存储在堆（heap）中的对象，占据空间大、大小不固定。如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

堆和栈的概念存在于数据结构和操作系统内存中，在数据结构中：

• 在数据结构中，栈中数据的存取方式为先进后出。
• 堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。

在操作系统中，内存被分为栈区和堆区：

• 栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
• 堆区内存一般由开发着分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。

JavaScript 判断数组的五种方法

1、instanceof

const arr= []
instanceof arr === Array // true

2、Array.isArray

const arr = []
Array.isArray(arr) // true

const obj = {}
Array.isArray(obj) // false

3、Object.prototype.isPrototypeOf

• 使用 Object 的原型方法 isPrototypeOf，判断两个对象的原型是否一样, isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。

const arr = []
Object.prototype.isPrototypeOf(arr, Array.prototype) // true

4、Object.getPrototypeOf

const arr = []
Object.getPrototypeOf(arr) === Array.prototype // true

5、Object.prototype.toString

const arr = []
Object.prototype.toString.call(arr) === '[object Array]' // true

const obj = {}
Object.prototype.toString.call(obj) // "[object Object]"

• 为什么不直接用 obj.toString()呢？ 这是因为 toString 为 Object 的原型方法，而 Array，function 等类型作为 Object 的实例，都重写了 toString 方法。不同的对象类型调用 toString 方法时，根据原型链的知识，调用的是对应的重写之后的 toString 方法，而不会去调用 Object 上原型 toString 方法（返回对象的具体类型），所以采用 obj.toString()不能得到其对象类型，只能将 obj 转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用 Object 上原型 toString 方法。

typeof null输出object的原因是什么

简单来说，typeof null的结果为Object的原因是一个bug。在 javascript 的最初版本中，使用的 32位系统，js为了性能优化，使用低位来存储变量的类型信息。

在判断数据类型时，是根据机器码低位标识来判断的，而null的机器码标识为全0，而对象的机器码低位标识为000。所以typeof null的结果被误判为Object。

[{}] 输出什么

（根据楼主回答，题目应该是问Boolean([{}])）

答案是：true

dom事件流，阻止冒泡

什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2 级事件流包括下面几个阶段。

• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段

首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段，可以在这个阶段对事件做出响应。 虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。

阻止事件冒泡的方法

• event.stopPropagation()
• return false（return false 不仅阻止了事件往上冒泡，而且阻止了事件本身）

vue组件通信的方式

vue生命周期

vue watch 和cmputed区别

具体见 《前端面试题手册：Vue》

html渲染过程

• 首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的。
• 然后对 CSS 进行解析，生成 CSSOM 规则树。
• 根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM 元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。
• 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。
• 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

改变指向的方法this

• call()、apply()、bind()

具体见 《前端面试题手册：JavaScript》

垃圾回收机制

具体见 《前端面试题手册：JavaScript》

自己设计公共组件的时候有没有遇到过什么问题

略

如果让你设置一个弹出对话框确认要注意什么

（开放题，以下是笔者的想法，仅供参考）

• 我个人认为，设计时要考虑弹出对话框时在未确认用户操作指令时，除对话框以外其他操作不应该还能被用户点击，因此需要设计所谓“蒙版”避免对话框弹出时用户还能操作其他功能，否则这样设计的对话框是没有意义的，同时还需要一些提示信息告知用户操作，以及“取消”和“确认”等操作后的事件处理。

url解析对象

(牛客在线编程有类似题目，预测也是问获取url参数)

//来自牛客JS42
function getUrlParam(sUrl, sKey) {
var paramArr = sUrl.split('?')[1].split('#')[0].split('&'); // 取出每个参数的键值对放入数组
const obj = {};
paramArr.forEach(element => {
const [key, value] = element.split('=');  // 取出数组中每一项的键与值
if(obj[key] === void 0){   // 表示第一次遍历这个元素，直接添加到对象上面
obj[key]=value
} else{
obj[key]=[].concat(obj[key],value); // 表示不是第一次遍历说明这个键已有，通过数组存起来。
}});
return sKey===void 0? obj:obj[sKey]||''   // 如果该方法为一个参数，则返回对象。
//如果为两个参数，sKey存在，则返回值或数组，否则返回空字符。
}

快速排序

具体见 《前端面试题手册：JavaScript》

创建一个Vue实例，创建过程有哪些步骤

来自 【源码解析】创建Vue实例时干了什么？

Commonjs 和 Es Module的区别

Commonjs 的特性如下：

• CommonJS 模块由 JS 运行时实现。
• CommonJs 是单个值导出，本质上导出的就是 exports 属性。
• CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。
• CommonJS 模块同步加载并执行模块文件。

Es module 的特性如下：

• ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。
• ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。
• ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。
• ES6 模块提前加载并执行模块文件，
• ES6 Module 导入模块在严格模式下。
• ES6 Module 的特性可以很容易实现 Tree Shaking 和 Code Splitting。

如果你要实现一个splice，怎么做

来自《如何手动实现数组的splice方法 ? (V8源码级别)》

如果我在购物车菜单页点击按钮这整个过程发生了什么事情，后端呢

（开放题）

• 可以回答前端是如何知道该商品信息（根据id），点击加入购物车是增加商品还是增加数量（如果项目是比如Vue技术栈的，可回答通过Vuex的Action和Mutation对类型进行判断后返回），后端接收到的数据如何与数据库进行交互，以及前后端之间数据联调等方面

接上题，当用户不断点击的时候如何防止他多次点击

• 常见的使用防抖和节流来处理