前端面试（上海技术面）（一）

前端面试（上海技术面）（一）

---

（一）基础类型有哪些：

基本类型：Number(数值)，String(字符串)，Boolean(布尔值)，Null(空)，Undefined(未赋值)
引用类型：Array(数组)，Object(对象)，Function(函数)

（二）数组API：

toString()：将数组返回为字符串
join()：将数组返回为字符串，参数可替换,逗号。如果不加参数则和toSting一样
push()：在数组尾部增加一个元素，返回数组长度
unshift()：在数组头部增加一个元素，返回数组长度
pop()：在数组尾部删除一个元素，返回数组长度
shift()：在数组头部删除一个元素，返回数组长度
concat()：合并数组，参数为要合并的数组
splice()：删除、替换、插入元素。参一：开始索引值，参二：要操作元素的个数，参三：替换/增加的元素(可不加)。返回改动的元素
slice()：返回数组一部分
reverse()：颠倒数组
sort()：将数组排序 a-b升序 b-a降序
indexOf()：查询数组中是否存在某个元素，有返回第一次出现的索引值，没有返回-1
reduce()：累运算元素，返回累运算后的结果
forEach()：遍历数组，没有返回值
filter()：过滤元素，返回满足条件的元素
find()：查找数组中是否有满足条件的元素，有返回查询到的结果，没有返回undefined
findIndex()：查找数组中是否有满足条件的元素，有的话返回满足条件的索引值，没有返回-1
map()：重组数组，返回经过操作后的元素
some()：检查数组中是否存在满足条件的元素，满足返回true，不满足返回false
Array.isArray()：判定参数是否为数组，是返回true，不是返回false
Array.from()：将类数组转为真数组，类数组不能调用数组下的API

（三）数组去重：

Set+展开运算符方法：

let item = [...new Set(arr)];

数组API方法：

let res = arr.filter(item,index) => {
	return arr.indexOf(item) == index;
})

（四）数组扁平化(多维数组变一维数组)：

递归处理：

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

（五）浅拷贝：

普通赋值就是浅拷贝。数组或者对象使用浅拷贝赋值给A，A改变原数据也会发生改变

（六）深拷贝：

数组：通过遍历数组中的元素，将每个元素重新插入数组中
对象：JSON.parse(JSON.stringify(obj));
通用方法可以用递归深拷贝来实现数据中有数组有有对象的深拷贝。

（七）es6特性：

let，const，箭头函数，import，export，export default，解构赋值，展开运算符

（八）import的用处，export和export default的区别：

import导入模块。
export可以在一个文件中暴露多个模块，在import导入时必须和暴露的模块名相同并用{}包裹。
export default在一个文件中导出一个默认模块，在import导入时可以自定义命名。

（九）箭头函数的好处：

箭头函数本身没有this，所以箭头函数的this指向上一层作用域的this指向，在vue中function函数有时候this指向的不是vue而箭头函数可以解决这一问题。
箭头函数可以产生闭包，不会有变量污染。

（十）改变this指向：

用API：call()，bind()，apply()
在上层作用域中使用变量保存要使用的this，然后在本层作用域下使用该变量

（十一）promise解决了什么问题：

promise可以解决异步，解决回调地狱，可以支持并发请求

（十二）promise的用法：

resolve返回成功状态，并且被第一个then接收，then支持链式调用下一个then接收上一个then的返回值。
reject返回失败状态，可以被cath捕获到错误。
all可以实现promise的并发业务，将多个Promise实例包装成一个新的Promise实例，只有所有Promise都为resolve时才会执行then()。
race只要有一个Promise为resolve时就会执行then()。

（十三）有没有做过响应式布局：

用相对单位可以实现响应式布局，如vw/vh和rem。
vw/vh是根据游览器的视图大小而发生改变的而不是屏幕。
媒体查询。

（十四）rem和em：

rem是根据根标签元素也就是html标签的font-size改变大小的，默认的html的font-size为16px。
em是根据父元素的font-size改变大小的。

（十五）Vue的生命周期：

1. 什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。
2. vue生命周期的作用是什么
Vue 所有的功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。
生命周期中有多个事件钩子，在控制整个vue实例的过程时更容易形成好的逻辑。
3. 生命周期钩子

• beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
  data，computed，watch，methods 上的方法和数据均不能访问。 可以在这加个loading事件。
• created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。 可访问 data
  computed watch methods 上的方法和数据。
  初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
  可以在这里结束loading事件，还做一些初始化，实现函数自执行。
  未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。
• beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
  beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
• mounted：挂载，完成创建vm.$el，和双向绑定 完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
  可在这发起后端请求，拿回数据，配合路由钩子做一些事情。
• beforeUpdate：数据更新前，数据驱动DOM。
  在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
  可在更新前访问现有的DOM，如手动移出添加的事件监听器。
• updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。 组件DOM已完成更新，可执行依赖的DOM操作。
  注意：不要在此函数中操作数据（修改属性），会陷入死循环。
• activated：在使用vue-router时有时需要使用来缓存组件状态，这个时候created钩子就不会被重复调用了。
  如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
• deactivated：组件被移除时使用。
• beforeDestroy：销毁前， 可做一些删除提示，如：您确定删除xx吗？
• destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。 这时组件已经没有了，无法操作里面的任何东西了。

（十六）在created中如何获取dom：

created中若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。

（十七）Vue中指令：

v-if，v-show，v-html，v-text，v-for，v-module，v-bind，v-on

（十八）v-for中的key的用处：

就地复用策略：当在进行列表渲染的时候，vue会直接对已有的标签进行复用，不会整个的将所有的标签全部重新删除和创建,只会重新渲染数据，然后再创建新的元素直到数据渲染完为止。
key属性可以用来提升v-for渲染的效率！vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去，从而提高渲染性能。key属性还可以避免数据混乱的情况出现。

（十九）Vue的路由传参方法：

props和动态路由传参

（二十）Vue动态路由传参params和query的区别：

• params传参只能用name引入路由，传递参数用params。游览器的url不会显示参数。
• query传参可以用name和path引入路由，传递参数用query。游览器的url会显示参数。

（二十一）computed和watch的区别：

computed：
1、computed是计算属性，也就是依赖某个值或者props通过计算得来得数据；
2、 computed的值是在getter执行之后进行缓存的，只有在它依赖的数据发生变化，会重新调用getter来计算；
3、 不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
当多个属性影响一个属性的时候，建议用computed。
watch：
1、watch是监听器，可以监听某一个数据，然后执行相应的操作；
2、不支持缓存，数据变直接会触发相应的操作；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、支持异步操作；
当一个值发生变化之后，会引起一系列的操作，这种情况就适合用watch。