Κοινή χρήση τεχνολογίας

ES6 Iterator και for...of loop (5)

2024-07-12

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

Χαρακτηριστικά του Iterator:

  • Ενοποιημένη διεπαφή: Είτε πρόκειται για πίνακα, συμβολοσειρά ή προσαρμοσμένο αντικείμενο, εφόσον έχουν έναν προεπιλεγμένο επαναλήπτη, μπορείτε να χρησιμοποιήσετε τον βρόχο for...of για διέλευση.
  • Επαναληπτικά αντικείμενα: Τα αντικείμενα με το χαρακτηριστικό [Symbol.iterator] θεωρούνται επαναλαμβανόμενα. Το [Symbol.iterator] είναι μια μέθοδος που επιστρέφει έναν επαναλήπτη.
  • Αντικείμενο Iterator: Ένας επαναλήπτης είναι ένα αντικείμενο με μέθοδο next() που επιστρέφει ένα αντικείμενο που περιέχει τιμές και ιδιότητες ολοκληρωμένης. Η τιμή είναι η τιμή της τρέχουσας επανάληψης και η τελική τιμή είναι μια Boolean τιμή που υποδεικνύει εάν η επανάληψη έχει ολοκληρωθεί.

για… των χαρακτηριστικών βρόχου:

  • Συνοπτική σύνταξη: Χρησιμοποιήστε το for...of για επανάληψη σε κάθε στοιχείο σε ένα επαναληπτικό αντικείμενο χωρίς να γράψετε πρόσθετη λογική επανάληψης.
  • Αυτόματη επανάληψη: ο βρόχος for...of καλεί αυτόματα τη μέθοδο next() του επαναλήπτη για να λάβει την επόμενη τιμή.
  • Χειρισμός εξαιρέσεων: Μπορείτε να χρησιμοποιήσετε το try...catch in the for...of loop για να συλλάβετε τις εξαιρέσεις που έγιναν κατά τη διαδικασία επανάληψης.

1: Χρησιμοποιήστε το για…of για να διασχίσετε τον πίνακα

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

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

2: Χρησιμοποιήστε το για…of για να διασχίσετε τη συμβολοσειρά

let str = "Hello";

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

3: Προσαρμοσμένος επαναλήπτης

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: Χρήση για…of με προσαρμοσμένο επαναλήπτη

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: Χρησιμοποιήστε το για…of για να συλλάβετε εξαιρέσεις

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: Χρησιμοποιήστε το Array.from για να μετατρέψετε επαναληπτικά αντικείμενα σε πίνακες

let str = "Iterator";

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

Ειδοποίηση

συμβατότηταΟι βρόχοι :for…of υποστηρίζονται σε σύγχρονα προγράμματα περιήγησης και στο Node.js, αλλά ορισμένα παλαιότερα περιβάλλοντα JavaScript ενδέχεται να μην.
εκτέλεση: Για μεγάλες συλλογές, ένας βρόχος for...of μπορεί να μην είναι τόσο αποτελεσματικός όσο ένας παραδοσιακός βρόχος for επειδή κάθε επανάληψη απαιτεί κλήση στη μέθοδο next() του iterator.

7: Σύμβολο.επαναλήπτης πίνακα

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: Σύμβολο.επαναλήπτης συμβολοσειράς

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: Χρησιμοποιήστε μη αυτόματα το Symbol.iterator

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