Web前端企业面试题

1、display和visibility的区别？

答：

一、display和visibility的相同与不同点

1、相同点：display和visibility都有讲元素隐藏的意思

2、不同点：display是元素隐藏，隐藏的元素不占文档流

元素用display:none隐藏
下面的元素

而visibility隐藏的元素仍然占文档流

元素用visibility: hidden;隐藏
下面的元素

二、display和visibility的属性值

1、display

　　display：block；将元素设置为块级元素，独占一行，能设置宽高
　　display：inline-block;将元素设置为行内快显示，能设置宽高，但是不独占一行
　　display：none；将元素设置为隐藏，后面的元素能自动往上填充

2、visibility

　　visibility：visible；元素可见，默认值　
　　visibility：hidden；将元素设置成隐藏，隐藏的元素仍然占据文档流
　　visibility：collapse；只对table对象起作用，用在其他元素中表示隐藏
　　visibility:inherit；继承其父级元素样式

2、for 循环in、of和forEach的区别？

答：

在开发过程中经常需要循环遍历数组或者对象，使用最多的方法forEach、for…in 、 for…of，整理一下他们的异同点

for循环

其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的 就是for循环，它用来遍历数组

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
console.log(arr[i])
}

for循环中可以使用return、break等来中断循环

结果：

forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。

let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, idx, arr) {
console.log(val + ', index = ' + idx) // val是当前元素，index当前元素索引，arr数组
console.log(arr)
})

输出结果：

a, index = 0
(4) ["a", "b", "c", "d"]
b, index = 1
(4) ["a", "b", "c", "d"]
c, index = 2
(4) ["a", "b", "c", "d"]
d, index = 3
(4) ["a", "b", "c", "d"]

for…in

循环遍历的值都是数据结构的键值

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d
console.log(obj[o]) //这个才是属性对应的值1，2，3，4
}

总结一句: for in也可以循环数组但是特别适合遍历对象

结果：

for…of

它是ES6中新增加的语法，用来循环获取一对键值对中的值

循环一个数组

let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}

循环一个普通对象（报错）

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}

3、px、em、rem之间有什么区别，移动端响应式布局方式有哪些？

答：

px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。

所以相对于同一机型来说是一个绝对的长度单位。

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

以其父级元素为基准来变化长度。所以其算法不是一个固定的值。

rem：是CSS3新增的一个相对单位（root em，根em）。

那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。

在移动设备上，我们常常设置

此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。

因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。

那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。

4、Js中操作数组的方法有哪些？

基础篇

1.shift

// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

var a = [1, 2, 3, 4, 5]
var b = a.shift()// a:[2,3,4,5] b:1

2.unshift

// 将参数添加到原数组开头，并返回数组的长度

var a = [1, 2, 3, 4, 5]
var b = a.unshift(-2, -1)// a;[-2,-1,1,2,3,4,5] b:7

//注：此方法在ie6.0下

// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠

// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

var a = [1, 2, 3, 4, 5]
var b = a.pop()// a:[1,2,3,4] b:5

4.push

// 将参数添加到原数组末尾，并返回数组的长度

var a = [1, 2, 3, 4, 5]
var b = a.push(6, 7)// a:[1,2,3,4,5,6,7] b:7

5.concat

// 返回一个新数组，是将参数添加到原数组中构成的

var a = [1, 2, 3, 4, 5]
var b = a.concat(6, 7)// a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

6.splice

// splice(start,deleteCount.val1,val2,…):从start开始删除deleteCount项
// 并从该位置起插入val1,val2,…

var a = [1, 2, 3, 4, 5]
var b = a.splice(2, 2, 7, 8, 9)// a:[1,2,7,8,9,5] b:[3,4]

7.reverse

// 将数组反序
var a = [1, 2, 3, 4, 5]
var b = a.reverse()// a:[5,4,3,2,1] b:[5,4,3,2,1]

8.sort(orderfunction)

// 按指定的参数对数组进行排序
var a = [1, 2, 3, 4, 5]
var b = a.sort()// a:[1,2,3,4,5] b:[1,2,3,4,5]

9.slice(start,end)

