ES6语法笔记

迭代器

// 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

1. 返回之前的 promise

如果 then 里面 return

1. return 非 promise：返回之前的 promise
2. return promise：返回新的 promise

// log
let p = new Promise((resolve, reject) => {
  console.log('开始同步了')
})
let res = p.then()
console.log(res[Symbol.toStringTag])

Symbol.toStringTag

相关原理见promise 原理

Set