ES6의 Iterator 인터페이스에 대한 코드 예제 설명

不言
풀어 주다: 2018-10-29 15:18:20
앞으로
1977명이 탐색했습니다.

이 기사의 내용은 ES6의 Iterator 인터페이스에 대한 코드 예제입니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

es6에서 특정 데이터 구조(배열 객체 맵 세트)를 작동할 때 어떻게 통합된 메소드로 작동할 수 있나요? Iterator 인터페이스는 이러한 기능을 구현합니다

1. 배열에서 Iterator 적용

{
    let arr = ['hello', 'world'];
    // 数组内部实现了iterator接口,所以直接调用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示数组元素,done表示循环是否有下一步状态,true:没有下一步了,false:循环没有结束
}
로그인 후 복사
로그인 후 복사

2. Iterator 인터페이스 맞춤설정

{
    // object没有内置iterator接口,自定义iterator接口,让obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 声明iterator接口方法
        [Symbol.iterator]() {
            // 先遍历start,再遍历end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 实现的原理就是不断调用Iterator接口
    // 通过 for...of 验证接口是否配置成功,如果没有配置成功,object就无法使用 for...of循环
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}
로그인 후 복사
로그인 후 복사

3.for...of loop

{
    // 数组内部实现了iterator接口,所以可以直接使用for...of循环
    let arr = ['hello', 'world'];
    for (let value of arr) {
        console.log(value); // hello world
    }
}
로그인 후 복사
로그인 후 복사

                      있음 칼럼







~ ~                                               ~ ~                                               ~ ~                                                                                                                                           ~                                                          ​ 스크립트
#🎜🎜 ##### 🎜🎜#14번읽음                                                          읽는 데 6분이 걸립니다.                                        



# 🎜 🎜#                                     

0

                                                                                   

                                                                                                                                                                                                           

es6에서 특정 데이터 구조(배열 객체 맵 세트)를 작동할 때 통합 메서드를 사용하여 작동하는 방법은 무엇입니까?


1. 배열에 Iterator 적용

{
    let arr = ['hello', 'world'];
    // 数组内部实现了iterator接口,所以直接调用[Symbol.iterator]()
    let map = arr[Symbol.iterator]();
    console.log(map.next()); // {value: "hello", done: false}
    console.log(map.next()); // {value: "world", done: false}
    console.log(map.next()); // {value: undefined, done: true}
    // value 表示数组元素,done表示循环是否有下一步状态,true:没有下一步了,false:循环没有结束
}
로그인 후 복사
로그인 후 복사

2. 맞춤형 Iterator 인터페이스#🎜 🎜#

{
    // object没有内置iterator接口,自定义iterator接口,让obj也可以使用for...of
    let obj = {
        start: [1,2,3],
        end: [4,5,6],
        // 声明iterator接口方法
        [Symbol.iterator]() {
            // 先遍历start,再遍历end
            let arr = this.start.concat(this.end);
            let index = 0;
            // 返回next()
            return {
                next() {
                    if (index < arr.length) {
                        return {
                            value: arr[index++],
                            done: false
                        }
                    } else {
                        return {
                            value: arr[index++],
                            done: true
                        }
                    }
                }
            }
        }
    };
    // for...of 实现的原理就是不断调用Iterator接口
    // 通过 for...of 验证接口是否配置成功,如果没有配置成功,object就无法使用 for...of循环
    for (let key of obj) {
        console.log(key); // 1 2 3 4 5 6
    }
}
로그인 후 복사
로그인 후 복사

3.for...of 루프

{
    // 数组内部实现了iterator接口,所以可以直接使用for...of循环
    let arr = ['hello', 'world'];
    for (let value of arr) {
        console.log(value); // hello world
    }
}
로그인 후 복사
로그인 후 복사
#🎜 🎜#

# ㅋㅋㅋㅋㅋㅋㅋㅋㅋ #🎜 🎜#

  • # 🎜🎜#ES6의 Iterator 인터페이스에 대한 코드 예제 설명

  • #🎜 🎜#
  • 다음에 관심이 있을 수 있습니다.

  • #🎜 🎜#

댓글

                                                        시간순 정렬


로드 중...
더 보기 떠나기 더 많은 댓글

위 내용은 ES6의 Iterator 인터페이스에 대한 코드 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