Berbagi teknologi

ES6 Iterator dan for...of loop (5)

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Fitur Iterator:

  • Antarmuka terpadu: Baik itu array, string, atau objek khusus, selama mereka memiliki iterator default, Anda dapat menggunakan loop for...of untuk melintasi.
  • Objek yang dapat diubah: Objek dengan atribut [Symbol.iterator] dianggap dapat diubah. [Symbol.iterator] adalah metode yang mengembalikan iterator.
  • Objek Iterator: Iterator adalah objek dengan metode next() yang mengembalikan objek berisi nilai dan properti selesai. value adalah nilai iterasi saat ini, dan selesai adalah nilai Boolean yang menunjukkan apakah iterasi telah selesai.

untuk…karakteristik loop:

  • Sintaks ringkas: Gunakan for...of untuk mengulangi setiap elemen dalam objek yang dapat diubah tanpa menulis logika iterasi tambahan.
  • Iterasi otomatis: loop for...of secara otomatis memanggil metode next() dari iterator untuk mendapatkan nilai berikutnya.
  • Penanganan pengecualian: Anda dapat menggunakan try...catch di loop for...of untuk menangkap pengecualian yang dilemparkan selama proses iterasi.

1: Gunakan for…of untuk melintasi array

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
    console.log(number); // 依次输出 1 到 5
}
  • 1
  • 2
  • 3
  • 4
  • 5

2: Gunakan for…of untuk melintasi string

let str = "Hello";

for (let char of str) {
    console.log(char); // 依次输出 'H', 'e', 'l', 'l', 'o'
}
  • 1
  • 2
  • 3
  • 4
  • 5

3: Iterator khusus

let myIterable = {
    [Symbol.iterator]: function* () {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (let value of myIterable) {
    console.log(value); // 依次输出 1, 2, 3
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

4: Gunakan untuk…dengan iterator khusus

function* numberIterator(max) {
    let current = 1;
    while (current <= max) {
        yield current++;
    }
}

for (let number of numberIterator(5)) {
    console.log(number); // 依次输出 1 到 5
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

5: Gunakan for…of untuk menangkap pengecualian

let iterable = [1, 2, 3, 4, 'error', 6];

for (let item of iterable) {
    try {
        if (typeof item === 'string') {
            throw new Error('Invalid value');
        }
        console.log(item * 2); // 依次输出 2, 4, 6, 8
    } catch (e) {
        console.error(e.message); // 输出:Invalid value
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

6: Gunakan Array.from untuk mengonversi objek yang dapat diubah menjadi array

let str = "Iterator";

let arrayFromIterable = Array.from(str);
console.log(arrayFromIterable); // 输出:['I', 't', 'e', 'r', 'a', 't', 'o', 'r']
  • 1
  • 2
  • 3
  • 4

Melihat

kesesuaian:for…of loops didukung di browser modern dan Node.js, namun beberapa lingkungan JavaScript lama mungkin tidak.
pertunjukan: Untuk koleksi besar, perulangan for...of mungkin tidak seefisien perulangan for tradisional karena setiap iterasi memerlukan panggilan ke metode next() dari iterator.

7: Simbol.iterator array

let arr = [1, 2, 3];

// 数组是可迭代对象,具有默认的 Symbol.iterator 属性
let iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

8: Simbol.iterator string

let str = "abc";

// 字符串也是可迭代对象
let strIterator = str[Symbol.iterator]();

console.log(strIterator.next()); // { value: "a", done: false }
console.log(strIterator.next()); // { value: "b", done: false }
console.log(strIterator.next()); // { value: "c", done: false }
console.log(strIterator.next()); // { value: undefined, done: true }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

9: Gunakan Simbol.iterator secara manual

let myObj = {
    items: [3, 5, 7],
    [Symbol.iterator]: function* () {
        for (let item of this.items) {
            yield item * 2; // 迭代器返回值的两倍
        }
    }
};

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

console.log(iterator.next()); // { value: 6, done: false }
console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 14, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15