Können Arrays in ES6 mit for of durchlaufen werden?-Front-End-Fragen und Antworten-php.cn

Arrays in es6 können mit for of durchlaufen werden. Die „for...of“-Anweisung erstellt eine Schleife zum Iterieren von iterierbaren Objekten. ES6 führt die „for…of“-Schleife ein, um „for…in“ und forEach() zu ersetzen Mit der „for...of“-Anweisung können Entwickler iterierbare Datenstrukturen wie Arrays, Strings, Maps und Sets durchlaufen.

Können Arrays in ES6 mit for of durchlaufen werden?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Was ist eine for...of-Schleife?

for...of-Anweisung erstellt eine Schleife, um über ein iterierbares Objekt zu iterieren. Die in ES6 eingeführte for...of-Schleife ersetzt for...in und forEach() und unterstützt ein neues Iterationsprotokoll. Mit for...of können Sie iterierbare Datenstrukturen wie Arrays, Strings, Maps, Sets usw. durchlaufen. for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

语法

for (variable of iterable) {
    statement
}

Nach dem Login kopieren

variable：每个迭代的属性值被分配给该变量。
iterable：一个具有可枚举属性并且可以迭代的对象。

用例

我们来探讨一些用例。

Arrays(数组)

Arrays（数组）就是类列表（list-like）对象。数组原型上有各种方法，允许对其进行操作，比如修改和遍历等操作。下面手在一个数组上进行的 for...of 操作：

// array-example.js
const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// mini
// mani
// mo

Nach dem Login kopieren

其结果就是打印出 iterable 数组中的每一个值。

Demo: https://jsbin.com/dimahag/edit?js,console

Maps(映射)

Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说， for...of 循环将为每次迭代返回一个 key-value(键值) 数组。

// map-example.js
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

Nach dem Login kopieren

Demo: https://jsbin.com/lofewiw/edit?js,console

Set(集合)

Set(集合) 对象允许你存储任何类型的唯一值，这些值可以是原始值或对象。 Set(集合) 对象只是值的集合。 Set(集合) 元素的迭代基于其插入顺序。 Set(集合) 中的值只能发生一次。如果您创建一个具有多个相同元素的 Set(集合) ，那么它仍然被认为是单个元素。

// set-example.js
const iterable = new Set([1, 1, 2, 2, 1]);
 
for (const value of iterable) {
  console.log(value);
}
// Output:
// 1
// 2

Nach dem Login kopieren

尽管我们的 Set(集合) 有多个 1 和 2 ，但输出的只有 1 和 2 。

Demo: https://jsbin.com/fajozob/edit?js,console

String(字符串)

字符串用于以文本形式存储数据。

// string-example.js
const iterable = 'javascript';
 
for (const value of iterable) {
  console.log(value);
}
 
// Output:
// "j"
// "a"
// "v"
// "a"
// "s"
// "c"
// "r"
// "i"
// "p"
// "t"

Nach dem Login kopieren

这里，对字符串执行迭代，并打印出每个索引上的字符。

Demo: https://jsbin.com/rixakeg/edit?js,console

Arguments Object(参数对象)

把一个参数对象看作是一个类数组(array-like)对象，并且对应于传递给函数的参数。这是一个用例：

// arguments-example.js
function args() {
  for (const arg of arguments) {
    console.log(arg);
  }
}
 
args('a', 'b', 'c');
// Output:
// a
// b
// c

Nach dem Login kopieren

你可能会想，发生了什么事?! 如前所述，当调用函数时，arguments 会接收传入 args() 函数的任何参数。所以，如果我们传递 20 个参数给 args() 函数，我们将打印出 20 个参数。

Demo: https://jsbin.com/ciqabov/edit?js,console

Generators(生成器)

生成器是一个函数，它可以退出函数，稍后重新进入函数。

// generator-example.js
function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 
 
for (const g of generator()) { 
  console.log(g); 
}
 
// Output:
// 1
// 2
// 3

Nach dem Login kopieren

function* 定义了一个生成器函数，该函数返回生成器对象(Generator object)。更多关于生成器相关的信息，可以点击这里。

Demo: https://jsbin.com/faviyi/edit?js,console

退出迭代

JavaScript 提供了四种已知的终止循环执行的方法：break、continue、return 和 throw。让我们来看一个例子：

const iterable = ['mini', 'mani', 'mo'];
 
for (const value of iterable) {
  console.log(value);
  break;
}
 
// Output:
// mini

Nach dem Login kopieren

在这个例子中，我们使用 break 关键字在一次执行后终止循环，所以只有 mini 被打印出来。

Demo: https://jsbin.com/tisuken/edit?js,console

普通对象不可迭代

for...of 循环仅适用于迭代。而普通对象不可迭代。我们来看一下：

const obj = { fname: 'foo', lname: 'bar' };
 
for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function
    console.log(value);
}

Nach dem Login kopieren

在这里，我们定义了一个普通对象 obj ，并且当我们尝试 for...of 对其进行操作时，会报错：TypeError: obj[Symbol.iterator] is not a function

Syntax

// object-example.js
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

Nach dem Login kopieren

Variable: Der Attributwert jeder Iteration wird dieser Variablen zugewiesen.
Iterierbar: Ein Objekt, das aufzählbare Eigenschaften hat und iteriert werden kann.

🎜Anwendungsfälle🎜🎜🎜Lassen Sie uns einige Anwendungsfälle untersuchen. 🎜

🎜Arrays (array)🎜

🎜Arrays (array) sind listenartige Objekte. Es gibt verschiedene Methoden für den Array-Prototyp, die Operationen darauf ermöglichen, wie z. B. Modifikation und Traversierung. Die folgende for...of-Operation wird für ein Array ausgeführt: 🎜

