기술나눔

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

반복자 기능:

• 통합 인터페이스: 배열이든, 문자열이든, 사용자 정의 개체이든 기본 반복자가 있는 한 for...of 루프를 사용하여 탐색할 수 있습니다.
• 반복 가능한 객체: [Symbol.iterator] 속성이 있는 객체는 반복 가능한 것으로 간주됩니다. [Symbol.iterator]는 반복자를 반환하는 메서드입니다.
• Iterator 객체: 반복자는 value 및 done 속성을 포함하는 객체를 반환하는 next() 메서드가 있는 객체입니다. value는 현재 반복의 값이고 done은 반복이 완료되었는지 여부를 나타내는 부울 값입니다.

for...of 루프 특성:

• 간결한 구문: 추가 반복 논리를 작성하지 않고도 반복 가능한 객체의 각 요소를 반복하려면 for...of를 사용하세요.
• 자동 반복: for...of 루프는 자동으로 반복자의 next() 메서드를 호출하여 다음 값을 얻습니다.
• 예외 처리: for...of 루프에서 try...catch를 사용하여 반복 프로세스 중에 발생한 예외를 잡을 수 있습니다.

1: for...of를 사용하여 배열을 탐색합니다.

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

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

2: for...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: 사용자 정의 반복자와 함께 for...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: for...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 루프는 각 반복마다 반복자의 next() 메서드에 대한 호출이 필요하기 때문에 기존 for 루프만큼 효율적이지 않을 수 있습니다.

7: 배열의 Symbol.iterator

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: 문자열의 Symbol.iterator

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