title: ES6

categories: Javascript
tag: JS
date: 2021-11-10 15:45:34

ES6

ES6 新特性

  • let 和 const,命令
  • es6 的模板字符串
  • 增强的函数
  • 扩展的字符串,对象。数组功能
  • 解构赋值
  • Symblo
  • Map 和 Set
  • 迭代器和生成器
  • Promise 对象
  • Proxy 对象
  • async 的用法
  • 类 class
  • 模块化实现

强大的 babel

  • 被称为下一代的 JS 编译器,可以将 es6 的代码转换成 es5 的代码,从而让浏览器获得支持
  • 只需要知道前端工具这个 babel 这个工具的作用。

var,let,const

var 会有变量提升

  1. console.log(a) //undefined
  2. var a

let

  1. let 没有变量提升
  2. 是一个块级作用域
  3. 不能重复声明

const

const 与 let 类似,但是 const 声明常量,一旦被声明,无法修改。

  1. const person = {
  2. name: 'andy'
  3. }
  4. person.name = 'alex' //可以
  5. person = {
  6. age: 18
  7. } //不可以
  8. console.log(person)

let 作用

作用 1:

  1. var arr = []
  2. for (var i = 0; i < 10; i++) {
  3. arr[i] = function () {
  4. return i
  5. }
  6. }
  7. console.log(arr[5]()) //10
  8. //相当于以下
  9. var arr = []
  10. var i
  11. for (i = 0; i < 10; i++) {
  12. //当函数调用的时候。i已经为10了
  13. arr[i] = function () {
  14. return i
  15. }
  16. }
  17. console.log(arr[5]()) //10

当用 let 的时候

  1. var arr = []
  2. for (let i = 0; i < 10; i++) {
  3. //当函数调用的时候。i已经为10了
  4. arr[i] = function () {
  5. return i
  6. }
  7. }
  8. console.log(arr[5]()) //5

作用 2:

  1. // 不会污染全局变量
  2. let RegExp = 10
  3. console.log(RegExp)
  4. console.log(window.RegExp)

模板字符串

模板字符串使用 tab 键上面的反引号``,插入变量时使用${变量名}

  1. <div class="box"></div>
  1. <script>
  2. const box = document.querySelector('.box')
  3. const id = 1,
  4. name = '董欢'
  5. box.innerHTML = `<ul>
  6. <li>
  7. <p id=${id}>${name}</p>
  8. </li>
  9. </ul>`
  10. </script>

强大的函数

函数默认参数

  1. // es5写法
  2. function add(a, b) {
  3. a = a || 10
  4. b = b || 20
  5. return a + b
  6. }
  7. console.log(add())
  8. // ES6写法
  9. function add(a = 10, b = 20) {
  10. return a + b
  11. }
  12. console.log(add())

默认参数也可以是表达式

  1. function add(a = 10, b = getValue(5)) {
  2. return a + b
  3. }
  4. function getValue(val) {
  5. return val + 10
  6. }
  7. console.log(add())

…运算符

1. 函数剩余参数,将多个独立的参数合并到一个数组中

  1. // es5写法
  2. // arguments表示实参
  3. function pick(obj) {
  4. let result = Object.create(null)
  5. for (let i = 1; i < arguments.length; i++) {
  6. result[arguments[i]] = obj[arguments[i]]
  7. // console.log(arguments[i])
  8. }
  9. return result
  10. }
  11. let bookData = pick(book, 'title', 'year')
  12. console.log(bookData)

es6 写法

  1. //剩余参数:由三个点...和一个紧跟着的具名参数指定 ...keys
  2. let book = {
  3. title: 'es6教程',
  4. author: '董欢',
  5. year: 2021
  6. }
  7. // ...keys解决了arguments的问题
  8. function pick(obj, ...keys) {
  9. console.log(keys)
  10. let result = {}
  11. for (let i = 0; i < keys.length; i++) {
  12. result[keys[i]] = obj[keys[i]]
  13. }
  14. return result
  15. }
  16. let bookData = pick(book, 'title', 'year')
  17. console.log(bookData)

2. 扩展运算符,将一个数组风格,并将各个项作为分离的参数传给函数

  1. //处理数组中的最大值
  2. // es5
  3. const arr = [10, 20, 30, 40]
  4. const result = Math.max.apply(Math, arr)
  5. console.log(result)

