前端面试题----持续更新

JS部分

1. JS 的基本数据类型和引用数据类型

• 基本(简单)数据类型:

• ES5的5种：Null，undefined，Boolean，Number，String，

• ES6新增：Symbol表示独一无二的值 ，

• ES10新增：BigInt 表示任意大的整数，

• 引用(复杂)数据类型: Object、Function、Array

2. ==和===的区别

• ==判断时，只需要值相等，不判断类型

• ===判断时，需要值与类型都相等

3. 闭包

• 闭包就是能够读取其他函数内部变量的函数

• 闭包基本上就是一个函数内部返回一个函数

• 优点：

1. 可以读取函数内部的变量

2. 将变量始终保持在内存中

3. 可以封装对象的私有属性和私有方法

• 缺点

1. 比较耗费内存、使用不当会造成内存溢出的问题

4. js变量和函数声明的提升

• 在js中变量和函数的声明会提升到最顶部执行

• 函数的提升高于变量的提升

• 函数内部如果用 var 声明了相同名称的外部变量，函数将不再向上寻找。

• 匿名函数不会提升。

5. let const var

var ——ES5 变量声明方式

• 在变量未赋值时，变量undefined（为使用声明变量时也为undefined）

• 作用域——var的作用域为方法作用域；只要在方法内定义了，整个方法内的定义变量后的代码都可以使用

let——ES6变量声明方式

• 在变量为声明前直接使用会报错

• 作用域——let为块作用域——通常let比var 范围要小

• let禁止重复声明变量，否则会报错；var可以重复声明

const——ES6变量声明方式

• const为常量声明方式；声明变量时必须初始化，在后面出现的代码中不能再修改该常量的值

• const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动

6. Object.assign的理解

• 作用：Object.assign可以实现对象的合并。

• 语法：Object.assign(target, ...sources)

7. constructor的理解

创建的每个函数都有一个prototype（原型）对象，这个属性是一个指针，指向一个对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性是一个指向prototype属性所在函数的指针。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（继承自构造函数的prototype），指向构造函数的原型对象。注意当将构造函数的prototype设置为等于一个以对象字面量形式创建的新对象时，constructor属性不再指向该构造函数。

8. map 和 forEach 的区别

相同点：

• 都是循环遍历数组中的每一项

• 每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）

• 匿名函数中的this都是指向window

• 只能遍历数组

不同点：

• map()会分配内存空间存储新数组并返回，forEach()不会返回数据。

• forEach()允许callback更改原始数组的元素。map()返回新的数组。

9. for of 可以遍历哪些对象

for..of..: 它是es6新增的一个遍历方法，但只限于迭代器(iterator), 所以普通的对象用for..of遍历

是会报错的。

可迭代的对象：包括Array, Map, Set, String, TypedArray, arguments对象等等

10. 简单说说 js 中有哪几种内存泄露的情况

• 意外的全局变量；

• 闭包；

• 未被清空的定时器；

• 未被销毁的事件监听；

• DOM 引用；

vue部分

1. vue双向数据绑定的原理？

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据

实现原理：采用数据监听、解析结合订阅者模式的方式，通过Object.defineProperty()来监听各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。从而实现数据的双向绑定

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

• 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

• 实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

• 实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

• 实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

2. vue的生命周期有哪些

beforeCreate（创建前）、created（创建后）、beforeMount(载入前)、mounted（载入后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）

mounted 真实dom挂载完成 updated只要data数据被改变 就会自动更新触发 destroy销毁全局计时器和自定义事件

如果使用了keep-alive会在多两个：activated、deactivated当组件初次加载会执行前4个生命周期，分别为： beforeCreate、created、beforeMount、mounted

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

3. v-if 与 v-show的区别

相同点：

• v-if 与 v-show 都可以动态控制 DOM 元素的显示隐藏。

不同点：

• v-if 有更高的切换开销，v-show 有更高的初始渲染开销

• v-if 适合运营条件不大可能改变；v-show 适合频繁切换。

• v-if 通过动态向DOM树增删DOM元素，v-show 设置display来进行隐藏

• v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show 只是简单的基于 CSS 切换；

 如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. v-for 循环为什么一定要绑定key ?

• 给每个dom元素加上key作为唯一标识 ，diff算法可以正确的识别这个节点，使页面渲染更加迅速!

5. 组件中的data为什么要定义成一个函数而不是一个对象？

• 每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他。

6. Vue 的最大的优势是什么？

Vue 作为一款轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟

DOM、运行速度快，并且作者是中国人尤雨溪，对应的 API 文档对国内开发者优化，作为前端

开发人员的首选入门框架

Vue 的优势：

• Vue.js 可以进行组件化开发，使代码编写量大大减少，读者更加易于理解。

• Vue.js 最突出的优势在于可以对数据进行双向绑定。

• 使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果。

• 相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。

• vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方 UI 组件库使用起来节省很多开发时间，从而提升开发效率。

7. Vue 和 jQuery 两者之间的区别是什么？

• jQuery 介绍：

jQuery 曾经也是现在依然最流行的 web 前端 js 库，可是现在无论是国内还是国外他的使

用率正在渐渐被其他的 js 库所代替，随着浏览器厂商对 HTML5 规范统一遵循以及 ECMA6 在浏

览器端的实现，jQuery 的使用率将会越来越低

• vue 介绍：

vue 是一个兴起的前端 js 库，是一个精简的 MVVM。从技术角度讲，Vue.js 专注于 MVVM

模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来，通过对数

据的操作就可以完成对页面视图的渲染。当然还有很多其他的 mvmm 框架如 Angular，react 都

