前端面试问题

如果你在当前分支写完一部分代码，但是没有写完，想缓存一下刚写的代码然后去写另一个分支的代码，这时候该怎么办

使用 git stash

git stash 会把所有的未提交的修改（包括暂存的和未暂存的）都储存起来，用于恢复当前的工作目录，而且当stash之后，这时候当前的工作目录会变得干净

当解决完另一个分支的问题之后再切换会stash之后的分支后可以使用 git stash pop 或者 git stash apply 命令来恢复stash之前的状态，这二者的区别在于pop会将缓存堆栈中第一项删除，而apply不会删除，可以反复使用

可以用 git stash list 命令来查看当前stash的列表
可以使用 git stash drop + stash名 删除某个stash
可以通过 git stash clear 来删除所有的stash

浏览器怎么数据缓存

sessionStorage
存储内容会在当前窗口或会话关闭时清除
能存储 5MB 大小的内容
只在本地存储，不做服务端通信
localStorage
存储内容会一直储存，直至手动删除
能存储 5MB 大小的内容
只在本地存储，不做服务端通信
cookie
存储内容会在关闭浏览器时清除
能存储 4KB 大小的内容
会出现在接口请求的头部

原型链的理解

ES6新特性有哪些

新数据类型 symbol
表示独一无二的值，即每个symbol类型的值都不相同

var sy = Symbol('test');
var sy1 = Symbol('test');
sy == sy1;   //false
var sy2 = new Symbol('test');   //error : 不能使用new关键字

新加两个定义变量的关键字 let const

解构赋值

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

新的对象和方法 map set

map 类似 object，区别

• object 的键只能是字符串或 symbol
• map 的键可以是js支持的任意值，包括函数

map 有个 size 属性，object 没有

set 类似 Array，但 set 的元素是唯一的，所以可以通过 set 对数组进行去重

let arr = [1,1,2,3,4,4];
let mySet = new Set(arr);
let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]

对象的拓展运算符 {...obj} 三点。用于拷贝目标对象所有 可遍历 的属性到当前对象

ES6 函数新添加参数默认值
添加了箭头函数，箭头函数和普通函数的区别是不改变 this 指向

导入
ES6新添加的导入关键字

import ‘模块名称’ from ‘路径’；
import  ‘路径’；

import...from... 用来导入模块，import ... 用来导入样式文件或预处理文件，不需要变量接收的文件

导出

export default obj;
export {a, b};

import {a as aa, b as bb} from 'url';

export 可以向外输出多个成员，且接收名称与输出名称一直（可以使用 as 关键字自定义名称）
export default 只能相向外输出一个成员，接收名与输出名可以不一样

ES6新增加的异步机制 Promise

em 和 rem有什么区别

em 相对于父元素的 font-size 计算尺寸
rem 相对于根元素的 font-size 计算尺寸

回流与重绘有什么区别 怎么避免

回流
当页面上的元素结构发生变化，比如元素大小、位置、内容发生变化，会触发浏览器重新结算页面中元素的位置，使页面布局发生变化，叫回流，回流就会产生重绘
重绘
当当前元素的样式发生变化，但不会导致位置变化，不会产生重新布局，叫重绘，重绘不一定产生回流
避免回流和重绘的方法
避免频繁的操作DOM，可以一次性对多个DOM就行修改，减少回流和重绘的次数
动画上尽量使用css3，减少使用js
对于需要频繁操作元素的大小或位置时，可以先将结果缓存，避免多次计算
在比较复杂的布局上，可以使用绝对定位脱离文档流，避免对其他元素造成影响

ESmodule和CommonJS有什么区别

1. 用法上：ESmodule 是js模块系统，使用 import 导入，使用 export 导出，CommonJS是Node引入的模块化方案，使用 require 导入，使用 module.exports 导出
2. 加载方式：ESmodule 是在编译时静态加载，CommonJs 是在运行时动态加载
3. 特性：ESmodule 支持异步导入导出，动态导入，CommonJs 只支持同步导入导出

js数组有哪些方法

push()	数组末尾添加元素，改变原数组
pop()	删除数组尾部元素，改变原数组
unshift()	数组头部添加元素，改变原数组
shift()	删除数组头部元素，改变原数组
concat()	合并数组，不改变原数组
join()		将数组每一项按指定字符串拼接，默认是逗号
reverse()	将数组倒序，改变原数组
sort()	数组排序，改变原数组
slice()	查找数组中指定范围的元素
splice()	操作数组，包括插入、修改、删除
indexOf()	查找数组中指定元素，返回索引
includes()	查找数组中指定元素，返回布尔值
forEach()	遍历数组
filter()	过滤数组
every()	遍历数组，判断每一项是够都符合指定条件
some()	遍历数组，判断是否有符合条件的元素
reduce() 遍历数组，累加每一项

ul里面有一堆li，需要点击li弹出li的内容，怎么实现

一般会在每个li标签上添加点击事件，问题是性能消耗大，可以在ul标签上添加点击事件
区别是一个涉及到事件冒泡，一个是事件捕获
事件冒泡是点击子元素时，先触发子元素的事件，再触发父元素的事件
时间捕获是点击子元素时，先触发父元素的事件，再触发子元素的事件

<script>
  const ul = document.querySelector('ul')
  ul.addEventListener('click', e => {
     console.log(e.target);
  })
</script>

怎么实现三栏布局

1. 使用 flex 弹性布局实现
2. 使用 position 定位实现
3. 左右元素使用 float 浮动，中间元素利用 BFC 规则，比如 overflow:hidden;

css3有哪些新特性

css3新特性有 圆角、图形化边框、阴影和文字阴影、通过rgba()实现透明度效果、背景颜色渐变、变形（旋转 缩放 倾斜等）、媒体查询等

JSONP的原理

通过动态创建一个 <script> 标签，将请求的数据通过参数拼接在url上，并指定回调函数，通过script向服务端发送请求，服务端接收请求后将数据以参数的形式传给回调函数，前端通过调用函数接收数据实现数据请求。
JSONP 只能用于 GET 请求中

项目中权限怎么做的

登录前，如果用户通过改变URL的形式进行页面跳转，路由重定向为404或权限提示页

1. 通过后端请求获取当前用户的权限，在全局路由守卫里路由跳转时进行权限验证
2. 通过后端返回菜单列表，前端在全局路由守卫里通过对路由列表里某一字段验证实现权限路由跳转

按钮权限，后端返回权限列表，前端通过 v-if 判断功能按钮是否显示

V-model的原理 怎么做的数据双向绑定

将表单和变量通过 v-bind 绑定，表单内容发生变化时触发 input 事件，事件对象把获取的最新值赋值给变量

vue2是通过 Object.defineProperty() 方法拦截data里每个数据的 setter getter的方式实现的

vue3是为所有数据创建一个 Proxy 对象，数据发生改变时，Proxy 对象会捕获更新并传到视图上实现数据绑定

MVVM是什么

MVVM是 Module-view-ViewModule的简写
M代表module 模型，数据层
V代表view 视图，视图层
VM代表viewmodule 视图模型，连接module层和view层，进行数据和dom绑定

Vue的nextTick

vue的更新是异步的，当修改了数据后，组件不会立即进行视图更新，而是会在下一个事件中更新，如果我们需要在修改状态后立即获取更新后的dom，这就需要用到 nextTick，这个方法的参数是一个回调函数，回调函数中可以拿到更新后的dom