es6 写法

  1. //es6
  2. const arr = [10, 20, 30, 40]
  3. const result = Math.max(...arr)
  4. console.log(result)

箭头函数

  1. // 使用=>来定义 function(){}等价于()=>{}
  2. //es5
  3. let add = function (a, b) {
  4. return a + b
  5. }
  6. console.log(add(10, 20))

es6 的写法

  1. //es6
  2. let add = (a, b) => {
  3. return a + b
  4. }
  5. let add = (a, b) => a + b
  6. console.log(add(10, 20))

箭头函数的 this 指向

  1. //es5中的this指向:取决于调用该函数的上下文对象
  2. let page = {
  3. id: 123,
  4. init: function () {
  5. document.addEventListener(
  6. 'click',
  7. function (event) {
  8. console.log(this)
  9. this.doSomeThings(event.type)
  10. }.bind(this)
  11. )
  12. },
  13. doSomeThings: function (type) {
  14. console.log(`事件类型是:${type}`)
  15. }
  16. }
  17. page.init()

在 es6 中

  1. //es6,箭头函数没有this指向,箭头函数的内部this只能通过查找作用域链
  2. let page = {
  3. id: 123,
  4. //这里不可以改为箭头函数,因为如果改为了箭头函数,this就指向了window
  5. //一旦使用箭头函数,当前就不存在作用域,就没有作用域链了
  6. init: function () {
  7. document.addEventListener('click', (event) => {
  8. console.log(this) //page
  9. this.doSomeThings(event.type)
  10. })
  11. },
  12. doSomeThings: function (type) {
  13. console.log(`事件类型是:${type}`)
  14. }
  15. }
  16. page.init()

使用箭头函数注意事项

  1. 使用箭头函数,函数内部没有arguments
  2. 箭头函数不能使用new来实例化对象

解构赋值

解构赋值是对赋值运算符的一种扩展。它针对数组和对象进行操作。

优点:代码书写上简洁易读

es5

  1. let node = {
  2. type: 'iden',
  3. name: 'foo'
  4. }
  5. // es5写法
  6. let type = node.type
  7. let name = node.name

es6 写法

  1. //es6写法
  2. let node = {
  3. type: 'iden',
  4. name: 'foo'
  5. }
  6. let { type, name } = node
  7. console.log(type, name)

解构命名

  1. //把a解构出来然后命令为res
  2. let { a: res } = obj
  3. console.log(res)

剩余运算符

  1. // 用剩余运算符 把数组解构出来放在一个对象中,
  2. let { a, ...res } = obj
  3. console.log(res)

对数组解构

  1. let arr = [1, 2, 3]
  2. let [a, b] = arr
  3. console.log(a, b) //1,2

可嵌套

  1. let arr = [1, 2, 3]
  2. // let [a, b] = arr
  3. let [a, b, c] = [1, 2, 3]
  4. console.log(a, b, c) //1,2

扩展的对象功能

1. 对象返回

es5 写法

  1. const name = '董欢',
  2. age = 12
  3. const person = {
  4. name: name,
  5. age: age,
  6. sayName: function () {}
  7. }

es6 写法,当变量和值相等时,可以省略,函数也可以简写

  1. const name = '董欢',
  2. age = 12
  3. const person = {
  4. name,
  5. age,
  6. sayName() {}
  7. }
  1. function fn(x, y) {
  2. return { x, y }
  3. }

2. set 和 get

  1. let cart = {
  2. wheel: 4,
  3. set(val) {
  4. if (val < this.wheel) {
  5. throw new Error('轮子数太少了')
  6. }
  7. this.wheel = val
  8. },
  9. get() {
  10. return this.wheel
  11. }
  12. }
  13. cart.set(3)
  14. console.log(cart.get()) //6

3. 属性和方法可以组合

  1. const obj = {}
  2. obj.isShow = true
  3. const name = 'a'
  4. obj[name + 'bc'] = 123
  5. obj['f' + 'bc'] = function () {
  6. console.log(this)
  7. }
  8. console.log(obj) //{ isShow: true, abc: 123, fbc: [Function] }

