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)箭头函数没有自己的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的属性和方法:
  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("方法")
}

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

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函数
  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()

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
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值