JavaScript 原有的表示 “集合 ”的数据结构主要是数组( Array )和对象( Object), ES6 又添加了 Map 和 Set。 这样就有了 4 种数据集合,用户还可以组合使用它们,定义自己的数据结 构,比如数组的成员是 Map, Map 的成员是对象 。 这样就需要一种统一 的接口机制来处理所有 不同的数据结构 。

遍历器( Iterator )就是这样一种机制 。它是一种接口,为各种不同的数据结构提供统一 的 访问机制。任何数据结构,只要部署 Iterator 接口,就可以完成遍历操作(即依次处理该数据结 构的所有成员) 。

Iterator 的作用有 3 个: 一是为各种数据结构提供一个统一的、简便的访问接口; 二是使得 数据结构的成员能够按某种次序排列; 三是 ES6 创造了 一种新的遍历命令一-for . . . of 循环, Iterator 接口 主要供 for … of 消费。

遍历 数组,对象,Map,Set 的推荐方法

全用 for ... of ,和其它遍历方式相比,for…of 的优势主要有以下几方面。

https://raw.githubusercontent.com/happyCoding1024/image-hosting/master/img/20221025112017.png

数组

const arr = [1, 2, 3];

for(let value of arr) {
  console.log('arr\n', value);
}

https://static.sucaidaohang.com/scStatic/c5fb138d-53af-4a67-b931-c9289110f9b7.png

对象

对象不能直接用 for...of ,因为没有部署 Iterator 接口,使用 for...in 还是可以的,但是 for...in 有下面的一些缺点。

https://static.sucaidaohang.com/scStatic/1cbeb7c6-1814-4741-933a-30cf9434a08d.png

所以我们还是使用 for...of 更好一些,我们可以使用 Object.keys(obj), Object.values(obj), Object.entries(obj) 转换成数组然后再使用 for...of

const obj = {
  '1': 1,
  '2': 2,
  '3': 3
}

for (let [key, value] of Object.entries(obj)) {
  console.log('obj\n', value);
}

https://static.sucaidaohang.com/scStatic/4fa4260c-58e0-4b3b-b5ba-8543b0e8b93d.png

Set

天然具备 Iterator 接口可直接使用 for...of

const set = new Set([1, 2, 3]);

for (let value of set) {
  console.log('set\n', value);
}

https://static.sucaidaohang.com/scStatic/9e8edae3-091e-4d35-ab64-0f2d38d0a5bc.png

Map

天然具备 Iterator 接口可直接使用 for...of

const map = new Map();
map.set('1', 1);
map.set('2', 2);
map.set('3', 3);

for (let [key, value] of map) {
  console.log('map\n', value);
}

https://static.sucaidaohang.com/scStatic/ed1d1d68-de92-4055-8b94-fbd54bd2864d.png

原文地址:http://www.cnblogs.com/zhangguicheng/p/16824362.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性