4. 对象的方法

  1. is()===

比较两个值 是否严格相等。

  1. console.log(NaN === NaN) //false
  2. console.log(Object.is(NaN, NaN)) //true
  3. console.log(Object.is(+0, -0)) //false
  1. Object.assign
  1. //对象的合并 //浅拷贝
  2. // Object.assign(target, obj1, obj2)
  3. const newObject = Object.assign({}, { a: 1 }, { b: 2 })
  4. console.log(newObject) //{ a: 1, b: 2 }

Symbol 一种新的数据类型

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

  1. // 用来定义对象的私有变量
  2. const name = Symbol('name')
  3. const name2 = Symbol('name')
  4. console.log(name === name2) //false
  5. let s1 = Symbol('s1')
  6. console.log(s1) //Symbol(s1)
  7. //取值时用[]
  8. let obj = {}
  9. obj[s1] = '董欢'
  10. console.log(obj) //{ [Symbol(s1)]: '董欢' }

Set 和 Map 数据结构

1. Set 是集合,表示无重复值的有序列表

  1. //添加元素
  2. set.add(2)
  3. set.add('s')
  4. set.add([1, 2, 3])
  5. console.log(set) //Set { 2, 's', [ 1, 2, 3 ] }
  6. //删除元素
  7. set.delete(2) //Set { 's', [ 1, 2, 3 ] }
  8. // 校验是否存在
  9. console.log(set.has('s')) //true
  10. // set的长度
  11. console.log(set.size) //2

1 set 的遍历.由于 set 中键和值是一样的,所以用 forEach 遍历毫无意义。

  1. //set遍历
  2. set.forEach((v, k) => {
  3. console.log(v, k)
  4. })
  5. /**
  6. * 输出:
  7. s s
  8. [ 1, 2, 3 ] [ 1, 2, 3 ]
  9. */
  1. //会去重
  2. let set = new Set([1, 2, 3, 4, 4, 3])
  3. console.log(set) //Set { 1, 2, 3, 4 }
  4. // set转换为数组
  5. let arr = [...set]
  6. console.log(arr) //[ 1, 2, 3, 4 ]

2 set 中的对象的引用无法被释放

在我们给对象释放的时候,通常是给对象 null。但是在 set 中对象无法释放

如果我们使用 WeakSet()

  1. let set = new WeakSet()
  • 不能传入非对象类型的参数
  • 不可迭代
  • 没有 forEach()
  • 没有 size 属性

所以 WeakSet 很少用

2. Map

  1. let map = new Map()
  2. //添加值
  3. map.set('name', '张三')
  4. // 获取值
  5. map.set('age', 20)
  6. console.log(map) //Map { 'name' => '张三', 'age' => 20 }
  7. // 校验是否存在
  8. map.has('name')
  9. // 删除值
  10. map.delete('name')
  11. console.log(map) //Map { 'age' => 20 }
  12. //直接清除
  13. map.clear()
  14. console.log(map) //Map {}
  15. //用set初始化
  16. map.set(['a', [1, 2, 3]], 'hello')
  17. console.log(map) //Map { [ 'a', [ 1, 2, 3 ] ] => 'hello' }
  18. // 直接初始化
  19. let map = new Map([
  20. ['a', 2],
  21. ['b', 3]
  22. ])
  23. console.log(map) //Map { 'a' => 2, 'b' => 3 }

与 Set 一样,也是无法被释放,也有 WeakMap

数组扩展用法

1 from().转换为数组

  1. //数组的方法from()
  2. function add() {
  3. console.log(arguments)
  4. //es5做法
  5. let arr1 = [].slice.call(arguments)
  6. console.log(arr1) //[1,2,3]
  7. //es6
  8. // 通过from()
  9. let arr2 = Array.from(arguments)
  10. console.log(arr2) ////[1,2,3]
  11. // 通过扩展运算符转换为数组
  12. console.log([...arguments]) //[1, 2, 3]
  13. }
  14. add(1, 2, 3)
  1. // from还可以对每个元素进行处理
  2. let liContent = Array.from(lis, (ele) => ele.textContent)

2 of()转换为数组

  1. // of()将任意的数据类型,转换为数组
  2. let res = Array.of(3, 11, 20, '30', {
  3. id: 1
  4. })
  5. console.log(res) // [3, 11, 20, '30', {…}]

