ES6 for...of循环
来源:互联网 发布:java反射的应用 编辑:程序博客网 时间:2024/06/09 18:00
一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,就可以用for…of循环遍历它的成员。
for…of循环可以使用的范围:
- 数组
- Set和Map结构
- 类似数组的对象(比如arguments对象、DOM NodeList对象)
- Generator对象
- 字符串
数组中的使用
for…in循环读取键名,for…of循环读取键值。
var arr = ['a', 'b', 'c', 'd'];for (let a in arr) { console.log(a); // 0 1 2 3}for (let a of arr) { console.log(a); // a b c d}
如果想通过for …of 循环读取键值,可以通过数组实例的entries方法和keys方法
for (var a of keys(arr)) { console.log(a); // 0 1 2 3}
for…of循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。下例子中不会返回“foo”的属性值。
let arr = [3, 5, 7];arr.foo = 'hello';for (let i of arr) { console.log(i); // "3", "5", "7"}
在set和map中的使用
Set和Map结构也原生具有Iterator接口,可以直接使用for…of循环。
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);for (var e of engines) { console.log(e);}// Gecko // Trident// Webkitvar es6 = new Map();es6.set("edition", 6);es6.set("committee", "TC39");es6.set("standard", "ECMA-262");for (var [name, value] of es6) { console.log(name + ": " + value);}// edition: 6// committee: TC39// standard: ECMA-262
Map结构遍历时,返回的是一个数组,该数组的两个成员分别为当前Map成员的键名和键值。
let map = new Map().set('a', 1).set('b', 2);for (let pair of map) { console.log(pair);}// ['a', 1]// ['b', 2]for (let [key, value] of map) { console.log(key + ' : ' + value);}// a : 1// b : 2
note:ES6的数组、Set、Map均具有以下三种方法:
- entries() 返回一个对象,用来遍历[键名, 键值]组成的数组。
- keys() 返回一个对象,键名。
- values() 返回一个对象,键值。
类似数组的对象
此类类似数组的对象具有length属性。比如:
- 字符串
- DOM NodeList对象
- arguments对象
// arguments对象function printArgs() { for (let x of arguments) { console.log(x); }}printArgs('a', 'b');// 'a'// 'b'
并不是所有类似数组的对象都具有iterator接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。
let arrayLike = { length: 2, 0: 'a', 1: 'b' };// 报错for (let x of arrayLike) { console.log(x);}// 正确for (let x of Array.from(arrayLike)) { console.log(x);}
普通的对象
对于普通的对象,for…of结构不能直接使用,会报错。
解决方法一:Object.keys方法将对象的键名生成一个数组,然后遍历这个数组,取出键名对应的value值。
var obj={a:1,b:2,c:3}for (var key of Object.keys(obj)) { console.log(key + ": " + obj[key]);}//a: 1// b: 2// c: 3
解决方法二:将数组的Symbol.iterator属性,直接赋值给其他对象的Symbol.iterator属性。
note:各种遍历方法
- for循环
- forEach方法
- for…in循环
for…of
其中 forEach方法,中途跳出循环,break命令或return命令都不能奏效。
for…in循环主要是为遍历对象而设计的,不适用于遍历数组。数组的键名是数字,但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。
for…of 不同用于forEach方法,可以中途跳出循环,与break、continue和return配合使用。
myArray.forEach(function (value) { console.log(value);});for (var n of fibonacci) { if (n > 1000) break; console.log(n);}
- ES6 for...of循环
- 14、ES6 for...of循环
- ES6--Iterator和for...of循环
- es6 iterator和for...of循环
- ES6--iterator和for-of循环
- es6的iterator和for of循环
- ES6学习——新的语法:for..of 循环
- 深入浅出ES6(二):迭代器和for-of循环
- ES6入门——Iterator和for...of循环
- ES6学习笔记(七)Iterator和for...of循环
- 自学-ES6篇-Iterator和for...of循环
- es6 javascript的Iterator 和 for...of 循环
- 深入学习 ES6 的迭代器 和 for-of 循环
- ES6学习笔记之Iterator和for...of循环
- ES6(二) Iterator(遍历器)和for-of循环
- 深入浅出ES6(二):迭代器和for-of循环
- ES6 for-of循环和迭代器使用细节
- ES6新特性之迭代器与for-of循环
- MySQL半同步复制
- CSU 1657 Ways(bfs)
- POJ 2888 Magic Bracelet
- Java通过缓存队列执行任务代码实现
- MFC对话框程序加载菜单、加速键、工具栏
- ES6 for...of循环
- hdu 1706 An Easy Task
- How to add a logo into the gerber file?
- 《玩不够的数学:算术与几何的妙趣》:第一章 平面上的几何艺术
- bzoj1227(排列组合+树状数组)
- C/C++笔试题
- 201. Bitwise AND of Numbers Range【M】【80】【leetcode】
- Spark Streaming 图片处理案例介绍
- 算法代码实现之希尔排序,C/C++实现