当前位置: 首页 > 编程笔记 >

ES6新特性二:Iterator(遍历器)和for-of循环详解

法弘壮
2023-03-14
本文向大家介绍ES6新特性二:Iterator(遍历器)和for-of循环详解,包括了ES6新特性二:Iterator(遍历器)和for-of循环详解的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了ES6新特性之Iterator(遍历器)和for-of循环。分享给大家供大家参考,具体如下:

1. 遍历数组

for-of工作原理:迭代器有一个next方法,for循环会不断调用这个iterator.next方法来获取下一个值,直到返回值中的 done属性为true的时候结束循环。

① 在ES6之前

var arr = [1,2,3,4,5,6];
arr.name = 'a';
for (var index = 0; index < arr.length; index++) {
  console.log(arr[index]);
}
arr.forEach(function (value) { //ES5 内建的forEach方法 缺陷:无法使用break 中断 ,也不能使用return 语句返回到外层函数
  console.log(value);
});

结果都是:1,2,3,4,5,6

② 用 for-in :作用于数组的 forfor -in 循环体除了遍历数组元素外,还会遍历自定义属性。比如数组有一个可枚举属性arr.a,循环将额外执行一次

for (var index in arr) { // 千万别这样做
 console.log(arr[index]);
}

结果:1,2,3,4,5,6,a

for-in 是为普通对象设计的,赋值给index的值不是实际的数字1、2,而是字符串‘1',‘2'

var b = 0;
for (var index in arr) {
 b = b+ index;
 console.log(b)
}

结果:00,001,0012,00123,001234,0012345,0012345name

③ 使用 for-of:避开了for-in 的所有缺陷,可以正确响应 break、return 语句

for(var value of arr){
  console.log(value)
}

结果:1,2,3,4,5,6

2.for-of 循环便利其他集合

① 遍历Set

var words = 'a';
var s = new Set();
s.add("a");
s.add(1);
for(var word of s){
  console.log(word);
}

结果:a,1

② 遍历Map

var map = new Map();
map.set('a',1);
map.set('b',2);
map.set('c',3);
map.set('d',4);
for(var [key,value] of map){
  console.log(key+':'+value);
}

结果:a:1,b:2,c:3,d:4

3. Iterator(遍历器)

① 遍历器(Iterator)是一种接口规格,任何对象只要部署这个接口,就可以完成遍历操作。它的作用有两个,一是为各种数据结构,提供一个统一的、简便的接口,二是使得对象的属性能够按某种次序排列。

② 遍历器的原理:遍历器提供了一个指针,指向当前对象的某个属性,使用next方法,就可以将指针移动到下一个属性。next方法返回一个包含value和done两个属性的对象。其中,value属性是当前遍历位置的值,done属性是一个布尔值,表示遍历是否结束。

//模拟遍历器原理
function makeIterator(array){
  var nextIndex = 0;
  return {
    next: function(){
      return nextIndex < array.length ?
        {value: array[nextIndex++], done: false} :
        {value: undefined, done: true};
    }
  }
}
var it = makeIterator(['a', 'b']);
console.log(it.next());//{ value: 'a', done: false }
console.log(it.next());//{ value: 'b', done: false }
console.log(it.next());//{ value: undefined, done: true }

③ Iterator接口返回的遍历器,原生具备next方法。

> 有三类数据结构原生具备Iterator接口:数组、类似数组的对象、Set和Map结构。

var map = new Map();
console.log(map[Symbol.iterator] === map.entries)//true
var arr = new Array();
console.log(arr[Symbol.iterator] === arr.values)//true
var set = new Set();
console.log(set[Symbol.iterator] === set.values)//true

> 其他数据结构(主要是对象)如果需要Iterator接口,都需要自己部署。

var students = {}
students[Symbol.iterator] = function() {
 let index = 1;
 return {
  next() {
   return {done: index>10, value: index++}
  }
 }
}
for(var i of students) {
 console.log(i);
}//

希望本文所述对大家ECMAScript程序设计有所帮助。

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

  • 本文向大家介绍ES6 Iterator接口和for...of循环用法分析,包括了ES6 Iterator接口和for...of循环用法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了ES6 Iterator接口和for...of循环用法。分享给大家供大家参考,具体如下: 运行结果: for...of循环,就是不断的调用Iterator接口。 object数据结构没有实现Iterator

  • 问题内容: 以下是提供输出的代码段:。由于访问列表中的数字3,我期望获得输出。在线给出的解释是“每次迭代中更改的价值”,但我不太了解如何或为什么。任何解释都很好! 问题答案: 这里发生的是一个列表在循环过程中发生了变异。 让我们考虑以下代码片段: 输出为: 每次迭代: 从内部指针当前指向的位置读取值 立即将其分配给列表中的最后一个元素 在最后一个元素打印在标准输出上之后 就像这样: 内部指针指向第

  • for循环用于迭代迭代而不是对象文字。 以下是'for ... of'循环的语法。 for (variablename of object) { statement or block to execute } 例子 (Example) for (let val of[12 , 13 , 123]) { console.log(val) } 成功执行上述代码后,将显

  • 问题内容: 以下代码使我有些困惑: 我不明白的是那key部分。Python如何识别它只需要从字典中读取密钥?是中的特殊字?还是仅仅是一个变量? 问题答案: 5174 只是一个变量名。 只会循环遍历字典中的键,而不是键和值。要遍历键和值,可以使用以下命令: 对于Python 3.x: 对于Python 2.x: 要测试自己,请将单词更改key为poop。 在替换为,它返回由dict支持的类似set的

  • 我是C语言的新手。我已经开始使用向量,并且注意到在我看到的所有通过索引迭代向量的代码中,循环的第一个参数总是基于向量的。Java我可能会使用ArrayList做这样的事情: 我在C语言中看不到这一点有什么原因吗?是不好的做法吗?