携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情
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)
