Bolehkah tatasusunan dalam es6 dilalui menggunakan for of?

Tatasusunan dalam es6 boleh dilalui menggunakan for of. Pernyataan "for...of" mencipta gelung untuk mengulangi objek yang boleh diulang ES6 memperkenalkan gelung "for...of" untuk menggantikan "for...in" dan forEach() dan menyokong protokol lelaran ; Pernyataan "for...of" membenarkan pembangun merentasi struktur data boleh lelar seperti Tatasusunan, Rentetan, Peta dan Set.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Apakah itu untuk...gelung? Penyataan

for...of mencipta gelung untuk melelaran pada objek boleh lelar. Gelung for...of diperkenalkan dalam ES6 untuk menggantikan for...in dan forEach() serta menyokong protokol lelaran baharu. for...of Membolehkan anda melintasi struktur data boleh lelar seperti Tatasusunan, Rentetan, Peta, Set, dll.

Sintaks

for (variable of iterable) {
    statement
}

• pembolehubah: Nilai atribut setiap lelaran diberikan kepada pembolehubah ini.
• boleh diulang: Objek yang mempunyai sifat terbilang dan boleh diulang.

Kes Penggunaan

Mari kita terokai beberapa kes penggunaan.

Array (array)

Array (array) ialah objek seperti senarai. Terdapat pelbagai kaedah pada prototaip tatasusunan yang membenarkan operasi padanya, seperti pengubahsuaian dan traversal. Operasi for...of berikut dilakukan pada tatasusunan:

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

Hasilnya ialah mencetak setiap nilai dalam tatasusunan iterable.

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

Peta (pemetaan)

Objek peta adalah untuk menyimpan nilai kunci (nilai utama ) betul. Objek dan nilai primitif boleh digunakan sebagai kunci atau nilai. Objek peta mengulangi elemen berdasarkan cara ia disisipkan. Dalam erti kata lain, gelung for...of akan mengembalikan tatasusunan nilai kunci untuk setiap lelaran.

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

Set(set)

Set(set) objek membenarkan anda untuk menyimpan nilai unik dari sebarang jenis, yang boleh menjadi nilai atau objek primitif. Objek Set hanyalah koleksi nilai. Lelaran elemen Set adalah berdasarkan susunan sisipannya. Nilai dalam Set hanya boleh berlaku sekali. Jika anda mencipta Set dengan berbilang elemen yang sama, ia masih dianggap sebagai elemen tunggal.

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

Walaupun Set kami mempunyai berbilang 1 dan 2 , hanya 1 dan 2 adalah output.

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

String (rentetan)

String digunakan untuk menyimpan data dalam bentuk teks.

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

Di sini, ulangi rentetan dan cetak aksara pada setiap indeks.

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

Objek Argumen (objek parameter)

Pertimbangkan objek parameter sebagai kelas Satu tatasusunan -seperti objek dan sepadan dengan hujah yang dihantar ke fungsi. Berikut ialah kes penggunaan:

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

Anda mungkin terfikir, apa yang berlaku?! Seperti yang dinyatakan sebelum ini, apabila fungsi dipanggil, arguments akan menerima sebarang hujah yang dihantar ke dalam fungsi args(). Jadi, jika kita menghantar 20 argumen ke fungsi args(), kita akan mencetak 20 argumen.

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

Penjana (penjana)

Penjana ialah fungsi, ia boleh keluar dari fungsi , dan masukkan semula fungsi itu kemudian.

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

function* mentakrifkan fungsi penjana, yang mengembalikan objek penjana. Untuk maklumat lanjut tentang penjana, anda boleh klik di sini.

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

Keluar lelaran

JavaScript menyediakan empat kaedah yang diketahui untuk menamatkan pelaksanaan gelung : break , continue, return dan throw. Mari lihat contoh:

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

Dalam contoh ini, kami menggunakan kata kunci break untuk menamatkan gelung selepas satu pelaksanaan, jadi hanya mini dicetak.

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

Objek biasa tidak boleh lelar

for...of Gelung hanya sesuai untuk lelaran. Dan objek biasa tidak boleh diubah. Mari lihat:

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

Di sini, kami mentakrifkan objek biasa obj , dan apabila kami cuba for...of mengendalikannya, ralat akan dilaporkan: TypeError: obj[Symbol.iterator] is not a function.

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

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视频教程、编程视频】

Atas ialah kandungan terperinci Bolehkah tatasusunan dalam es6 dilalui menggunakan for of?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!