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

返回之前的 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])

Symbol.toStringTag

巴特西

ES6语法笔记

迭代器

生成器

生成器与异步

Promise

Set

最新文章

热门文章