IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JS Iterator 迭代协议 -> 正文阅读

[JavaScript知识库]JS Iterator 迭代协议

一个对象, 默认是不可迭代的

let foo = {
  foo1: 1,
  foo2: 2
}

// 如果使用 of 或 展开运算符迭代 foo   会报错
for (const v of foo) {
  console.log(v)
}
console.log([...foo])

那么, 如何使得 foo 变的可迭代呢?

最基本的不会报错的写法, 给 foo 这个对象添加一个 [Symbol.iterator] 的键, 其值为一个函数, 函数取啥名不重要, 重要的是它会返回一个具有 next 函数的对象

let foo = {
  foo1: 1,
  foo2: 2,
  [Symbol.iterator]: () => {
    return {
      next() {
        return { done: true }
        // return { done: false, value: 'xxx' }
      }
    }
  }
}
console.log([...foo])

这样就不会报错了, 但是打印出来的结果只是一个空数组

如果想打印 foo 的键值呢?

let foo = {
  foo1: 1,
  foo2: 2,
  [Symbol.iterator]: function abandomName() {
    let fooKey = Object.keys(foo)
    return {
      next() {
        if (fooKey.length) {
          return { done: false, value: fooKey.pop() }
        }
        return { done: true }
      }
    }
  }
}
console.log([...foo])

你还可以将 [Symbol.iterator] 对应的函数抽出来

let fooKey = ['foo1', 'foo2']

let iterator = {
  next() {
    if (fooKey.length) {
      return { done: false, value: fooKey.pop() }
    }
    return { done: true }
  }
}

let foo = {
  [Symbol.iterator]() {
    return iterator
  }
}
console.log([...foo])

可以看到, next 用于定制迭代的行为, 如果我想打印 1 ~ 9

let a = 0
const iterator = {
  next() {
    a++
    if (a > 9) {
      return { done: true }
    }
    return { done: false, value: a }
  }
}

const oneToNine = {
  [Symbol.iterator]: () => {
    return iterator
  }
}
console.log([...oneToNine])

我将 iterator 单独抽出来的写法

let a = 0
const iterator = {
  next() {
    a++
    if (a > 9) {
      return { done: true }
    }
    return { done: false, value: a }
  }
}

let iteratorRes = iterator.next()
while(!iteratorRes.done) {
  console.log(iteratorRes.value)
  iteratorRes = iterator.next()
}

迭代协议

for…of

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章           查看所有文章
加:2022-02-06 13:44:20  更:2022-02-06 13:47:17 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:04:39-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码