추천 튜토리얼: "JavaScript 비디오 튜토리얼"
이 글은 ES6의 for ... of
루프를 연구할 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. for ... of
循环。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在过去,有两种方法可以遍历 javascript。
首先是经典的 for i
循环,它使你可以遍历数组或可索引的且有 length
属性的任何对象。
for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }
其次是 for ... in
循环,用于循环一个对象的键/值对。
for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }
for ... in
循环通常被视作旁白,因为它循环了对象的每一个可枚举属性。这包括原型链中父对象的属性,以及被分配为方法的所以属性。换句话说,它遍历了一些人们可能想不到的东西。使用 for ... in
通常意味着循环块中有很多保护子句,以避免出现不需要的属性。
早期的 javascript 通过库解决了这个问题。许多 JavaScript库(例如:Prototype.js,jQuery,lodash 等)都有类似 each
或 foreach
这样的工具方法或函数,可让你无需 for i
或 for ... in
循环去遍历对象和数组。
for ... of
循环是 ES6 试图不用第三方库去解决其中一些问题的方式。
for ... of
循环
for(const thing of things) { /* ... */ }
它将遍历一个可迭代(iterable)对象。
可迭代对象是定义了 @@ iterator 方法的对象,而且 @@iterator 方法返回一个实现了迭代器协议的对象,或者该方法是生成器函数。
在这句话中你需要理解很多东西:
@@
是什么意思?)下面逐个解决这些疑问。
首先,javascript 对象中的一些内置对象天然的可以迭代,比如最容易想到的就是数组对象。可以像下面的代码中一样在 for ... of
循环中使用数组:
const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing) }
输出结果是数组中的所有元素。
apples oranges pears
还有数组的 entries
方法,它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码:
const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing) }
将输出以下内容
[ 0, 'apples' ] [ 1, 'oranges' ] [ 2, 'pears' ]
当用下面的语法时,entries
方法会更有用
const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value) }
在 for 循环中声明了两个变量:一个用于返回数组的第一项(值的键或索引),另一个用于第二项(该索引实际对应的值)。
一个普通的 javascript 对象是不可迭代的。如果你执行下面这段代码:
// 无法正常执行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo) { console.log(key,':',value) }
会得到一个错误
$ node test.js /path/to/test.js:6 for(const [key, value] of foo) { TypeError: foo is not iterable
然而全局 Object
对象的静态 entries
方法接受一个普通对象作为参数,并返回一个可迭代对象。就像这样的程序:
const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo)) { console.log(key,':',value) }
能够得到你期望的输出:
$ node test.js apples : oranges pears : prunes
如果你想创建自己的可迭代对象,则需要花费更多的时间。你会记得前面说过:
可迭代对象是定义了 @@ iterator 方法的对象,而且 @@iterator 方法返回一个实现了迭代器协议的对象,或者该方法是生成器函数。
搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先,我们需要一个实现 @@iterator 方法的对象。 @@
表示法有点误导性,我们真正要做的是用预定义的 Symbol.iterator
符号定义方法。
如果用迭代器方法定义对象并尝试遍历:
const foo = { [Symbol.iterator]: function() { } } for(const [key, value] of foo) { console.log(key, value) }
得到一个新错误:
for(const [key, value] of foo) { ^ TypeError: Result of the Symbol.iterator method is not an object
这是 javascript 告诉我们它在试图调用 Symbol.iterator
方法,但是调用的结果不是对象。
为了消除这个错误,需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有 next
键的对象,而 next
for i
루프입니다. 이 루프를 사용하면 색인화 가능하고 length
속성이 있는 배열이나 모든 객체를 반복할 수 있습니다. 🎜const foo = { [Symbol.iterator]: function() { return { next: function() { } } } } for(const [key, value] of foo) { console.log(key, value) }
for ... in
루프입니다. 🎜for(const [key, value] of foo) { ^ TypeError: Iterator result undefined is not an object
for ... in
루프는 객체의 열거 가능한 각 속성을 반복하기 때문에 종종 참고 사항으로 간주됩니다. 여기에는 프로토타입 체인에 있는 상위 개체의 속성과 메서드에 할당된 모든 속성이 포함됩니다. 즉, 사람들이 예상하지 못할 일을 겪게 됩니다. for ... in
을 사용한다는 것은 일반적으로 원치 않는 속성을 피하기 위해 루프 블록에 많은 보호 절이 있음을 의미합니다. 🎜🎜초기 JavaScript는 라이브러리를 통해 이 문제를 해결했습니다. 많은 JavaScript 라이브러리(예: Prototype.js, jQuery, lodash 등)에는 for 없이 이 작업을 수행할 수 있는 <code>each
또는 foreach
와 같은 유틸리티 메서드나 함수가 있습니다. i 또는 for ... in
은 객체와 배열을 반복합니다. 🎜🎜for ... of
루프는 타사 라이브러리 없이 이러한 문제 중 일부를 해결하려는 ES6의 방식입니다. 🎜for … of
루프🎜next: function() { //... return { done: false, value: 'next value' } }
for ... of
루프에서 배열을 사용할 수 있습니다. 🎜class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true} } return { value:this.currentValue } }).bind(this) } } } const foo = new First20Evens; for(const value of foo) { console.log(value) }
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i } } }() } } const foo = new First20Evens; for(const item of foo) { console.log(item) }
entries
메서드도 있습니다. 이 반복 가능 항목은 각 루프의 키와 값을 반환합니다. 예를 들어, 다음 코드: 🎜$ node sample-program.js 2 4 6 8 10
entries
메소드는 다음 구문을 사용할 때 더 유용합니다. 🎜rrreee🎜는 for에서 두 개의Variables: 하나는 배열의 첫 번째 항목(값의 키 또는 인덱스)을 반환하기 위한 것이고, 다른 하나는 두 번째 항목(인덱스가 실제로 해당하는 값)을 위한 것입니다. 🎜🎜일반적인 자바스크립트 객체는 반복이 불가능합니다. 다음 코드를 실행하면 🎜rrreee🎜 오류가 발생합니다. 🎜rrreee🎜그러나 전역 Object
개체의 정적 entries
메서드는 허용됩니다. 일반 객체를 매개변수로 사용하고 Iterable 객체를 반환합니다. 다음과 같은 프로그램은 🎜rrreee🎜가 기대하는 결과를 얻을 수 있습니다. 🎜rrreee반복 가능한 객체는 @@ iterator 메서드를 정의하는 객체이며, @@ iterator 메서드는 다음과 같은 구현을 반환합니다. 반복자 프로토콜의 객체 또는 메소드가 생성기 함수입니다.🎜이를 이해하는 가장 쉬운 방법은 반복 가능한 객체를 단계별로 생성하는 것입니다. 먼저 @@iterator 메서드를 구현하는 객체가 필요합니다.
@@
표기법은 약간 오해의 소지가 있습니다. 우리가 정말로 원하는 것은 미리 정의된 Symbol.iterator
기호를 사용하여 메서드를 정의하는 것입니다. 🎜🎜반복자 메소드로 객체를 정의하고 반복하려고 하면: 🎜rrreee🎜새로운 오류가 발생합니다: 🎜rrreee🎜이것은 Symbol.iterator</를 호출하려고 한다는 것을 알려주는 자바스크립트입니다. code> 메서드이지만 호출 결과는<strong>객체가 아닙니다</strong>. 🎜🎜이 오류를 제거하려면 반복자 메서드를 사용하여 <strong>반복자 프로토콜</strong>을 구현하는 개체를 반환해야 합니다. 이는 반복기 메서드가 함수인 <code>next
키가 있는 객체를 반환해야 함을 의미합니다. 🎜rrreee🎜 위 코드를 실행하면 새로운 오류가 발생합니다. 🎜for(const [key, value] of foo) { ^ TypeError: Iterator result undefined is not an object
这次 javascript 告诉我们它试图调用 Symbol.iterator
方法,而该对象的确是一个对象,并且实现了 next
方法,但是 next
的返回值不是 javascript 预期的对象。
next
函数需要返回有特定格式的对象——有 value
和 done
这两个键。
next: function() { //... return { done: false, value: 'next value' } }
done
键是可选的。如果值为 true
(表示迭代器已完成迭代),则说明迭代已结束。
如果 done
为 false
或不存在,则需要 value
键。 value
键是通过循环此应该返回的值。
所以在代码中放入另一个程序,它带有一个简单的迭代器,该迭代器返回前十个偶数。
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true} } return { value:this.currentValue } }).bind(this) } } } const foo = new First20Evens; for(const value of foo) { console.log(value) }
手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象(由生成器函数返回)也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样:
class First20Evens { constructor() { this.currentValue = 0 } [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i } } }() } } const foo = new First20Evens; for(const item of foo) { console.log(item) }
本文不会过多地介绍生成器,如果你需要入门的话可以看这篇文章。今天的重要收获是,我们可以使自己的 Symbol.iterator
方法返回一个生成器对象,并且该生成器对象能够在 for ... of
循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next
,直到生成器停止 yield
值为止。
$ node sample-program.js 2 4 6 8 10
原文地址:https://alanstorm.com/es6s-many-for-loops-and-iterable-objects/
作者:Alan Storm
译文地址:https://segmentfault.com/a/1190000023924865
更多编程相关知识,请访问:编程学习网站!!
위 내용은 ES6의 for...of 루프와 Iterable 객체 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!