async / await

async / await

ES7 的语法

          ES6 提出的方案, 但是 ES6 实现的不是很好

          再 ES7 的时候优化过

        目的:

          1. 回调地狱的终极解决办法

          2. 把异步代码写的看起来像同步代码

 

使用方法:

        1. async 书写再函数的前面, 是对这个函数的修饰关键字

        2. await 的使用, 必须有 async 关键字, await 才可以再函数内部使用

        3. await 等待的必须是一个 promise 对象, 才会有等待的结果, 不然没有意义

        当你满足了以上三个条件以后, 你的 promise 对象本该再 then 里面接收的结果

          就可以直接定义变量接收

          你的 promise 里面的异步代码没有结束之前

          不会继续向下执行

 //fn 是一个异步函数
 async function fn() {
// await 关键字, 这个函数必须要有 async
 const res = await pAjax({ url: './server/a.php', dataType: 'json' })
// 当 pAjax 发送的请求没有回来之前, res 不会被赋值
// 只有请求回来以后, res 才会被赋值
// 如果这段打印先于请求回来执行, res 没有结果
// 如果 res 有结果, 证明: 这段代码被延后执行了, 延后到后面的 promise 对象完成以后
 console.log(res)
 console.log('后续代码')
 }
 fn()
 async function fn() {
 const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })
 console.log('需求1: ', res1)
 const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 })
 console.log('需求2: ', res2)

 const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 })
 console.log('需求3: ', res3)
}
console.log('start')
fn()
console.log('end')
 const div = document.querySelector('div')
 div.addEventListener('click', async () => {
 const res1 = await pAjax({ url: './server/a.php', dataType: 'json' })
 console.log('需求1: ', res1)

 const res2 = await pAjax({ url: './server/b.php', dataType: 'json', data: res1 })
 console.log('需求2: ', res2)

 const res3 = await pAjax({ url: './server/c.php', dataType: 'json', data: res2 })
 console.log('需求3: ', res3)
 })

generator 函数

        一种长得很像函数的玩意

        但是不是函数, 函数生成器(迭代器)

使用方法:

        再定义函数的时候,  再 function 后面 或者 函数名前面加一个 星号(*)

        函数内部可以使用一个 yield 关键字

          类似于 return 一样的作用

          可以给你制造一个结果

          让这个 generator 暂停

          当你再次回到这个 generator 的时候, 从上次 yield 继续向后执行代码

        generator 的返回值是一个迭代器

          包含一个 next() 方法

          每一次 next 执行, 就会执行到下一个 yield 位置为止

 // 当有了星号以后, fn 不再是一个函数了
 function* fn() {
 console.log('我是第一段 代码')
 yield '第一段结束'
 console.log('我是第二段 代码')
 yield '第二段结束'
 console.log('我是第三段 代码')
 return '第三段结束'
 }
 // result 就是 fn 给生成一个 迭代器
 const result = fn()
 // 第一次, 从 fn 的开头执行到第一个 yield,
 // 把 yield 后面的东西当作返回值
 const first = result.next()
 console.log(first)
// 第二次, 从第一次的 yield 后面开始执行到第二个 yield 结束
// 把 第二个 yield 后面的东西当作返回值
 const second = result.next()
 console.log(second)
 const third = result.next()
 console.log(third)

for ... of 循环

        for () { } 遍历数组

        forEach() 遍历数组

        for ... of 循环, 可以遍历数组

        目的: 遍历迭代器

          遍历数组, 只是顺手

        迭代器不光是 generator

使用方法:  for (let value of 数组) {}

const arr = ['hello', 'world', '你好', '世界']
 const obj = { name: 'jack' }
 for (let key in arr) {
 console.log(key, arr[key])
 }
 for (let value of arr) {
 console.log(value)
 }

 Set 数据结构

        ES6 新增的数据结构

        迭代起结构的数据

        使用方法: new Set()

          可以再实例化的时候, 传递一个数组

          数组里面的每一个数据就是 set 数据类型的每一个数据

        特点: 不接受重复数据

          用它可以去重

        常用方法

          1. add()

            使用方法: set数据类型.add(要添加的数据)

 const s = new Set(['hello', 'world', '你好', '世界'])
 // 1. 添加
 s.add(true)

          2. delete()

            使用方法: set数据类型.delete(要删除的数据)

const s = new Set(['hello', 'world', '你好', '世界'])
 // 2. 删除
s.delete('世界')

          3. has()

            使用方法: set数据类型.has(你要判断的数据)

            返回值: 你要判断的数据是不是存在

const s = new Set(['hello', 'world', '你好', '世界'])
 // 3. 判断
console.log(s.has('你好'))

          4. clear()

            使用方法: set数据类型.clear()

            清除所有数据

          5. forEach()

            语法: set数据类型.forEach(function (item, item, set) {})

  s.forEach(function (item, t, set) {

      console.log(item, '-----', t, '-----', set)

    })

          6. for of 循环来遍历

// 6. for of 循环来遍历
for (let value of s) {
 console.log(value)
 }

          7. size 属性

            表示长度, Set 数据结构里面有多少数据

  console.log(s.size)

    console.log(s.length)

去重

  const arr = [1, 2, 3, 4, 5, 4, 3, 2, 3, 4, 5, 2, 1]

    const res = [...new Set(arr)]

    console.log(res)