前端面试你所必须知道的（前端面试题基础篇）

1.项目介绍

简单介绍

2.项目中遇到的问题

简单介绍

3.最近一个项目用到哪些技术

Vue ， Vant ，对接微信小程序和支付宝小程序

4.移动端适配方案

①定高适配

②流式布局

③响应式布局

④Rem 适配

5. 数组的求最大值，排序，删除

冒泡排序， arr.sort(( a, b )=>{ b-a }), splice(0, 1, ***)

6. 清除浮动

(1) 父级 div 定义 height

(2) 结尾处加空 div 标签 clear:both

(3) 父级 div 定义 伪类 :after 和 zoom

(4) 父级 div 定义 overflow:hidden

(5) 父级 div 定义 overflow:auto

(6) 父级 div 定义 display:table

7. Es6的新特性

1. 新增了块级作用域 (let,const)
2. 提供了定义类的语法糖 (class)
3. 新增了一种基本数据类型 (Symbol)
4. 新增了变量的解构赋值
5. 新增了箭头函数
6. 数组新增了一些 API ，如 isArray / from / of 方法
7. 对象和数组新增了扩展运算符
8. 新增了模块化 (import/export)
9. 新增了 Set 和 Map 数据结构
10. 原生提供 Promise构造函数

8. 说说你了解的 promise

Promise 是一个构造函数，用来解决异步操作的

promise 有三种状态 : fulfilled, rejected, pending.

Promise 的优点 :

一旦状态改变，就不会再变，任何时候都可以得到这个结果

可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

Promise 的缺点 :

无法取消 Promise

当处于 pending 状态时，无法得知目前进展到哪一个阶段

Promise 的构造函数是同步执行的； then 中的方法是异步执行的。

Promise 是微任务， setTimeout 是宏任务，同一个事件循环中， promise.then 总是先于 setTimeout 执行。

9.Css3做轮播图原理

我们会在同样的位置准备好多个大小相同的图片，并且横放在 div 容器内，然后在 div 容器之上设置一个展示容器，其中展示容器的大小和图片大小相同，最后给图片容器添加自定义动画，并且在动画不同阶段设置递增的偏移值。

首先必须保证展示容器大小与图片大小相同，再为图片添加 float 效果，然后确定插入的图片数量并且为每个图片设置动画阶段，其中每个阶段都是通过使用 keyframes 设置递增的 margin-left值达到切换的效果。

10.let, const和var

1. let 和 const 定义的变量不会出现变量提升，而 var 定义的变量会提升。
2. let 和 const 是 JS 中的块级作用域
3. let 和 const 不允许重复声明 ( 会抛出错误 )
4. let 和 const 定义的变量在定义语句之前，如果使用会抛出错误 ( 形成了暂时性死区 ) ，而 var不会。
5. const 声明一个只读的常量。一旦声明，常量的值就不能改变 ( 如果声明是一个对象，那么不能改变的是对象的引用地址 )

const 只是一个指针，指向一个内存空间，内存空间的内容可以改变，但是 const 指向一个新的空间就会会抛出错误

11.如何做个三角形

设置 width: 0; height: 0;border-left ， border-right 为 50px solid transpa'rent ； border-bottom： 50px solid red; 即可

12.Vue的常用钩子函数

1. beforeCreate

这个时候， this 变量还不能使用，在 data 下的数据，和 methods 下的方法， watcher 中的事件都不能获得到；

1. created

这个时候可以操作 vue 实例中的数据和各种方法，但是还不能对 "dom" 节点进行操作；

1. mounted

这个时候挂载完毕，这时 dom 节点被渲染到文档内，一些需要 dom 的操作在此时才能正常进行。

注意：

mounted

在整个实例的生命周期中只执行一次。

1. computed

是把所有需要依赖其他值计算的值写成对象的 key 值。

1. watch

把监听的值写成对象的 key 值

13.如何隐藏一个元素，会不会引起重绘和回流

①display: none;

②position:absolute;left: -99999px;

③margin-left: -99999px;height: 0;

④transform: scale(0);height: 0;

⑤opacity: 0;

⑥visibility: hidden;

⑦position: relative;z-index: -999;

回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流

当页面布局和几何属性改变时就需要回流

比如：添加或者删除可见的

