for...of

To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

Konstrukcja for...of  tworzy pętlę iterującą przez iterable objects (łącznie z Array, Map, Set, String, TypedArray, arguments itd.), wywołuje funkcję z zadaniami które mają być wykonane dla wartości każdej z właściwości.

Syntax

for (variable of iterable) {
  statement
}
variable
Dla każdej iteracji wartość każdej właściwości jest przypisywane do variable.
iterable
Obiekt przez którego właściwości jest wykonywana iteracja

Przykłady

Iteracja przez Array

let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Możesz użyć const zamiast let , jeżeli nie zmieniasz wartość zmiennej w bloku.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

Iteracja przez String

let iterable = 'boo';

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

Iteracja przez TypedArray

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

Iteracja przez Map

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iteracja przez Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Iteracja przez obiekt arguments 

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

Iteracja przez DOM collection

Iterating over DOM collections like NodeList: the following example adds a read class to paragraphs that are direct descendants of an article:

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll('article > p');

for (let paragraph of articleParagraphs) {
  paragraph.classList.add('read');
}

Closing iterators

In for...of loops, abrupt iteration termination can be caused by break, continue, throw or return. In these cases, the iterator is closed.

function* foo(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (let o of foo()) { 
  console.log(o); 
  break; // closes iterator, triggers return
}

Iterating over generators

You can also iterate over generators:

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Do not reuse generators

Generators should not be re-used, even if the for...of loop is terminated early, for example via the break keyword. Upon exiting a loop, the generator is closed and trying to iterate over it again does not yield any further results.

var gen = (function *(){
  yield 1;
  yield 2;
  yield 3;
})();
for (let o of gen) {
  console.log(o);
  break;  // Closes iterator
}

// The generator should not be re-used, the following does not make sense!
for (let o of gen) {
  console.log(o); // Never called.
}

Iterating over other iterable objects

You can also iterate over an object that explicitly implements iterable protocol:

var iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (var value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

Difference between for...of and for...in

The for...in loop will iterate over all enumerable properties of an object.

The for...of syntax is specific to collections, rather than all objects. It will iterate in this manner over the elements of any collection that has a [Symbol.iterator] property.

The following example shows the difference between a for...of loop and a for...in loop.

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'hello';

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'for...of statement' in that specification.
Standard Initial definition.
ECMAScript 2017 Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Opera Safari
Basic support 38 [1]
51 [3]
13 (13) [2] 12 25 7.1
Closing iterators (Yes) 53 (53) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 5.1 38 [1] 13.0 (13) [2] No support ? 8
Closing iterators (Yes) (Yes) 53.0 (53) (Yes) (Yes) (Yes)

[1] From Chrome 29 to Chrome 37 this feature was available behind a preference. In chrome://flags/#enable-javascript-harmony, activate the entry “Enable Experimental JavaScript”.

[2] Prior Firefox 51, using the for...of loop construct with the const keyword threw a SyntaxError ("missing = in const declaration"). This has been fixed (błąd 1101653).

[3] Support for iteration of objects was added in Chrome 51.

See also

Autorzy i etykiety dokumentu

 Autorzy tej strony: labs4apps
 Ostatnia aktualizacja: labs4apps,