2020了，初/中级前端面试你应该知道的（上）

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 transparent；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;更新本地代码，将本地代码版本更新和远端的代码一致，将暂存的代码合并到更新后的代码后，有冲突的要手动解决冲突，然后提交解决冲突后的代码。