DOM

元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

14.Vue加载完成在哪个阶段，在created可以Windows查询吗

完成是在 mounted,created 可以 windows 查询

15.H5和Css3的新特性

H5 新特性：

1. 拖拽释放 (Drag and drop) API

2. 语义化更好的内容标签（ header,nav,footer,aside,article,section ）

3. 音频、视频 API(audio,video)

4. 画布 (Canvas) API

5. 地理 (Geolocation) API

6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件， calendar 、 date 、 time 、 email 、 url 、 search

9. 新的技术 webworker, websocket, Geolocation

10. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除。

Css3 的新特性 ：

1. 颜色：新增 RGBA ， HSLA 模式
2. 文字阴影（ text-shadow 、）
3. 边框： 圆角（ border-radius ）边框阴影： box-shadow

4. 盒子模型： box-sizing

5. 背景： background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点

background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

1. 渐变： linear-gradient 、 radial-gradient

7. 过渡： transition ，可实现动画

8. 自定义动画

9. 在 CSS3 中唯一引入的伪元素是 ：： selection.

10. 媒体查询，多栏布局

11. border-image

12. 2D/3D转换

16.介绍下盒模型，如何转换

所有 HTML 元素可以看作盒子，在 CSS 中， "box model" 这一术语是用来设计和布局时使用。

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

Margin( 外边距 ) - 清除边框外的区域，外边距是透明的。

Border( 边框 ) - 围绕在内边距和内容外的边框。

Padding( 内边距 ) - 清除内容周围的区域，内边距是透明的。

Content( 内容 ) - 盒子的内容，显示文本和图像。 、

如何转换：

box-sizing 值为 content-box 时：即 标准盒模型

box-sizing 值为 border-box 时：即 怪异盒模型

17.js数据类型，基本类型和引用类型区别

基本数据类型： Number ， String ， Bollean ， Null ， Undefined, Symbol(Es6 新增 )

引用数据类型： Array ， Object ， Function

区别：

基本数据类型指的是简单的数据段，引用数据类型指的是有多个值构成的对象。

基本数据类型是按值访问的，因为可以直接操作保存在变量中的实际值。引用数据类型是保存在堆内存中的对象。复制变量和参数传递不同。

18.如何解决用户登录权限判断

在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。

19.如何解决跨域问题

1. 比如 jsonp; 在页面中添加 script 标签 , 通过 src 属性请求不同域的 js 代码 , 只能支持 get 请求 .

2. window.postMessage

3. 跨域资源共享（ CORS ）

4. nginx 正向代理代理客户端，反向代理代理服务器；反向代理，其实客户端对代理是无感知的，因为客户端不需要任何配置就可以访问，我们只需要将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器获取数据后，在返回给客户端，此时反向代理服务器和目标服务器对外就是一个服务器，暴露的是代理服务器地址，隐藏了真实服务器 IP 地址。

15. Jsonp工作原理

利用 <script> 标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个 <script> 元素，地址指向第三方的 API 网址，形如：

<script src="http://www.example.net/api?param1=1?m2=2"></script>

并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。

第三方产生的响应为 json 数据的包装（故称之为 jsonp ，即 json padding ），形如：

callback({"name":"hax","gender":"Male"})

这样浏览器会调用 callback 函数，并传递解析后 json 对象作为参数。本站脚本可在 callback

函数里处理所传入的数据。

20.flex布局下如何换行

Flex-wrap: wrap;

21. 数组的常用方法有哪些， foreach和map有什么区别

修改原数组的 API 有 :

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原数组的 API 有 :

slice/map/forEach/every/filter/reduce/entries/find

1 、 forEach() 返回值是 undefined ，不可以链式调用。

2 、 map() 返回一个新数组，原数组不会改变。

3 、没有办法终止或者跳出 forEach() 循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的 for 循环实现，或者用 Array.every() 或者 Array.some();

4 、 $.each() 方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。

22. 使用过 slot 插槽吗，介绍下

slot 插槽可以在组件的内容预留一个位置 . 类似于 placeholder.

在需要的使用 , 把你需要的任何内容填充进去 .

单个 Slot

在子组件内使用特殊的 <slot> 元素就可以为这个子组件添加一个 slot ( 插槽 ), 在父组件模板里 ,插入在子组件标签内的所有内容将替代子组件的 <slot> 标签及它的内容