是大同小异，本质上都是基于 MVVM 的理念，然而 vue 以他独特的优势简单，快速，组合，紧

凑，强大而迅速崛起

• vue 和 jQuery 区别：

• vue 和 jQuery 对比 jQuery 是使用选择器（）选取 DOM 对象，对其进行赋值、取

值、事件绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对

象，而数据和界面是在一起的

• 比如需要获取 label 标签的内容：）选取 DOM 对象，对其进行赋值、取值、事件

绑定等操作，其实和原生的 HTML 的区别只在于可以更方便的选取和操作 DOM 对象，而数据

和界面是在一起的

• 比如需要获取 label 标签的内容：(“lable”).val();,它还是依赖 DOM 元素的值。

Vue 则是通过 Vue 对象将数据和 View 完全分离开来了

• 对数据进行操作不再需要引用相应的 DOM 对象，可以说数据和 View 是分离的，

他们通过 Vue 对象这个 vm 实现相互的绑定，这就是传说中的 MVVM

8. MVVM 和 MVC 区别是什么？

• MVVM 基本定义

MVVM 即 Model-View-ViewModel 的简写，即模型-视图-视图模型，模型（Model）

指的是后端传递的数据，视图(View)指的是所看到的页面，视图模型(ViewModel)是 mvvm 模式

的核心，它是连接 view 和 model 的桥梁。它有两个方向：

• 一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到

的页面，实现的方式是：数据绑定，

• 二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。

实现的方式是：DOM 事件监听，这两个方向都实现的，我们称之为数据的双向绑定

• MVC 基本定义

MVC 是 Model-View- Controller 的简写。即模型-视图-控制器。M 和 V 指的意思和

MVVM 中的 M 和 V 意思一样。C 即 Controller 指的是页面业务逻辑，使用 MVC 的目的就是将

M 和 V 的代码分离。MVC 是单向通信。也就是 View 跟 Model，必须通过 Controller 来承上启

下

• 使用场景

主要就是 MVC 中 Controller 演变成 MVVM 中的 viewModel，MVVM 主要解决了 MVC

中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验，vue 数据驱动，通

过数据来显示视图层而不是节点操作， 场景：数据操作比较多的场景，需要大量操作 DOM 元

素时，采用 MVVM 的开发方式，会更加便捷，让开发者更多的精力放在数据的变化上，解放繁

琐的操作 DOM 元素

• 两者之间的区别

MVC 和 MVVM 其实区别并不大，都是一种设计思想， MVC 和 MVVM 的区别并不是

VM 完全取代了 C，只是在 MVC 的基础上增加了一层 VM，只不过是弱化了 C 的概念，

ViewModel 存在目的在于抽离 Controller 中展示的业务逻辑，而不是替代 Controller，其它视图

操作业务等还是应该放在 Controller 中实现，也就是说 MVVM 实现的是业务逻辑组件的重用，

使开发更高效，结构更清晰，增加代码的复用性

9. 如何让vue页面重新渲染

• 使用vue内置的forceUpdate方法

this.$forceUpdate()  //这不会更新您拥有的任何计算属性,调用forceUpdate只会强制重新渲染视图

• 在元素上绑定一个key,当key修改时,该DOM元素就会重新渲染

<template>
    <div :key="once"></div>
</template>
export default{
    data(){
        return{
            once:0,
        }
    },
    methods:{
        forceRerender(){
            this.once +=1
        }
    }
}
// 或者 :key = 'new Date ()' 事件的变化 带动Key变化

10. $route和$router的区别

$router

• $router是用来操作路由，$route是用来获取路由信息

• $router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，钩子函数等，也包含一些子对象（例如history）

• $route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。

//常规方法
this.$router.push("/login");
//使用对象的形式 不带参数
this.$router.push({ path:"/login" });
//使用对象的形式，参数为地址栏上的参数
this.$router.push({ path:"/login",query:{username:"jack"} }); 
使用对象的形式 ，参数为params 不会显示在地址栏
this.$router.push({ name:'user' , params: {id:123} });

$route的介绍

主要的属性有：
this.$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews
 
this.$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，不会拼接到路由的url后面
 
this.$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面
 
this.$route.router 路由规则所属的路由器
 
this.$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

11. 谈谈对scoped的理解

在vue文件中的style标签上，有一个特殊的属性：scoped。

当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。

scoped的原理

为组件实例生成一个唯一标识，给组件中的每个标签对应的dom元素添加一个标签属性，data-v-xxxx

给<style scoped>中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

12. 组件通信有哪些方式

• 通过 props 传递

• 通过 $emit 触发自定义事件

• 使用 ref

• EventBus

• $parent 或$root

• attrs 与 listeners

• Provide 与 Inject

• Vuex

13. axios的请求方式

• get请求（常用于获取数据）

• post请求（常用于提交表单数据和上传文件）

• put请求（对数据进行全部更新）

• patch请求（修改部分数据）

• delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

• 注意：axios常根据业务需求需要进行二次封装

14. 说出$nextTick的作用

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)来帮助我们处理更新后的dom数据。

15. 如何实现组件缓存

使用<keep-alive>标签，作用是创造一个缓存的空间，用于保存组件状态或者避免重新全部渲染。可以快速调用我们的缓存中的数据，从而达到提高访问速度。那常见的列表与购物车为例子，我们常常在这两个区域之间访问，每次点击不需要每次都重新渲染加载一次。

16. Vue常用修饰符有哪些

• .prevent: 提交事件不再重载页面；

• .stop: 阻止单击事件冒泡；

• .once: 只执行一次这个事件

• .enter:监听键盘enter键