// 返回从原数组指定开始的下标到结束下标之间的项组成的新数组
// 不改变原数组
var a = [1, 2, 3, 4, 5]
var b = a.slice(2, 5)// a:[1,2,3,4,5] b:[3,4,5]

10.join(separator)

// 将数组的元素组起一个字符串，以separator为分隔符，省略
// 的话则用默认的逗号为分隔符
var a = [1, 2, 3, 4, 5]
var b = a.join('|')// a:[1,2,3,4,5] b:"1|2|3|4|5"

11.indexOf

// 数组元素索引并返回元素索引，不存在返回-1,索引从0开始,是从前往后查找
var a = ['a', 'b', 'c', 'd', 'e']
a.indexOf('a')// 0
a.indexOf(a)// -1
a.indexOf('f')// -1
a.indexOf('e')// 4

12.lastIndexOf

// 接受两个参数：查找的值、查找起始位置
// 不存在，返回 -1 ；存在，返回位置。是从后往前查找
var a= [2, 5, 9, 2]
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1
a.lastIndexOf(2, 3) // 3
a.lastIndexOf(2, 2) // 0
a.lastIndexOf(2, -2) // 0
a.lastIndexOf(2, -1) // 3

13. Array.isArray()

// 判断对象是否是数组，返回布尔值。不改变原数组。
var a = 1
var test = [1, 2, 3, 4]
console.log(Array.isArray(a)) // false
console.log(Array.isArray(test)) // true

14. Array.toString()

// 将数组转化为字符串，返回字符串，不改变原数组
var test = [1, 2, 3, 4]
test1 = test.toString()
console.log(test) // [1, 2, 3, 4]
console.log(test1) // 1,2,3,4

进阶篇

1.forEach

是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。

let xxb = ["北京", "南京", "广州", "重庆", "西安", "拉萨"];
xxb.forEach(item=> {
console.log(item,'forEach');
})

2.map

map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此

let xxb = ["北京", "南京", "广州", "重庆", "西安", "拉萨"];
let xxb_map = xxb.map((item,index,list)=> {
console.log(item,'mapitem'); //
console.log(index,'mapindex'); //
console.log(list,'maplist'); //
return item+'市'
})
console.log(xxb_map,"58")

forEach和map对比

相同点

1）都是循环遍历数组中的每一项；

2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；

3）this都是指向调用方法的数组；

4) 只能遍历数组；

不相同点

1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。

2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。

3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。

3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。

理解: 就是在一堆数据里面去筛选你需要的数据 或者 剔除你不需要的数据

function City (province, school, level) {
this.province = province;
this.school = school;
this.level = level;
}
let beijing = new City('北京都', ['北京大学', '清华大学'], 1);
let xian = new City('西安都', ['西安交通大学', '西北工业大学'], 2);
let hubei = new City('湖北省', ['武汉大学', '华中科技大学'], 2);
let hunan = new City('湖南省', ['湖南大学', '中南大学'], 3);
let sichuan = new City('四川省', ['四川大学', '电子科技大学'], 3);
let cities = [beijing, xian, hubei, hunan, sichuan];
let tops = cities.filter(function(item, index, list) {
return item.level != 1; // 筛选出 level 不为 1 的数组
});
console.log(tops, '77');

4.find()

返回通过测试的数组的第一个元素的值,

理解:假如你去一个一群人的地方去找人 你说我找xxb 他要是在那里就找到 不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法

array.find(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(elem){
return elem>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]

扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧

5.every

它地用武之地在哪里呢？不期望它能对原始数组进行修改。它地定位是考察数组地整体特性。也就是考察数组中所有元素的共性。比如所有元素是否都是奇数，或者所有元素是否都是偶数。它关注的是数组整体元素的共性。只要有一个不满足，循环就会结束，接下来的数据就不会继续判断。

理解: 这个就像 上课了 老师说 昨天布置的作业 只要有一个人没有写完 今天就不讲课 然后挨个检查 当检查到有一个没有写完的时候 就不检查了 返回 不讲课了(false)

// var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var numbers = [2, 4,, 6, 8, 9,10];
let bool = numbers.every(function(item, index, list) {
console.log(item,'90');
return item % 2 == 0;
});
console.log(bool,'93');

6.some

它地用武之地在哪里呢？它的定位是考察数组的个性。比如考察数组中是否存在一个等于0的数。它关注的是数组的个性。只要有一个满足，循环就会结束，接下来的数据就不会继续判断。

理解: 相当于在一个数组里面找你想要的那个数 找到了 就返回true 找不到就返回false

var numbers = [2, 4, 6, 8, 9,10];
let bool = numbers.some(function(item, index, list) {
console.log(item,97);
return item == 4;
});
console.log(bool,"100");

7.reduce

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值 然后返回出来,callback

他可以传四个参数:

1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)

