深入理解JS中的for...of轮回
for...of语句创立的轮回可以遍历对象。在ES6中引入的for...of可以替换别的两种轮回语句for...in和forEach(),并且这个新的轮回语句支撑新的迭代和谈。for...of同意你遍历可迭代的数据构造,比方数组、字符串、映射、汇合等。
语法
for (variable of iterable) { statement }
variable:每个迭代的属性值被分配给variable
iterable:一个具有可枚举属性并且可以迭代的对象
我们使用一些示例来论述。
Arrays
array是简便的列表,看上去像object。数组原型有多种办法,同意在其上施行操纵,比方遍历。下面的示例使用for...of来对一个array停止遍历操纵:
const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) { console.log(value); } // Output: // => mini // => mani // => mo
其结果就是打印出iterable
数组中的每一个值。
Map
Map
对象持有key-value
对。对象和原始值可以当作一个key
或value
。Map
对象按照插入的方式遍历元素。换句话说,for...of
在每次迭代中返回一个kay-value
对的数组。
const iterable = new Map([['one', 1], ['two', 2]]); for (const [key, value] of iterable) { console.log(`Key: ${key} and Value: ${value}`); } // Output: // => Key: one and Value: 1 // => Key: two and Value: 2
Set
Set
对象同意你储备任何类型的独一值,这些值可以是原始值或对象。Set
对象只是值的汇合。Set
元素的迭代是基于插入次序,每个值只能发生一次。假如你创立一个具有雷同元素不止一次的Set
,那么它依然被认为是单个元素。
const iterable = new Set([1, 1, 2, 2, 1]); for (const value of iterable) { console.log(value); } // Output: // => 1 // => 2
尽管我们创立的Set
有多个1
和2
,但遍历输出的只要1
和2
。
String
字符串用于以文本情势储备数据。
const iterable = 'javascript'; for (const value of iterable) { console.log(value); } // Output: // => "j" // => "a" // => "v" // => "a" // => "s" // => "c" // => "r" // => "i" // => "p" // => "t"
在这里,对字符串施行迭代,并打印出每个索引上(index
)的字符。
Arguments Object
把一个参数对象看作是一个相似数组的对象,与传递给函数的参数相对应。这是一个用例:
function args() { for (const arg of arguments) { console.log(arg); } } args('a', 'b', 'c'); // Output: // => a // => b // => c
你大概在想,到底发生了什么?正如我前面说过的,当调取函数时,参数会接收传入args()
函数的任何参数。因此,假如我们将20
个参数传递给args()
函数,我们将输出20
个参数。
在上面的示例根基上做一些调整,比方给args()
函数,传入一个对象、数组和函数:
function fn(){ return 'functions'; } args('a', 'w3cplus', 'c',{'name': 'airen'},['a',1,3],fn()); // Output: // => "a" // => "w3cplus" // => "c" // => Object { // => "name": "airen" // => } // => Array [ // => "a", // => 1, // => 3 // => ] // => "functions"
Generators
生成器是一个函数,它可以退出函数,稍后从新进入函数。
function* generator(){ yield 1; yield 2; yield 3; }; for (const g of generator()) { console.log(g); } // Output: // => 1 // => 2 // => 3
function* 定义一个生成器函数,该函数返回生成器对象。更多关于生成器相关的信息,可以点击这里。
关闭迭代器
JavaScript中供给了四种已知的终止轮回的办法:break
、continue
、return
和throw
。来看一个示例:
const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) { console.log(value); break; } // Output: // => mini
在这个例子中,我们使用break
关键词来终止一个轮回,并且只打印出一个mini
。
一般对象不成迭代
for...of
轮回只能和迭代一起工作。但一般对象是不成迭代的。让我们看看:
const obj = { fname: 'foo', lname: 'bar' }; for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function console.log(value); }
在这里,我们定义了一个一般对象obj
,当我们尝试for...of
给obj
停止操纵时,会报错:TypeError: obj[Symbol.iterator] is not a function
。
我们可以把一个相似数组的对象转寻成一个数组。对象将具有length
属性,它的元素可以被索引。来看一个示例:
const obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' }; const array = Array.from(obj); for (const value of array) { console.log(value); } // Output: // => foo // => bar // => baz
Array.from()
办法从相似数组(Array-lik)或迭代对象中创立了一个新的数组实例。
for...of
vs. for...in
for...in
在轮回中将遍历对象中所有可枚举属性。
Array.prototype.newArr = () => {}; Array.prototype.anotherNewArr = () => {}; const array = ['foo', 'bar', 'baz']; for (const value in array) { console.log(value); } // Outcome: // => 0 // => 1 // => 2 // => newArr // => anotherNewArr
for...in
不仅可以枚举数组里声明的值,它还可以从结构函数的原型中寻觅继承的非枚举属性,比方上例中的newArr
和anotherNewArr
,并将它们打印出来。
for...of
可以对数组和对象等做更详细的操纵,但并不表示包罗所有对象。
留意:任何具有Symbol.iterator
属性的元素都是可迭代的。
Array.prototype.newArr = function() {}; const array = ['foo', 'bar', 'baz']; for (const value of array) { console.log(value); } // Outcome: // => foo // => bar // => baz
for...of
不思考结构函数原型的不成枚举属性。它只需要查寻可枚举属性并将其打印出来。
总结
懂得for...of
轮回在开发历程中的用途,可以节约许多时间。但愿本文能帮忙您懂得和编写JavaScript开发中的更好的轮回构造。从而让你编码更欢乐!
相关免费学习引荐:js视频教程
以上就是深入理解JS中的for...of轮回的具体内容,更多请关注百分百源码网其它相关文章!