//for-in-example.js
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

Nach dem Login kopieren

🎜Das Ergebnis besteht darin, jeden Wert im iterable-Array auszugeben. 🎜🎜Demo: https://jsbin.com/dimahag/edit?js, Konsole🎜

Maps (Mapping)

🎜Map-Objekt dient zum Speichern von Schlüssel-Wert-Paaren (Schlüssel-Wert-Paaren). Als Schlüssel oder Werte können Objekte und Grundwerte verwendet werden. Das Kartenobjekt iteriert Elemente basierend darauf, wie sie eingefügt wurden. Mit anderen Worten: Die for...of-Schleife gibt für jede Iteration ein Schlüsselwert-Array zurück. 🎜

Array.prototype.newArr = () => {};
const array = ['foo', 'bar', 'baz'];
 
for (const value of array) { 
  console.log(value);
}
// Outcome:
// foo
// bar
// baz

Nach dem Login kopieren

🎜Demo: https://jsbin.com/lofewiw/edit?js,console🎜

Set(set)

🎜Mit dem Set(set)-Objekt können Sie eindeutige Werte jeder Art speichern. Diese Werte können ein primitiver Wert oder ein Objekt sein. Ein Set-Objekt ist einfach eine Sammlung von Werten. Die Iteration von Set-Elementen basiert auf ihrer Einfügereihenfolge. Ein Wert in einem Set kann nur einmal vorkommen. Wenn Sie ein Set mit mehreren identischen Elementen erstellen, wird es immer noch als einzelnes Element betrachtet. 🎜rrreee🎜Obwohl unser Set mehrere 1 und 2 hat, ist die Ausgabe nur 1 und 2. 🎜🎜Demo: https://jsbin.com/fajozob/edit?js,console🎜

String (string)

🎜String wird zum Speichern von Daten in Textform verwendet. 🎜rrreee🎜Hier durchlaufen Sie die Zeichenfolge und geben die Zeichen an jedem Index aus. 🎜🎜Demo: https://jsbin.com/rixakeg/edit?js,console🎜

Arguments Object (Parameterobjekt)

🎜Behandeln Sie ein Parameterobjekt als Array-ähnliches Objekt und entspricht den Argumenten an die Funktion übergeben. Hier ist ein Anwendungsfall: 🎜rrreee🎜Sie fragen sich vielleicht, was passiert ist?! Wie bereits erwähnt, empfängt arguments beim Aufrufen einer Funktion die eingehenden args()-Parameter der Funktion. Wenn wir also 20 Argumente an die Funktion args() übergeben, geben wir 20 Argumente aus. 🎜🎜Demo: https://jsbin.com/ciqabov/edit?js,console🎜

Generatoren

🎜Ein Generator ist eine Funktion, die die Funktion verlassen und später wieder aufrufen kann. 🎜rrreee🎜function* definiert eine Generatorfunktion, die ein Generatorobjekt zurückgibt. Weitere Informationen zu Generatoren finden Sie hier. 🎜🎜Demo: https://jsbin.com/faviyi/edit?js, Konsole🎜🎜Iteration beenden🎜🎜JavaScript bietet vier bekannte Methoden zum Beenden der Schleifenausführung: break, continue code>, <code>return und throw. Schauen wir uns ein Beispiel an: 🎜rrreee🎜 In diesem Beispiel verwenden wir das Schlüsselwort break, um die Schleife nach einer Ausführung zu beenden, sodass nur mini ausgegeben wird. 🎜🎜Demo: https://jsbin.com/tisuken/edit?js, Konsole🎜🎜Gewöhnliche Objekte sind nicht iterierbar🎜🎜for...of Schleifen sind nur für die Iteration geeignet. Und gewöhnliche Objekte sind nicht iterierbar. Werfen wir einen Blick darauf: 🎜rrreee🎜Hier definieren wir ein normales Objekt obj, und wenn wir versuchen, es mit for...of zu bearbeiten, wird ein Fehler gemeldet :TypeError: obj[Symbol.iterator] ist keine Funktion. 🎜🎜Demo: https://jsbin.com/sotidu/edit?js,console🎜

我们可以通过将类数组(array-like)对象转换为数组来绕过它。该对象将具有一个 length 属性，其元素必须可以被索引。我们来看一个例子：

// object-example.js
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

Nach dem Login kopieren

Array.from() 方法可以让我通过类数组(array-like)或可迭代对象来创建一个新的 Array(数组) 实例。

Demo: https://jsbin.com/miwofin/edit?js,console

For…of vs For…in

for...in 循环将遍历对象的所有可枚举属性。

//for-in-example.js
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

Nach dem Login kopieren

for...in 不仅枚举上面的数组声明，它还从构造函数的原型中查找继承的非枚举属性，在这个例子中，newArr 和 anotherNewArr 也会打印出来。

Demo: https://jsbin.com/quxojof/edit?js,console

for...of 更多用于特定于集合（如数组和对象），但不包括所有对象。

注意：任何具有 Symbol.iterator 属性的元素都是可迭代的。

Array.prototype.newArr = () => {};
const array = ['foo', 'bar', 'baz'];
 
for (const value of array) { 
  console.log(value);
}
// Outcome:
// foo
// bar
// baz

Nach dem Login kopieren

for...in 不考虑构造函数原型的不可枚举属性。它只需要查找可枚举属性并将其打印出来。

Demo: https://jsbin.com/sakado/edit?js,console

小结

了解 for...of 循环的使用可以在开发过程中节省大量的时间。希望本文帮助你在JavaScript开发中了解和编写更好的循环结构。让你快乐编码！

完整的示例代码：https://github.com/codediger/javascript-for-of-loop

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonKönnen Arrays in ES6 mit for of durchlaufen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!