ES6常问面试题（Promise，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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

箭头函数

注意点：

（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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

set的应用

1.数组去重

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

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
1
2
3
4
5

4.差集

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

map

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

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

Map的属性和方法:

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

模块化

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

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

export的语法

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

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

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

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

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

export defalut{
    let aaa="暴露的数据"
    function find(){
        console.log("方法")
	}
}
1
2
3
4
5
6

import的语法

方法一：通用导入模式

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

方法二：结构赋值形式

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

迭代器（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)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

ES7新特性

数组方法incloudes

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

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

幂运算 **

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

ES8新特性

async 和await

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

async函数

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

await表达式

1. await必须写在async函数中
2. await右侧的表达式一般为promise对象
3. await返回的是promise成功的值
4. 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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17