ES6常问面试题（Promise，async和await 等）

文章目录

ES6新特征
- Promise
- - Promise 构造函数：
- 箭头函数
- set
- - set的方法：
  - set的应用
- map
- - Map的属性和方法:
- 模块化
- - export的语法
  - import的语法
- 迭代器（Iterator）
- 生成器
ES7新特性
- 数组方法incloudes
- 幂运算 **
ES8新特性
- async 和await
- - async函数
  - await表达式

ES6新特征

Promise

Promise 是es6引入的异步编程的新解决方案，语法上Promises是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果，实例化一个Promise对象，里面有一个参数，参数是函数类型值，有两个形参，一个是resolve,一个是reject，然后执行一个异步操作，会得到一个数据，然后调用resolve方法，然后promise的状态就会变成一个成功，然后调用promise对象的.then方法，里面有两个函数，一个是成功的时候调用，一个是失败的时候调用

Promise 构造函数：

1)Promise.then方法(里面有两个函数，一个是成功调用，一个是失败调用)

2)Promise.cath方法（用来捕获promise异步操作失败的方法）

3)Promise.reslove方法（创建Promise成功的案例）

4)Promise.reject方法（创建Promise失败的案例）

5)Promise.all()方法（接收一个包含多个promise对象的数组，等待所有的都完成时，返回存放他们结结果的数组，全部异步操作执行完成后，执行.then方法）

6)Promise.race()方法（接收一个包含多个promise对象的数组，数组内第一个完成的promise对象决定了整个promise对象的状态的，有一个异步操作执行完成后，就执行.then方法）

 <script>const p = new Promise(function (resolve, regect) {setTimeout(function () {let data = '数据库中的数据'let err = '数据库中的数据读取失败'// resolve(data)regect(err)}, 1000)})p.then(function (value) {console.log(value);}, function (reason) {console.log(reason);})</script>

箭头函数

注意点：

（1）箭头函数没有自己的this对象

this是静态的，this始终指向函数声明时所在作用域下的this的值

（2）不可以当中构造函数

（3）不可以当作arguments对象,该对象在函数体内部不存在

（4）不可以使用yield命令

set

ES6提供了新的数据结构Set(集合)。他类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用，扩展运算符和for…of进行遍历

set的方法：

.size() 可以确定set中元素的个数

.add() 可以往set中添加元素

.delete() 可以删除 set中的元素

.has() 可以判断set中是否包含某元素，返回true或false

.clear() 清除set中所有的内容

let s = new Set();
let s2 = new Set(['大事', '小事', '好事', '坏事', '大事'])//元素个数
console.log(s2.size)
//添加新的元素
s2.add('喜事')
//删除元素
s2.delete('坏事')
//检测
console.log(s2.has('好事'));
//清空
s2.clear()
//遍历
for (let v of s2) {console.log(v);
}

set的应用

1.数组去重

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
//1.数组去重
let reslut = [...new Set(arr)]
console.log(reslut);

2.求交集

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let arr2 = [4, 5, 6, 5, 6]
let reslut = [...new Set(arr)].filter(item => {let s2 = new Set(arr2)if (s2.has(item)) {return true}else {return false}
})console.log(reslut);//简写：
let reslut = [...new Set(arr)].filter(item => new Set(arr2).has(item))
console.log(reslut);

3.并集

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1]
let arr2 = [4, 5, 6, 5, 6]let union=[...new Set([...arr,...arr2])]
console.log(union);

4.差集

let reslut = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))
console.log(reslut);

map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了iterator接口，所以可以使用扩展运算符和for …of…进行遍历。

通俗的来说就是相当于一个升级版的对象，之前的对象的的key咋可以是字符串，map的kay可以是任何类型的值

Map的属性和方法:

size 返回Map的元素个数
set 增加一个新元素，返回更新后Map
delete 删除一个元素，返回更新后的map
get 返回键名对象的键值
has 检测Map中是否包含某个元素，返回boolean值
clear 清空集合，返回undefined

模块化

模功能主要由两个命令构成：export和import

export 命令用于规定模块的对外接口
import 命令用于输入其他模块的提供的功能

export的语法

情况一：分别暴露，在需要暴露的数据的前面加上一个export

export let aaa="暴露的数据"
function find(){console.log("方法")
}

情况二：统一暴露，用对象的简化写法来暴露数据

let aaa="暴露的数据"
function find(){console.log("方法")
}
export {aaa,find}

情况三：默认暴露用export default后面跟上一个数据

export defalut{let aaa="暴露的数据"function find(){console.log("方法")}
}

import的语法

方法一：通用导入模式

//可以使用import * as 别名 from "文件路劲"的方法来引入import
//引入m1.js
import * as m1 from "./src/js/m1.js"

方法二：结构赋值形式

import {school,teach} from "./src/js/m1.js"

迭代器（Iterator）

迭代器是一种接口，为各种不同的数据结构提供统一的访问机制，有这个接口，就可以进行for…of…遍历

es6提供了一种新的遍历方法 for…of…

for…of… 保存的值是键值

for…in… 保存的值是键名

Array,Arguments,Set,Map,String,TypedArray，这些都有iterator接口，都可以使用for…of…遍历

生成器

生成器函数是es6提供的一种新的异步编程解决方案，语法行为和传统函数完全不同

生成器其实是一个特殊的函数

yield相当于函数代码的分隔符

function * gen(){yield '一只没有耳朵'yield '一只没有尾巴'yield '真奇怪'
}//一个next 咋可以调用一块 即一个yield语句
//let  aaa=gen()
//aaa.next()
//aaa.next()
//aaa.next()for(let v of gen()){
console.log(v)
}

es6中还有很多新特性，let,const,解构赋值，模板字符串，symbol数据类型等

ES7新特性

数组方法incloudes

incloudes是一个新增加的验证数组中是否含义某元素的方法，有返回true 没有返回false

于indexOf的区别是 indexOf返回的是一个所在的下标

幂运算 **

console.log(2**10)               //1024
//Math.pow(2,10)的效果是一样的

ES8新特性

async 和await

async 和await两种语法，可以让异步代码像同步代码一样

async函数

async函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定

await表达式

await必须写在async函数中
await右侧的表达式一般为promise对象
await返回的是promise成功的值
await的promise失败了，就会抛出异常，需要通过try…catch捕获处理

function sendAJAX (url) {return x = new Promise((resolve, reject) => {//创建对象const x = new XMLHttpRequest//初始化x.open('GET', url)//发送x.send();//事件绑定x.onreadystatechange = function () { if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {resolve(x.response)} else {reject(x.status)}}}})
}//测试
async function main () {let result = await sendAJAX("https://api.apiopen.top/getJoke")
}
main()

Object.values和Object.entries

Object.values()方法返回的是一个给定对象的所有可以枚举属性值的数组

Object.entries()返回一个给对象自身可遍历属性[key,value]

Object.getOwnPropertyDescriptors

该方法返回指定对象所有自身属性的描述对象

const school = {name: "哈哈哈哈哈",citys: ['北京', '上海', '武汉'],xueke: ['前端', '后端', '测试']
}
//获取对象所有的值
console.log(Object.krys(school));
//获取对象所有的值
console.log(Object.values(school));//entries  返回的是一个数组，且里面的每个对象都是数组
console.log(Object.entries(school));//创建map
console.log(new Map(Object.entries(school)));
//对象属性的描述对象
console.log(Object.getOwnPropertyDescriptors(school));