Web前端之自己遇到的面试问题整理(待完善)

面试问题

1.js中的数据类型

-五种基本类型：Number, String, Boolean, Undefined, Null

-一种复杂数据类型L：Object

-Es6新增数据类型：Symbol

Null转化为数字0，undefined转化为数字NaN

2.post和get的区别

-GET把参数包含在URL中，POST通过request body传递参数

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

3.localstorage和sessionstorage的区别

-sessionstorage在关闭窗口或标签页之后会删除这些数据。

-localstorage只有手动删除才会被删除

4.闭包是什么

闭包是在另一个函数（称为父函数）中定义的函数，并且可以访问在父函数作用域中声明和定义的变量。

-也就是能读取其他函数内部变量的函数。

用处：可以读取函数内部的变量

​ 让这些变量的值始终保存在内存中

闭包可以访问三个作用域中的变量：

• 在自己作用域中声明的变量；
• 在父函数中声明的变量；
• 在全局作用域中声明的变量。

举例：实现防抖 || 节流函数

5.介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

Set

• 成员唯一、无序且不重复；
• [value, value]，键值与键名是一致的（或者说只有键值，没有键名）；
• 可以遍历，方法有：add、delete、has。

WeakSet

• 成员都是对象；
• 成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏；
• 不能遍历，方法有 add、delete、has。

Map

• 本质上是键值对的集合，类似集合；
• 可以遍历，方法很多，可以跟各种数据格式转换。

WeakMap

• 只接受对象最为键名（null 除外），不接受其他类型的值作为键名；
• 键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的；
• 不能遍历，方法有 get、set、has、delete。

6.介绍下深度优先遍历和广度优先遍历，如何实现？

深度优先遍历（DFS）

深度优先遍历（Depth-First-Search），是搜索算法的一种，它沿着树的深度遍历树的节点，尽可能深地搜索树的分支。当节点 v 的所有边都已被探寻过，将回溯到发现节点 v 的那条边的起始节点。这一过程一直进行到已探寻源节点到其他所有节点为止，如果还有未被发现的节点，则选择其中一个未被发现的节点为源节点并重复以上操作，直到所有节点都被探寻完成。

简单的说，DFS 就是从图中的一个节点开始追溯，直到最后一个节点，然后回溯，继续追溯下一条路径，直到到达所有的节点，如此往复，直到没有路径为止。

DFS 可以产生相应图的拓扑排序表，利用拓扑排序表可以解决很多问题，例如最大路径问题。一般用堆数据结构来辅助实现 DFS 算法。

注意：深度 DFS 属于盲目搜索，无法保证搜索到的路径为最短路径，也不是在搜索特定的路径，而是通过搜索来查看图中有哪些路径可以选择。

步骤：

• 访问顶点 v；
• 依次从 v 的未被访问的邻接点出发，对图进行深度优先遍历；直至图中和 v 有路径相通的顶点都被访问；
• 若此时途中尚有顶点未被访问，则从一个未被访问的顶点出发，重新进行深度优先遍历，直到所有顶点均被访问过为止。

Graph.prototype.dfs = function() {
   var marked = []
   for (var i=0; i<this.vertices.length; i++) {
       if (!marked[this.vertices[i]]) {
           dfsVisit(this.vertices[i])
       }
   }

   function dfsVisit(u) {
       let edges = this.edges
       marked[u] = true
       console.log(u)
       var neighbors = edges.get(u)
       for (var i=0; i<neighbors.length; i++) {
           var w = neighbors[i]
           if (!marked[w]) {
               dfsVisit(w)
           }
       }
   }
}

广度优先遍历（BFS）

广度优先遍历（Breadth-First-Search）是从根节点开始，沿着图的宽度遍历节点，如果所有节点均被访问过，则算法终止，BFS 同样属于盲目搜索，一般用队列数据结构来辅助实现 BFS。

BFS 从一个节点开始，尝试访问尽可能靠近它的目标节点。本质上这种遍历在图上是逐层移动的，首先检查最靠近第一个节点的层，再逐渐向下移动到离起始节点最远的层。

步骤：

• 创建一个队列，并将开始节点放入队列中；
• 若队列非空，则从队列中取出第一个节点，并检测它是否为目标节点；
  • 若是目标节点，则结束搜寻，并返回结果；
  • 若不是，则将它所有没有被检测过的字节点都加入队列中；
• 若队列为空，表示图中并没有目标节点，则结束遍历。

Graph.prototype.bfs = function(v) {
   var queue = [], marked = []
   marked[v] = true
   queue.push(v) // 添加到队尾
   while(queue.length > 0) {
       var s = queue.shift() // 从队首移除
       if (this.edges.has(s)) {
           console.log('visited vertex: ', s)
       }
       let neighbors = this.edges.get(s)
       for(let i=0;i<neighbors.length;i++) {
           var w = neighbors[i]
           if (!marked[w]) {
               marked[w] = true
               queue.push(w)
           }
       }
   }
}

7.原型链

prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

常用在继承中

8.Vue生命周期

created(渲染界面) DOM未渲染，数据初始化已经完成，方法可以调用

mounted(绑定数据) 数据和DOM都完成挂载

updated(数据变更)、

destroyed(销毁结束)

整个周期：beforeCreated->created->beforeMounted->mounted->beforeUpdate->update->beforeDestory

9.call和apply 的区别和作用

apply最多只有两个参数，call可以传递多个参数

作用：调用一个对象的一个方法，用另一个对象替换当前对象

10.Vue指令

v-if 判断

v-for 循环

v-show 有更高的初始渲染开销

v-bind 动态绑定

v-on 监听dom事件

v-model 数据双向绑定

11.双向数据绑定的原理

v-model 的核心是view和data

当data有变化的时，通过Object.defineProperty()方法中的set方法进行监控，来调用之前已经定义好的data和view的关系的回调函数，来通知view进行数据的改变，view发生改变时通过底层的input事件来进行data的响应更改。

用到了input事件（只要往input框中输入内容就会触发）以及ES5中Object.defineProperty()

12.const、var和let的区别

-const定义的变量不能修改，必须初始化

const a = 5;
const b;  //错误
b = 5

-var定义的变量可以修改，如果不初始化会输出undefined，不会报错

var a = 1;
var a;
a = 5;

-let是块级作用域，函数内部使用let定义后，对函数外部无影响

let a = 1;
function change(){
    let a = 5;  
    console.log(a)  //输出5
}
console.log(a)  //输出1

const var let 去重操作 双向数据绑定的过程 路由的几种方式

左中右三个盒子 盒子居中 修改项目的启动命令 项目的实现 如何配合

，对函数外部无影响

let a = 1;
function change(){
    let a = 5;  
    console.log(a)  //输出5
}
console.log(a)  //输出1

const var let 去重操作 双向数据绑定的过程 路由的几种方式

左中右三个盒子 盒子居中 修改项目的启动命令 项目的实现 如何配合

数据传输是同步操作还是异步 npm慢的话怎么解决