3 copyWithin()

  1. //将从索引为3开始后面的数赋值给以0开始的数字
  2. let res = [1, 2, 3, 8, 9, 10].copyWithin(0, 3) //[8, 9, 10, 8, 9, 10]
  3. console.log(res)

4 find()和 findIndex()

  1. //找出第一个符合条件的数组成员
  2. let res = [1, 2, 3, 4, -2, 6, 8].find((n) => {
  3. return n < 0
  4. })
  5. //找出第一个符合条件的数组成员索引
  6. let resIndex = [1, 2, 3, 4, -2, 6, 8].findIndex((n) => {
  7. return n < 0
  8. })
  9. console.log(res, resIndex) //-2 4

5 entries() keys() values()

  1. let resIndex = ['a', 'b'].keys()
  2. let resValue = ['a', 'b'].values()
  3. let resEntries = ['a', 'b'].entries()
  4. console.log(resIndex) //Array Iterator {}
  5. // 对键名的遍历
  6. for (let index of resIndex) {
  7. console.log(index) //0,1
  8. }
  9. // 对值的遍历
  10. for (let value of resValue) {
  11. console.log(value) //a,b
  12. }
  13. // 对键值对的遍历
  14. for (let [index, ele] of resEntries) {
  15. console.log(index, ele) //a,b
  16. /*
  17. 0 'a'
  18. 1 'b'
  19. */
  20. }

entries 的另外用法

  1. let letter = ['a', 'b', 'c']
  2. let it = letter.entries()
  3. console.log(it.next().value) //[0, 'a']
  4. console.log(it.next().value) //[1, 'b']
  5. console.log(it.next().value) //[2, 'c']

6 includes()

Includes()返回一个布尔值,表示某个数组是否包含给定的值

  1. //之前我们判断是否存在这个值,用的是indexOf()
  2. let arr = [1, 2, 3]
  3. console.log(arr.indexOf(2))
  4. // 现在可以用includes()
  5. console.log(arr.includes(2)) //true

ES6 的迭代器 Iterator

Iterator

JavaScript 原有的表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了MapSet。这样就有了四种数据集合,用户还可以组合使用它们,定义自己的数据结构,比如数组的成员是MapMap的成员是对象。这样就需要一种统一的接口机制,来处理所有不同的数据结构。

遍历器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。

Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环,Iterator 接口主要供for...of消费。

Iterator 的遍历过程是这样的。

