Итерации JavaScript

Оглавление

    Показать оглавление

Итерируемые объекты — это объекты, которые можно перебирать с помощью for..of.

Технически итерации должны реализовывать метод Symbol.iterator.

Итерация по строке

Вы можете использовать цикл for..of для перебора элементов строки:

Пример

for (const x of "W3Schools") {
  // code block to be executed
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over a String:</p>

<p id="demo"></p>

<script>
// Create a String
const name = "W3Schools";

// List all Elements
let text = ""
for (const x of name) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Итерация по массиву

Вы можете использовать цикл for..of для перебора элементов массива:

Пример

for (const x of [1,2,3,4,5]) {
  // code block to be executed
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Iterate over an Array:</p>

<p id="demo"></p>

<script>
// Create aa Array
const letters = ["a","b","c"];

// List all Elements
let text = "";
for (const x of letters) {
  text += x + "<br>";
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Итераторы JavaScript

Протокол итератора определяет, как создать последовательность значений из объекта.

Объект становится итератором, когда он реализует метод next().

Метод next() должен возвращать объект с двумя свойствами:

  • значение (следующее значение)

  • сделано (правда или ложь)

value

Значение, возвращаемое итератором
(Можно опустить, если значение Done истинно)

done

true, если итератор завершился
false, если итератор создал новое значение

Домашнее, итерируемое

Эта итерация возвращает бесконечные значения: 10,20,30,40,.... Каждый раз next() вызывается:

Пример

// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // Returns 10
n.next(); // Returns 20
n.next(); // Returns 30

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>
<p>Home Made Iterable:</p>

<p id="demo"></p>

<script>
// Home Made Iterable
function myNumbers() {
  let n = 0;
  return {
    next: function() {
      n += 10;
      return {value:n, done:false};
    }
  };
}

// Create Iterable
const n = myNumbers();
n.next(); // 10
n.next(); // 20
n.next(); // 30

document.getElementById("demo").innerHTML = n.next().value;
</script>
</body>
</html>

Проблема с самодельной итерацией:

Он не поддерживает оператор JavaScript for..of.

Итерируемый объект JavaScript — это объект, имеющий Symbol.iterator.

Symbol.iterator — это функция, которая возвращает функцию next().

Итерацию можно перебирать с помощью кода: for (const x of iterable) {

Пример

// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

Теперь вы можете использовать for..of

for (const num of myNumbers) {
  // Any Code Here
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

<p id="demo"></p>

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

let text = ""
for (const num of myNumbers) {
  text += num +"<br>"
}

document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

Метод Symbol.iterator автоматически вызывается for..of. <p>Но мы также можем сделать это «вручную»

Пример

let iterator = myNumbers[Symbol.iterator]();

while (true) {
  const result = iterator.next();
  if (result.done) break;
  // Any Code Here
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Iterables</h2>

<p id="demo"></p>

<script>
// Create an Object
myNumbers = {};

// Make it Iterable
myNumbers[Symbol.iterator] = function() {
  let n = 0;
  done = false;
  return {
    next() {
      n += 10;
      if (n == 100) {done = true}
      return {value:n, done:done};
    }
  };
}

// Create an Iterator
let iterator = myNumbers[Symbol.iterator]();

let text = ""
while (true) {
  const result = iterator.next();
  if (result.done) break;
  text += result.value +"<br>";
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>