.

23.Vuex的理解

Vuex 简单说就是全局状态管理的 , 项目中常常需要有几个参数所有组件都要用 , 或者同级组件之间的数据传递和通信。此时使用 vuex 非常方便开发。

核心属性为： state ， getter ， mutation ， action ， module

state ：存储数据，存储状态；在根实例中注册了 store 后，用 this.$store.state 来访问；对应vue 里面的 data ；存放数据方式为响应式， vue 组件从 store 中读取数据，如数据发生变化，组件也会对应的更新。

getters ：可以认为是 store 的计算属性，相当于 vue 中的 computed ，依赖于 state 里面的值。它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutations ：用于修改状态， store 里面的数仅能通过 mutations 里面的方法改变 , 但是必须是同步的。更改 vuex 的 store 中的状态的唯一方法是提交 mutation ，也就是 $store.commit 。

actions ：包含任意异步操作，用它处理完后再触发 mutations 来改变状态。

module ：将 store 分割成模块，每个模块都具有 state 、 mutation 、 action 、 getter 、甚至是嵌套子模块。

24.v-if和v-show的区别

手段： v-if 是动态的向 DOM 树内添加或者删除 DOM 元素； v-show 是通过设置 DOM 元素的display 样式属性控制显隐

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

编译条件： v-if 是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载 ); v-show 是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且 DOM 元素保留

性能消耗： v-if 有更高的切换消耗； v-show 有更高的初始渲染消耗

使用场景： v-if 适合运营条件不大可能改变； v-show 适合频繁切换

相同点 v-show 都可以动态控制着 dom 元素的显示隐藏

不同点： v-if 的显示隐藏是将 DOM 元素整个添加或删除， v-show 的显示隐藏是为 DOM 元素添加 css 的样式 display ，设置 none 或者是 block ， DOM 元素是还存在的

在渲染多个元素的时候，可以把一个 元素作为包装元素，并使用 v-if 进行条件判断，最终的渲染不会包含这个元素， v-show 是不支持 语法

25. 项目开发中 git的使用，如何合并

一. git clone 项目到本地

在多人开发中，一般的项目有 master 和其他分支，那么 clone 操作就需要你指定对应的分支把项目工程 clone 到本地，

1. 首先新建一个空文件夹，把文件夹进行 git 初始化操作 , 在文件夹的根目录下，右键选择 git bash here ，在弹出的窗体中输入命令： git init

这样就把该文件夹 git 初始化了

2. 接下来就是 clone 操作了，继续输入命令： git clone xx( 此处为你的项目的 git 地址），一般这个命令 clone 下来的是 master 分支的项目，你也可以 clone 指定分支的工程，命令： git clone -b 分支名 git 地址

二. 使用 git 把本地项目提交到 github

1. 如果该工程没有 git 初始化，那么在工程根目录下使用 git init 进行初始化，如果已经初始化，则省略这步

2. 将项目的文件添加到仓库中使用 git add ，（ git add . ）表示将所有文件都添加，（ git add xx( 指定文件 ) ）表示将指定文件添加进去

3. 将 add 的文件 commit 到仓库，命令： git commit -m " 你想写的注释 "

4. 将本地的仓库关联到 github 上，命令如下： git remote add origin xxx （此处为你的 git 地址）

5. 在进行 push 之前，先进行 pull 操作，命令如下： git pull origin xxx( 此处为你的分支名， master 或者其他分支名 )

6. 上传代码到 github 远程仓库，命令如下： git push -u origin xxx （此处为你的分支名），在这个步骤中可能会有弹窗要你输入你的用户名和密码，按照指示操作即可

冲突是如何解决的

情况 1 ： 无冲突

先拉取远端代码，更新本地代码。然后提交自己的更新代码即可。

情况 2 ：有冲突

拉去远端代码，存在冲突，会报错。此时我们需要将本地代码暂存起来 stash; 更新本地代码，将本地代码版本更新和远端的代码一致，将暂存的代码合并到更新后的代码后，有冲突的要手动解决冲突，然后提交解决冲突后的代码。

有想了解更多的朋友可以去https://www.jianshu.com/p/86bb74768d12 看一下。