(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。

(2)第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。

(3)第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。

(4)不断调用指针对象的next方法,直到它指向数据结构的结束位置。

每一次调用next方法,都会返回数据结构的当前成员的信息。具体来说,就是返回一个包含valuedone两个属性的对象。其中,value属性是当前成员的值,done属性是一个布尔值,表示遍历是否结束。

  1. //使用迭代
  2. const items = ['one', 'two', 'three']
  3. //创建新的迭代器
  4. const it = items[Symbol.iterator]()
  5. //第一次遍历{value: 'one', done: false}
  6. // false表示还没有遍历完成
  7. console.log(it.next())

ES6 的生成器 Generator

1. 生成器的作用

generator 函数可以通过 yield 关键字,将函数挂起,为了改变执行流提供可能。同时为了做异步编程也提供了方案。

2. 与普通函数的区别

  1. function 后面,函数名有个*
  2. 只能在函数内部使用yield,让函数挂起
  1. function* func(a) {
  2. //挂载2
  3. yield 2
  4. }
  5. let res = func()
  6. console.log(res.next()) //{value: 2, done: false}
  7. console.log(res.next()) //{value: undefined, done: true}

3. 总结

generator 函数是分段执行的,yield 语句是暂停执行的,而 next()恢复执行。一个 next 对应一个 yield。

  1. function* add() {
  2. console.log('start')
  3. // 这个x不是yield 2的返回值,他是next()调用,恢复当前yield()执行传入的实参
  4. let x = yield '2'
  5. console.log('one:' + x) //此时是one:undefined
  6. let y = yield '3'
  7. console.log('two' + y) //此时是two:undefined
  8. return x + y //{value: 50, done: true}
  9. }
  10. const fn = add()
  11. console.log(fn.next())
  12. console.log(fn.next(20)) //此时是one:20
  13. console.log(fn.next(30)) //此时two:30

4. 使用场景

为不具备 Interator 接口的对象提供了遍历操作。

  1. function* objectEntries(obj) {
  2. const propKeys = Object.keys(obj)
  3. for (const propKey of propKeys) {
  4. yield [propKey, obj[propKey]]
  5. }
  6. }
  7. const obj = {
  8. name: '董欢',
  9. age: 18
  10. }
  11. obj[Symbol.iterator] = objectEntries
  12. console.log(obj)
  13. for (let [key, value] of objectEntries(obj)) {
  14. console.log(`${key},${value}`)
  15. }
  16. /*
  17. 输出:
  18. name,董欢
  19. age,18
  20. */

5 Generator 的应用

  1. 部署 ajax,异步代码同步化

解决回调地狱,处理异步操作

  1. function* main() {
  2. //这个res不是request请求的结果
  3. let res = yield request('请求的url')
  4. console.log(res) //这个res就是请求返回的res
  5. //执行后面的操作
  6. console.log('数据请求完成,可以继续操作')
  7. }
  8. const ite = main()
  9. ite.next()
  10. function request(url) {
  11. $.ajax({
  12. url,
  13. method: 'get',
  14. success(res) {}
  15. })
  16. }

加载 loading…页面=>数据加载完成=>loading 关闭

  1. function loadUI() {
  2. console.log('加载loading页面')
  3. }
  4. function showData() {
  5. // 模拟异步操作
  6. setTimeout(() => {
  7. console.log('数据加载完成')
  8. }, 1000)
  9. }
  10. function hideUI() {
  11. console.log('隐藏loading页面')
  12. }
  13. loadUI()
  14. showData()
  15. hideUI()
  16. /*
  17. 加载loading页面
  18. 生成器.html:97 隐藏loading页面
  19. 生成器.html:92 数据加载完成
  20. */

所以通过生成器

  1. function* load() {
  2. loadUI()
  3. yield showData()
  4. hideUI()
  5. }
  6. let itLoad = load()
  7. itLoad.next()
  8. function loadUI() {
  9. console.log('加载loading页面')
  10. }
  11. function showData() {
  12. // 模拟异步操作
  13. setTimeout(() => {
  14. console.log('数据加载完成')
  15. itLoad.next()
  16. }, 1000)
  17. }
  18. function hideUI() {
  19. console.log('隐藏loading页面')
  20. }
  21. /*
  22. 加载loading页面
  23. 生成器.html:92 数据加载完成
  24. 生成器.html:98 隐藏loading页面
  25. */

Promise 的基本使用

1 Promise 介绍

相当于一个容器,保存着未来才会结束的事件(异步操作)的一个结果

各种异步操作都可以用同样的方法进行处理 例如 axios。

2 Promise 状态

Promise 对象的状态不受外界影响。处理异步操作有 3 个状态。

Pending(进行)、fulfilled(成功)、Reject(失败)

这三个状态一旦改变之后就不会再改变,任何时候得到这个结果

3 Promise 处理异步

  1. let pro = new Promise(function (resolve, reject) {
  2. //执行异步操作
  3. let res = {
  4. code: 201,
  5. data: {
  6. name: '董欢'
  7. },
  8. error: '失败'
  9. }
  10. setTimeout(() => {
  11. if (res.code === 200) {
  12. resolve(res.data)
  13. } else {
  14. reject(res.error)
  15. }
  16. }, 1000)
  17. })
  18. console.log(pro)
  19. pro
  20. .then((success) => {
  21. console.log(success)
  22. })
  23. .catch((err) => {
  24. console.log(err)
  25. })

Promise 的应用

1 Promise 封装 ajax

then()方法第一个参数是resolved回调函数,第二个参数是可选的

  1. const getJSON = function (url) {
  2. return new Promise((resolve, reject) => {
  3. const xhr = new XMLHttpRequest()
  4. xhr.open('GET', url)
  5. xhr.onreadystatechange = handler
  6. xhr.responseType = 'json'
  7. xhr.setRequestHeader('Accept', 'application/json')
  8. //发送
  9. xhr.send()
  10. function handler() {
  11. // console.log(this.readyState) //2,3,4
  12. if (this.readyState == 4) {
  13. if (tis.status === 200) {
  14. resolve(this.response)
  15. } else {
  16. reject(new Error(this.status))
  17. }
  18. }
  19. }
  20. })
  21. }
  22. getJSON('url')
  23. .then((val) => {
  24. console.log(val)
  25. })
  26. .catch((err) => {
  27. console.log(err)
  28. })

4 Promise 其他方法

1 Promise.resolve()

能将现有的任何对象转换为 promise 对象

  1. let p = Promise.resolve('foo')
  2. p.then((data) => {
  3. console.log(data)
  4. })
  5. let q = new Promise((resolve) => resolve('foo'))
  6. q.then((data) => {
  7. console.log(data)
  8. })

2 Promise.all()

**Promise.all()**方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

  1. let promise1 = new Promise((resolve, reject) => {})
  2. let promise2 = new Promise((resolve, reject) => {})
  3. let promise3 = new Promise((resolve, reject) => {})
  4. let p4 = Promise.all([promise1, promise2, promise3])
  5. p4.then(() => {
  6. // 三个都成功才成功
  7. }).catch((err) => {
  8. // 有一个失败就都失败
  9. })

应用:一些游戏类的素材比较多,等待图片,flash,静态资源都加载完成,然后才进行页面的初始化

3 Promise.race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

给某个异步请求设置超时时间,并且在超时后执行相应的操作。

  1. //请求图片资源
  2. function requestImg(imgSrc) {
  3. return new Promise((resolve, reject) => {
  4. const img = new Image()
  5. img.onload = function () {
  6. resolve(img)
  7. }
  8. img.src = imgSrc
  9. })
  10. }
  11. function timeout() {
  12. return new Promise((resolve, reject) => {
  13. setTimeout(() => {
  14. reject('图片请求超时')
  15. }, 3000)
  16. })
  17. }
  18. Promise.race([
  19. requestImg(
  20. 'https://img0.baidu.com/it/u=2510891666,2454567058&fm=26&fmt=auto',
  21. timeout()
  22. )
  23. ])
  24. .then((res) => {
  25. console.log(res)
  26. document.body.appendChild = res
  27. })
  28. .catch((err) => {
  29. console.log(err)
  30. })

async 用法

1 async 介绍

  1. async:使得异步操作更加方便
  2. 会返回 Promise 对象 then catch
  3. async 是 generator 的语法糖
  1. async function f() {
  2. //如果async函数里面有多个await,那么then函数会等待所有的await指令运行完的结果才去执行
  3. let s = await 'hello async'
  4. let data = await s.split('')
  5. return data
  6. }
  7. f()
  8. .then((v) => console.log(v))
  9. .catch((e) => console.log(e))

只要有一个 reject,就不会向下执行

  1. async function f2() {
  2. //只要有一个reject,就不会向下执行
  3. await Promise.reject('出错了')
  4. await Promise.resolve('hello')
  5. }
  6. f2()
  7. .then((v) => console.log(v))
  8. .catch((e) => console.log(e))

为了解决这个问题。我们希望如果出错了,继续往下执行。我们使用try{} catch

  1. async function f2() {
  2. //只要有一个reject,就不会向下执行
  3. // 使用try{}catch,如果出错了在这里处理错误。
  4. try {
  5. await Promise.reject('出错了')
  6. } catch (error) {
  7. console.log(error)
  8. }
  9. return await Promise.resolve('hello')
  10. }
  11. f2()
  12. .then((v) => console.log(v))
  13. .catch((e) => console.log(e))

2 async 使用

  1. async function getNowWeather(url) {
  2. // 发送ajax,获取实况天气
  3. let res = await getJSON(url)
  4. console.log(res)
  5. //获取数据 未来3-7天
  6. let arr = await res.HeWeather6
  7. return arr[0].now
  8. }
  9. getNowWeather('url').then((now) => console.log(now))

3 async 的作用

  1. 解决回调地狱,使得异步操作更加方便。

Class 类在 JS 高级章节已经介绍过了。

ES6 的模块化

es6 模块功能主要由两个命令构成exportimport

ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。