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 (zmienna of iterowalny) {
  wyrażenie
}
zmienna
Dla każdej iteracji wartość każdej właściwości jest przypisywane do variable.
iterowalny
Obiekt przez którego właściwości jest wykonywana iteracja

Przykłady

Iteracja przez Array

let iterowalny = [10, 20, 30];

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

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

let iterowalny = [10, 20, 30];

for (const wartosc of iterowalny) {
  console.log(wartosc);
}
// 10
// 20
// 30

Iteracja przez String

let iterowalny = 'boo';

for (let wartosc of iterowalny) {
  console.log(wartosc);
}
// "b"
// "o"
// "o"

Iteracja przez TypedArray

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

for (let wartosc of iterowalny) {
  console.log(wartosc);
}
// 0
// 255

Iteracja przez Map

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

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

for (let [klucz, wartosc] of iterowalny) {
  console.log(wartosc);
}
// 1
// 2
// 3

Iteracja przez Set

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

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

Iteracja przez obiekt arguments 

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

// 1
// 2
// 3

Iteracja przez Kollekcje DOM

Iteracja przez Kollekcje DOM jak NodeList: przykład dodaje klase read do elementów <p> które są bezpośrednio w <article>:

// Uwaga: To działa tylko na platformach z
// zaimplementowanym NodeList.prototype[Symbol.iterator]
let paragrafyWAricle = document.querySelectorAll('article > p');

for (let elementP of paragrafyWArticle) {
  elementP.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 Latest Draft (ECMA-262)
The definition of 'for...of statement' in that specification.
Draft  

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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: pitust, labs4apps
Ostatnia aktualizacja: pitust,