2,currentValue:数组中当前被处理的元素

3,index:不啰嗦,自己顾名思义去吧

4,array:返回调用reduce的数组

// 获取购物车中商品列表的价格总和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price: 15, qty: 2}, {id: 3, price: 20, qty: 1}]
let totalPrice = goodList.reduce((prev, cur, index, arr) => {
// prev就是每次合并返回的值 第一次返回时还没有做合并就是返回的默认值0
// 下面分别是10*5=50; ---- 15*2=30+50=80;---- 20*1=20+80=100
console.log(prev, '----', cur, '----', index, '----', arr)
return prev + cur.price * cur.qty
// 这个0就是prev 的默认值
}, 0)
console.log(totalPrice, 'totalPrice')

var arrString = 'abcdaabc'
// 获取字符中中每个字母出现的次数
let count = arrString.split('').reduce(function(res, cur) {
console.log(res, cur, 'res, cur')
res[cur] ? res[cur]++ : res[cur] = 1
return res
}, {})
console.log(count, 'count') // {a: 3, b: 2, c: 2, d: 1}

彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点： 如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

substr(startIndex)
substring(startIndex)
var str = '123456789'
console.log(str.substr(2)) // "3456789"
console.log(str.substring(2)) // "3456789"

不同点： 第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；

substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标 （截取2个位置之间的字符串,‘含头不含尾'）。

console.log('123456789'.substr(2, 5)) // "34567"
console.log('123456789'.substring(2, 5)) // "345"

5、Vue中created钩子和mounted钩子有什么区别？

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。

所以，一般creadted钩子函数主要是用来初始化数据。

2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例

下面是结果

nihao

取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

{{msg}}

网址 {{msg}}的网络协议是：{{msg2}}

总结：
通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
methods:{}中的方法都需要主动去触发，比如点击click之类的
而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行
created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

{{msg}}
网址 {{msg}}的网络协议是：{{msg2}}

mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。
所有的方法都应该在methods里定义，然后在created或者mounted里 使用this调用方法，用这种方式实现初始化

6、Vue中组件之间的传参方式有哪些方式？

Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、props 传参

子组件定义 props 有三种方式:

// 第一种数组方式

props: [xxx, xxx, xxx]

// 第二种对象方式

props: { xxx: Number, xxx: String}

// 第三种对象嵌套对象方式

props: {
xxx: {
//类型不匹配会警告
type: Number,
default: 0,
required: true,
// 返回值不是 true,会警告
validator(val) { return val === 10}
}
}

第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用

父组件传参的俩种方式

第一种静态属性传参

注意：

1、在不定义 props 类型的情况下 props 接受到的均为 String。

2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true

第二种动态属性传参

注意：

1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值

2、会保留传入值的类型

3、如果是表达式则获取到的是表达式的计算结果

二、attrs 和listeners

$attrs

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。

属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）

$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

三、$emit 通知

Vue 默认有 $on $emit $once $off 几种方法来实现发布订阅模式，这也应用在了组件传参上。在组件上添加的特殊方法 @abc="methods" 就相当于使用了 $on 来监听这个方法。因此组件内可以使用 $emit 来进行通知。

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种，一是 $event, 二是 闭包。只是需要注意 $event 只能获取到第一个值

四、v-model

这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

// 写法 1

{
model: {
prop: 'value',
event: 'update:a',
},
methods: {
a() { this.$emit('update:a', 1)}
}
}
// 写法 2

{
props: ['a']
methods: {
a() { this.$emit('update:a', 1)}
}
}
// 写法 3
// 1. 事件名必须是 update: + 属性名
// 2. 参数不能是表达式，最好是 data 里面的属性

