迭代器
// log
let arr = ['一', '二', '三']
let iter = arr[Symbol.iterator]()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
// log
let args = {
info: 'some country or region',
list: ['china', 'USA', 'china hk'],
}
for (let item of args) {
console.log(item)
}
// log
let args = {
info: 'some country or region',
list: ['china', 'USA', 'china hk'],
[Symbol.iterator]() {
// 索引变量
let index = 0
return {
next: () => {
if (index < this.list.length) {
const result = { value: this.list[index], done: false }
index++
return result
} else {
return { value: undefined, done: true }
}
},
}
},
}
for (let item of args) {
console.log(item)
}
生成器
// log
function* gen() {
console.log('gen')
}
let iterator = gen()
iterator.next()
// log
function* gen() {
console.log('窗前明月光')
yield
console.log('疑是地上霜')
yield
console.log('举头望明月')
yield
console.log('低头思故乡')
yield
}
// 测试next()调用
let iterator = gen()
iterator.next()
iterator.next()
iterator.next()
iterator.next()
// log
function* gen() {
console.log('窗前明月光')
yield 'A'
console.log('疑是地上霜')
yield 'B'
console.log('举头望明月')
yield 'C'
console.log('低头思故乡')
yield 'D'
console.log('完')
}
// 测试next()调用的返回值
let iter = gen()
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
console.log(iter.next())
// log
function* gen(param) {
console.log('窗前明月光' + param)
let a = yield 'A'
console.log('疑是地上霜' + a)
let b = yield 'B'
console.log('举头望明月' + b)
let c = yield 'C'
console.log('低头思故乡' + c)
let d = yield 'D'
}
let iter = gen('param参数')
console.log(iter.next('next参数一'))
console.log(iter.next('next参数二'))
console.log(iter.next('next参数三'))
console.log(iter.next('next参数四'))
生成器与异步
setTimeout(() => {
// log-async
console.log(1)
setTimeout(() => {
// log-async
console.log(2)
setTimeout(() => {
// log-async
console.log(3)
}, 100)
}, 100)
}, 100)
遇到 yield,就要停一下。
function* gen() {
yield one()
yield two()
yield three()
}
function one() {
setTimeout(() => {
// log-async
console.log(1)
}, 100)
}
function two() {
setTimeout(() => {
// log-async
console.log(2)
}, 100)
}
function three() {
setTimeout(() => {
// log-async
console.log(3)
}, 100)
}
let iter = gen()
iter.next()
iter.next()
iter.next()
function* gen() {
let data1 = yield one()
let data2 = yield two()
let data3 = yield three()
// log-async
console.log(data3)
}
let iter = gen()
function one() {
setTimeout(() => {
let data = '用户数据'
// log-async
iter.next(data)
}, 100 * Math.random())
}
function two() {
setTimeout(() => {
let data = '订单信息'
// log-async
iter.next(data)
}, 100 * Math.random())
}
function three() {
setTimeout(() => {
let data = '产品信息'
// log-async
iter.next(data)
}, 100 * Math.random())
}
iter.next()
Promise
封装 Ajax
const p = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.apiopen.top/get')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
p.then(null, (err) => {
// log-async
console.log(err)
})
细节:发出承诺起即new Promise()
后,就开始执行里面的代码了,.then
的作用将回调传进+链式调用。
new Promise((resolve, reject) => {
// log-async
console.log('开始同步了')
setTimeout(() => {
// log-async
console.log('开始异步了')
resolve(0)
}, 100)
})
then 方法返回一个 Promise
如果 then 里面不 return
- 返回之前的 promise
如果 then 里面 return
- return 非 promise:返回之前的 promise
- return promise:返回新的 promise
// log
let p = new Promise((resolve, reject) => {
console.log('开始同步了')
})
let res = p.then()
console.log(res[Symbol.toStringTag])
相关原理见promise 原理
Set