关于前端的面试题归纳总结！

美团点评：

1、简单介绍css盒模型链接：https://www.cnblogs.com/chengzp/p/cssbox.html

盒模型的组成：content、padding、border、margin

标准以及设置方法：

1⃣️标准模型：盒模型的宽高=内容（content）的宽高

/*标准模型*/
box-sizing:content-box;

2⃣️IE模型：盒模型的宽高=内容（content）+内边距（padding）+边框（border）的总宽高

/*IE模型*/
box-sizing：border-box;

2、什么情况会引起边距重叠，应该怎么解决？

1⃣️父元素没有设置 margin，子元素设置了

2⃣️两个块级元素垂直方向的margin会发生重叠

解决：BFC----Block Formatting Context 块级格式化上下文

BFC是一个页面上的独立的容器，外面的元素不会影响BFC里的元素，反过来，里面也不会影响外面的。

如何创建BFC：

（1）float属性不为none（脱离文档流）

（2）position=absolute/fixed

（3）display = inline-block/inline-flex/table-cell

(4)overflow不为visible

（5）根元素

用途：

（1）自适应两栏布局

（2）清除内部浮动

（3）防止垂直margin重叠----->添加父元素设置overflow:hidden即可

3、CommonJS，AMD，CMD异同链接：https://www.cnblogs.com/chenguangliang/p/5856701.html

前端模块规范有三种：CommonJs,AMD和CMD。
CommonJs用在服务器端，AMD和CMD用在浏览器环境
AMD(异步模块定义) 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

在CommonJS中，有一个全局性方法require()，用于加载模块。

CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}

require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

CMDvsAMD：https://github.com/seajs/seajs/issues/277

4、内存空间：链接：https://www.jianshu.com/p/996671d4dcc4

5、执行上下文：https://www.jianshu.com/p/a6d37c77e8db

6、作用域链和闭包：

作用域包括：全局和函数作用域

7、Flex了解吗？

弹性布局：使用弹性布局可以有效的分配一个容器的空间
即使我们的容器元素尺寸改变
它内部的元素也可以调整它的尺寸来适应空间

弹性盒布局“容器”有如下属性

flex-flow：flex-direction，flex-wrap
justify-content
align-items
align-content

flex-direction

使用flex-direction指定主轴的方向，从而改变项目的排列方向
属性值：

row（默认）
row-reverse
column
column-reverse

flex-wrap

弹性盒的项目默认都是排列在一个轴上的
这样如果项目多的话，会“弹性”压缩在一行

flex-wrap: wrap可以让我们指定当容器“装不下”项目时，是否换行
属性值如下：

no-wrap
wrap
wrap-reverse

flex-flow

flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的

justify-content

justify-content属性定义了项目在主轴上的对齐方式
属性值如下：

flex-start：左对齐（默认）
flex-end：右对齐
center：居中
space-between：两端对齐（项目间间隔相同）
space-around：两端间隔对齐（项目间间隔是项目与边框间隔的2倍）

align-items

align-items属性定义项目在交叉轴上如何对齐
属性值如下：

stretch：未设置高度（或height: auto）的项目占满整个容器高度（默认）
flex-start ：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴中点对齐
baseline：项目第一行文字的基线对齐

align-content

align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效，一条主轴无效
类似于justify-content属性
属性值如下：

stretch：轴线占满整个交叉轴（默认值）
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线间间隔相等
space-around：每根轴线两侧的间隔都相等

8、ES6知道些什么？

1、let和const

我们通常用 let 和 const 来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。怎么理解这个块级作用域？

在一个函数内部
在一个代码块内部

说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域。

let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

再来说说 const
const 声明的变量必须提供一个值，而且会被认为是常量，意思就是它的值被设置完成后就不能再修改了。

2、字符串 https://www.jianshu.com/p/287e0bb867ae

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。

//ES5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

     // ES5
    var msg = "Hi \
    man!
    "
    // ES6
    const template = `<div>
        <span>hello world</span>
    </div>`

3、函数

（1）函数默认参数

（2）箭头函数

箭头函数最直观的三个特点。

不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字
```
//例如：
    [1,2,3].map(x => x + 1)
    
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))
```
当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:

   var people = name => 'hello' + name
    //参数name就没有括号

4、Spread Operator 展开运算符记作：‘...’

（1）组装对象或是数组

//数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

（2）想获取数组或者对象除了前几项或者除了某几项的其他项

//数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"

（3）对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

5、import 和 export

import导入模块、export导出模块

6、promise

Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。简单点说，它就是用于处理异步操作的，异步处理成功了就执行成功的操作，异步处理失败了就捕获错误或者停止后续操作。

它有两个参数resolve和reject。它内部通常有一些异步操作，如果异步操作成功，则可以调用resolve()来将该实例的状态置为fulfilled，即已完成的，如果一旦失败，可以调用reject()来将该实例的状态置为rejected，即失败的。

我们可以把Promise对象看成是一条工厂的流水线，对于流水线来说，从它的工作职能上看，它只有三种状态，一个是初始状态（刚开机的时候），一个是加工产品成功，一个是加工产品失败（出现了某些故障）。同样对于Promise对象来说，它也有三种状态：

pending
初始状态,也称为未定状态，就是初始化Promise时，调用executor执行器函数后的状态。
fulfilled
完成状态，意味着异步操作成功。
rejected
失败状态，意味着异步操作失败。

它只有两种状态可以转化，即

操作成功
pending -> fulfilled
操作失败
pending -> rejected

并且这个状态转化是单向的，不可逆转，已经确定的状态（fulfilled/rejected）无法转回初始状态（pending）。

方法

Promise.prototype.then()

Promise对象含有then方法，then()调用后返回一个Promise对象，意味着实例化后的Promise对象可以进行链式调用，而且这个then()方法可以接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。

Promise.prototype.catch()

catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数。

Promise.all()

Promise.all()接收一个参数，它必须是可以迭代的，比如数组。

它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。

它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。

成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果。

Promise.race()

Promise.race()和Promise.all()类似，都接收一个可以迭代的参数，但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢

Promise.resolve()

Promise.resolve()接受一个参数值，可以是普通的值，具有then()方法的对象和Promise实例。正常情况下，它返回一个Promise对象，状态为fulfilled。但是，当解析时发生错误时，返回的Promise对象将会置为rejected态。

Promise.reject()

Promise.reject()和Promise.resolve()正好相反，它接收一个参数值reason，即发生异常的原因。此时返回的Promise对象将会置为rejected态。

9、vuex和route？

10、v-if和v-show区别？

11、垂直居中有几种方式？

（1）父元素设置position=relative; 子元素设置position=absolute；left = 50%,top=50%

（2）父元素：position:relative; 子元素：position:absolute;top: 50%; transform: translate(0, -50%);

（3）第一种弹性布局：父元素：display:flex;flex-direction:column; justify-content: center;

（4）第二种弹性布局：父元素：display:flex;align-items:center;