{
props: ['a']
methods: {
a() { this.$emit('update:a', 1)}
}
}

五、插槽

123

六、$refs, $root, $parent, $children

$root 获取根组件

$parent 获取父组件

$children 获取子组件(所有的子组件，不保证顺序)

$refs 组件获取组件实例，元素获取元素

七、project / inject

注意：注入的值是非响应的

{
project() {
return {
parent: this
}
}
}

{
// 写法一
inject: ['parent']
// 写法二
inject: { parent: 'parent' }
// 写法三
inject: {
parent: {
from: 'parent',
default: 222
}
}
}

八、Vuex

这个相当于单独维护的一组数据，就不过多的说了。

7、Vue中watch和computed之间有什么区别？

watch，computed和methods的关系

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据

2.computed擅长处理的场景：一个数据受多个数据影响

watch用法 监听下记haiZeiTuan_Name的值，会改变其他所有的值

// 在watch中，一旦haiZeiTuan_Name（海贼团名称）发生改变
data选项中的船员名称全部会自动改变 （suoLong，naMei，xiangJiShi），并把它们打印出来
// 多个）船员名称数据 --> 依赖于 --> （1个)海贼团名称数据一个数据变化 ---> 多个数据全部变化
data: {
haiZeiTuan_Name: '草帽海贼团',
suoLong: '草帽海贼团索隆', (haiZeiTuan_Name + 海贼名称)
naMei: '草帽海贼团娜美',
xiangJiShi: '草帽海贼团香吉士'
},
watch: {
haiZeiTuan_Name: function (newName) {
this.suoLong = newName + '索隆'
this.naMei = newName + '娜美'
this.xiangJiShi = newName + '香吉士'
console.log(this.suoLong)
console.log(this.naMei)
console.log(this.xiangJiShi)
}
}
// 更改watch选项中监控的主数据

vm.haiZeiTuan_Name = '橡胶海贼团'

结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推

computed用法 监听下记firstName，secName，thirdName的值，会改变luFei_Name的值

data: {
// 路飞的全名：蒙奇·D·路飞
firstName: '蒙奇',
secName: 'D',
thirdName: '路飞'
},
computed: {
luFei_Name: function () {
return this.firstName + this.secName + this.thirdName
}
}
// 将“路飞”改为“海军王”
vm.thirdName = '海军王' // 蒙奇·D·海军王

methods和computed的区别例子

new Vue({
el: '#app',
// 设置两个button，点击分别调用getMethodsDate,getComputedDate方法
template:
'
methods
computed
',
methods: {
getMethodsDate: function () {
alert(new Date())
},
// 返回computed选项中设置的计算属性——computedDate
getComputedDate: function () {
alert(this.computedDate)
}
},
computed: {
computedDate: function () {
return new Date()
}
}

注意两次点击computed返回的时间是相同的！！

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算

只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件,computed才会重新计算。

参考：http://www.cnblogs.com/penghuwan/p/7194133.html

8、在Vue项目中用到哪些性能优化问题？是这么处理的？

答：https://codecat.blog.csdn.net/article/details/100031285

9、async和promise的作用和用法分别有哪些？

1、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

2、async await

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档

两者的区别

1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

2、async await与Promise一样，是非阻塞的。

3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。

// promise方法
let p1 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p1')
},4000)
})
let p2 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p2')
},200)
})
let p3 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是p3')
},200)
})
// 想让p1完成后再执行P2再执行P3
// 数量太多只能这么写
p1.then((res) => {
console.log(res);
p2.then((res) => {
console.log(res);
p3.then((res) => {
console.log(res);
})
})
})
//下面大神回答的挺好的
p1.then((res)=>{ console.log(res) return p2 })
.then((res)=>{ console.log(res) return p3 })
.then((res)=>{ console.log(res) })
// async await语法糖
let a1=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a1')
},4000)
})
}
let a2=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a2')
},40)
})
}
let a3=()=>{
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve('我是a3')
},40)
})
}
// 想让a1完成后再执行a2再执行a3
//能避免回调
async function asy(){
await a1().then((res) => {console.log(res)});
await a2().then((res) => {console.log(res)});;
await a3().then((res) => {console.log(res)});;
}
asy();