Les tableaux dans es6 peuvent-ils être parcourus en utilisant for of ?

Les tableaux dans es6 peuvent être parcourus en utilisant for of. L'instruction "for...of" crée une boucle pour itérer les objets itérables. ES6 introduit la boucle "for...of" pour remplacer "for...in" et forEach() et prend en charge le nouveau protocole d'itération. L'instruction "for...of" permet aux développeurs de parcourir des structures de données itérables telles que des tableaux, des chaînes, des cartes et des ensembles.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Qu'est-ce qu'une boucle for...of

L'instruction for...of crée une boucle pour parcourir un objet itérable. La boucle for...of introduite dans ES6 pour remplacer for...in et forEach() et prendre en charge un nouveau protocole d'itérations. for...of vous permet de parcourir des structures de données itérables telles que des tableaux, des chaînes, des cartes, des ensembles, etc. for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

语法

for (variable of iterable) {
    statement
}

• 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

其结果就是打印出 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

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

尽管我们的 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"

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

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

你可能会想，发生了什么事?! 如前所述，当调用函数时，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

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

在这个例子中，我们使用 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);
}

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

Syntaxe

// 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

• variable : La valeur d'attribut de chaque itération est affectée à cette variable.
• Itérable : un objet qui possède des propriétés énumérables et peut être itéré.

🎜Cas d'utilisation🎜🎜🎜Explorons quelques cas d'utilisation. 🎜

🎜Arrays (array)🎜

🎜Les tableaux (array) sont des objets de type liste. Il existe différentes méthodes sur le prototype de tableau qui permettent des opérations sur celui-ci, telles que la modification et le parcours. L'opération for...of suivante est effectuée sur un tableau : 🎜

//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

🎜Le résultat est d'imprimer chaque valeur du tableau iterable. 🎜🎜Démo : https://jsbin.com/dimahag/edit?js, console🎜

Maps (mapping)

🎜L'objet Map sert à enregistrer les paires clé-valeur (clé-valeur). Les objets et valeurs primitives peuvent être utilisés comme clés ou valeurs. L'objet Map itère les éléments en fonction de la manière dont ils ont été insérés. En d'autres termes, la boucle for...of renverra un tableau clé-valeur pour chaque itération. 🎜

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

🎜Démo : https://jsbin.com/lofewiw/edit?js,console🎜

Set(set)

🎜L'objet Set(set) vous permet de stocker des valeurs uniques de tout type. Ces valeurs peuvent être une valeur ou un objet primitif. Un objet Set est simplement une collection de valeurs. L'itération des éléments Set est basée sur leur ordre d'insertion. Une valeur dans un Set ne peut apparaître qu’une seule fois. Si vous créez un ensemble avec plusieurs éléments identiques, il est toujours considéré comme un seul élément. 🎜rrreee🎜Bien que notre ensemble comporte plusieurs 1 et 2, la sortie n'est que 1 et 2. 🎜🎜Démo : https://jsbin.com/fajozob/edit?js,console🎜

String (string)

🎜String est utilisé pour stocker des données sous forme de texte. 🎜rrreee🎜Ici, parcourez la chaîne et imprimez les caractères à chaque index. 🎜🎜Démo : https://jsbin.com/rixakeg/edit?js,console🎜

Objet Arguments (objet paramètre)

🎜Traitez un objet paramètre comme un objet de type tableau et correspond aux arguments transmis à la fonction. Voici un cas d'utilisation : 🎜rrreee🎜Vous vous demandez peut-être ce qui s'est passé ?! Comme mentionné précédemment, lors de l'appel d'une fonction, arguments reçoit les args() Tous les paramètres entrants. de la fonction. Ainsi, si nous passons 20 arguments à la fonction args(), nous imprimerons 20 arguments. 🎜🎜Démo : https://jsbin.com/ciqabov/edit?js,console🎜

Générateurs

🎜Un générateur est une fonction qui peut quitter la fonction et y entrer à nouveau plus tard. 🎜rrreee🎜function* définit une fonction génératrice, qui renvoie un objet générateur. Pour plus d'informations sur les générateurs, vous pouvez cliquer ici. 🎜🎜Démo : https://jsbin.com/faviyi/edit?js, console🎜🎜Itération de sortie🎜🎜JavaScript fournit quatre méthodes connues pour terminer l'exécution d'une boucle : break, continue code>, <code>return et throw. Regardons un exemple : 🎜rrreee🎜 Dans cet exemple, nous utilisons le mot-clé break pour terminer la boucle après une exécution, donc seul mini est imprimé. 🎜🎜Démo : https://jsbin.com/tisuken/edit?js, console🎜🎜Les objets ordinaires ne sont pas itérables🎜🎜for...of Les boucles ne conviennent que pour l'itération. Et les objets ordinaires ne sont pas itérables. Jetons un coup d'oeil : 🎜rrreee🎜Ici, nous définissons un objet normal obj, et lorsque nous essayons de for...of opérer dessus, une erreur sera signalée :TypeError : obj[Symbol.iterator] n'est pas une fonction. 🎜🎜Démo : 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

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

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

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

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

小结

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!