近期前端面试总结

对于面试还是比较喜欢的，一来可以了解市面上公司所使用的技术栈，二来可以认识到自己的不足。

因为不着急换工作，所以一般先找不太中意的公司进行面试（比如外包）。

直接裸面，不做太多准备，这样对于技术的掌握更有帮助。

总结下近期几场面试，遇到的一些比较有难度的问题。

CSS 篇

1、盒模型

这个问题比较简单，盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

2、box-sizing

值	说明
content-box	默认值。内容区宽度，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	设置的边框和内边距的值是包含在 width 内的。内容区的实际宽度是 width 减 去(border + padding) 的值。
inherit	指定 box-sizing 属性的值，应该从父元素继承

JavaScript 篇

1、深拷贝和浅拷贝

浅拷贝和深拷贝都是只针对于像Object，Array这样的引用类型。

浅拷贝只是拷贝指向原来对象的地址。

深拷贝会创建一个新的内存空间，拷贝的值是一样的，但是内存地址不一样。

比如

	let a = [0, 1, 2];
	let b = a;
	b[1] = 3;
	console.log(a) //  [0, 3, 2]
	console.log(b) //  [0, 3, 2]

上述例子实现的就是个浅拷贝，无论修改哪个变量的值，两个变量值都会对应改变。

为了实现两个变量互不影响，需要实现深拷贝。

实现深拷贝

	let a = [0, 1, 2];
	let b = JSON.parse(JSON.stringify(a));
	b[1] = 3;
	console.log(a) //  [0, 1, 2]
	console.log(b) //  [0, 3, 2]

2、JS精度问题

整数（不使用小数点或指数计数法）最多为 15 位。

小数的最大位数是 17，但是浮点运算并不总是 100% 准确。

ES6 篇

1、Map 和 Set 区别

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

数组去重

var mySet = new Set([1, 2, 3, 4, 4]);
[...mySet]; // [1, 2, 3, 4]

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

var kvArray = [["key1", "value1"], ["key2", "value2"]];
 
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
 
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

2、js异步转为同步

Callback（回调函数）
Promise
Generator
async

小程序 篇

小程序分包加载

https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html

VUE 篇

1、加了 scoped 的样式对子组件不生效

在样式选择器前加 /deep/

<style scoped>
/deep/p{
  color: deepskyblue;
}
</style>

2、注册全局组件

Vue.component('componentName', component)

3、组件递归调用

在组件中，通过 name 属性，可以实现自我调用，也就是递归调用。

4、vuex 更新状态

在 mutations 中，定义的更新状态 state 的方法，可以在组件中使用 commit 实现更改。

this.$store.commit("add", 10);

5、vue 重新赋值 data

可以使用 $options.data()

this.form = this.$options.data().form;

6、列表更新局部 dom

可以通过改变 key 值更新

7、父子组件渲染生命周期执行顺序

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

8、$set 的使用

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法

this.$set(原数组, 索引值, 需要赋的值)

9、事务总线移除监听

bus.$off("busMethod");

10、beforeDestroy 一般使用

beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

11、vue-router 路由缓存

路由中的mate属性中记录keepAlive，如果需要缓存则置为true。

path:'/index',
name:'index',
component:()=>import('../../index/index'),
meta:{keepAlive:true}

 //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
 
    //此处是为添加了keepAlive=false 的路由默认不缓存
      <router-view v-if="!$route.meta.keepAlive"/>   

12、vue 设计模式总结

1.工厂模式 - 传入参数即可创建实例

虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode

2.单例模式 - 整个程序有且仅有一个实例

vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

3.发布-订阅模式 (vue 事件机制) 发布订阅模式的核心就是一对多的关系，一个发布者发起事件，所有的订阅者都会执行

4.观察者模式 (响应式数据原理)

5.装饰模式: (@装饰器的用法)在不改变原对象的基础上，通过对其添加属性或方法来进行包装拓展，使得原有对象可以动态具有更多功能
Actions是一个装饰器，它包裹Mutations使之可以异步使用。对于Store对象，使用Action可以异步改变状态；不用Actions也能使用Mutations来同步改变状态；使用Actions也不会改变State、Getters、Mutations的用法、结构

6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略