前端常问面试题汇总

前端常问面试题汇总：

后续持续增加。

js方面

一、数组常用得方法

1.shift() 方法：把数组的第一个元素删除，并返回第一个元素的值

var movePos=[1,2];
movePos.shift()
console.log(movePos)//[2]
document.write(movePos.length);//1

2.concat() 方法：用于连接两个或多个数组,并返回一个新数组，新数组是将参数添加到原数组中构成的
3. join() 方法：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator 字符串而生成的。
4. pop() 方法：用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined ,把数组长度减 1
5. push() 方法：可向数组的末尾添加一个或多个元素，并返回新的长度，(用来改变数组长度)。
6.reverse() ：方法用于颠倒数组中元素的顺序。
7.slice() 方法：slice方法是基于当前数组并根据参数截取对应位置的数组内容，返回一个新的数组，可以接受两个参数，起始位置和结束位置。表示截取从其实位置到结束位置的数组内容。也可以只接受一个参数，表示截取从起始位置到原数组末尾的数组内容。
8.splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目。
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

var movePos =[111,222,333,444];
movePos.splice(2,1,"666")//movePos.splice(开始删除的下表位置,删除数组元素的个数，向数组添加的新项目。);从下标2开始删除一位，并用666替换删除下表位置的元素
document.write(movePos + "")

9.unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
unshift：将参数添加到原数组开头，并返回数组的长度

var movePos =[111,222,333,444];
movePos.unshift("55555")
document.write(movePos + "")//55555,111,222,333,444

10.sort(orderfunction)：按指定的参数对数组进行排序
11.indexOf() :indexOf方法是从数组起始位置开始向后查找，找到了返回对应的索引值，找不到返回-1
lastIndexOf()
12.filter() ==> filter方法循环数组中的每一项，并给定一个函数，返回函数中返回true项的集合。回调函数中有三个参数，第一个为循环中的每一项，第二个参数为当前项的下标，第三项为数组本身。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.filter(function (item, index, array) {
	return (item  <  2)
})
console.log(res)//1

13.every() every循环数组的每一项，并给定一个函数。如果该函数对每一项都返回true，那么结果就是true，否则返回false。接收一个回调函数，回调函数中有三个参数，第一个为循环中的每一项，第二个参数为当前项的下标，第三项为数组本身。
14.forEach() 操作函数中的每一项，这个函数没有返回值.你可以利用这个函数操作数组中的每一项，并根据自己的要求生成新的函数或者一些判断等等
15.map() 操作函数中的每一项,返回每次函数调用的结果组成的数组。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.map(function (item, index, array) {
	return  item  *  2
});
console.log(res);//[ 2, 4, 6, 8, 10, 12, 14 ]

16.some() 给数组中的每一项给定一个函数，只有有一项符合给定函数要求就返回true，否则返回false。

var  numberArr  = [1, 2, 3, 4, 5, 6, 7];
var  res  =  numberArr.some(function (item, index, array) {
	return  item  >  5
})
console.log(res)//true

二、面向对象的三大特征

1.封装
2.继承
3.多肽

vue得方法

一、vue生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

二、VUE双向数据绑定原理和实现
1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

3.介绍一下Object.defineProperty()方法
（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

vuex

一、vuex是什么？怎么使用？哪种功能场景使用它？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时

vuex的流程

页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

二、vuex得五个属性

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

1. state：vuex的基本数据，用来存储变量
2. getter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

三、不用 Vuex 会带来什么问题
1.可维护性会下降，你要修改数据，你得维护 3 个地方
2.可读性下降，因为一个组件里的数据，你根本就看不出来是从哪里来的
3.增加耦合，大量的上传派发，会让耦合性大大的增加，本来 Vue 用 Component 就是为了减少耦合，现在这么用，和组件化的初衷相背

四、Vuex中actions和mutations的区别
Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
Action Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。 .

vue-router

一、怎么定义 vue-router 的动态路由? 怎么获取传过来的值

可以通过query ,param两种方式
区别: query通过url传参，刷新页面还在 params刷新页面不在了
params的类型:
配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123

query的类类型
配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:/route?id=123

二、vue-router 有哪几种导航钩子?
1、全局守卫：router.beforeEach
2、全局解析守卫：router.beforeResolve
3、全局后置钩子：router.afterEach
4、路由独享的守卫：beforeEnter
5、组件内的守卫：beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

三、route和router 的区别
1.router是VueRouter的一个对象
2.route是一个跳转的路由对象