es6은 객체를 탐색할 수 있나요?

es6의 "for of"는 객체를 순회할 수 없습니다. 이유: Iterator 인터페이스는 ES6에서 도입되었습니다. Iterator 인터페이스를 제공하는 데이터 유형만 "for-of"를 사용하여 탐색할 수 있지만 일반 객체는 기본적으로 Iterator 인터페이스를 제공하지 않으므로 "for-of"를 사용할 수 없습니다. 순회.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

프론트 엔드의 지속적인 개발과 함께 for, forEach, do..while, for...in 등과 같은 다양한 라이트 루프 방법이 등장했습니다. 그러나 이러한 루프에도 고유한 적용 시나리오와 장점이 있습니다. 그리고 단점.

ES6은 문자열, 배열 및 기타 배열과 유사한 객체를 반복할 수 있는 새로운 루프 메서드 for...of를 제공합니다. 가장 널리 사용되는 객체 객체로서 루프가 가능한 이유는 무엇일까요?

아래 코드 예제를 살펴보겠습니다.

{
    // 迭代数组
  const iterable = ['a', 'b'];
  for (const value of iterable) {
    console.log(value);
  }
  // output: a b
}
{
    // 普通对象
    const obj = {
      a: 'A',
      b: 'B'
    }
    for(const item of obj){
      console.log(item)
    }
    // Uncaught TypeError: obj is not iterable
}

아뇨, 오류가 보고되었습니다: Uncaught TypeError: obj is not iterable. 이는 obj가 반복 가능하지 않다는 점을 상기시켜 줍니다. 분명히 Object 객체를 순회하기 위해 for...of를 직접 사용할 수는 없습니다. Uncaught TypeError: obj is not iterable。提示obj是不可迭代的，显然直接用for...of去遍历Object对象是不行的。

那么可以遍历大部分数据结构的for...of为何不能遍历Object对象？

原因：

ES6 中引入了 Iterator，只有提供了 Iterator 接口的数据类型才可以使用 for-of 来循环遍历，而 Array、Set、Map、某些类数组如 arguments 等数据类型都默认提供了 Iterator 接口，所以它们可以使用 for-of 来进行遍历。

而对于普通的对象，for...of结构不能直接使用，会报错，提示obj is not iterable，也就是说普通对象默认没有Iterator接口，必须部署了 Iterator 接口后才能使用。

怎么解决？让for-of 遍历对象

那么原因清楚了，该怎么解决呢？能不能为对象已经其它的一些数据类型提供 Iterator 接口呢

答案是可以的，ES6 同时提供了 Symbol.iterator 属性，只要一个数据结构有这个属性，就会被视为有 Iterator 接口，接着就是如何实现这个接口了，如下就是一个最简实现：

newObj[Symbol.iterator] = function(){
    let index = 0
        , self = this
        , keys = Object.keys( self )
        ;
    
    return {
        next(){
            if( index < keys.length ){
                return {
                    value: self[keys[index++]]
                    , done: false
                };
            }
            else{
                return {
                    value: undefined
                    , done: true
                }
            }
        }
    };
};

仔细看一下发现就会发现 Symbol.iterator 接口其实是一个 Generator 函数，那么就可以简化代码：

newObj[Symbol.iterator] = function* (){
    let keys = Object.keys( this )
        ;
    
    for(let i = 0, l = keys.length; i < l; i++){
        yield this[keys[i]];
    }
}

for(let v of newObj){
    console.log( v );
}
// 输出结果
// 5
// 6

值得注意的是 Object.keys 碰巧解决了之前 for-in 遇到的继承问题

这样满足了我们的期望，使用 for-of 来遍历对象，但是好像哪里不对，我们遍历对象时一般都是期望同时输出 key 和 value 的，这样调整一下代码

newObj[Symbol.iterator] = function* (){
    let keys = Object.keys( this )
        ;
    
    for(let i = 0, l = keys.length; i < l; i++){
        yield {
            key: keys[i]
            , value: this[keys[i]]
        };
    }
}

for(let v of newObj){
    console.log( v );
}
// 输出结果
// {key: "e", value: 5}
// {key: "f", value: 6}

这样返回了一个对象，似乎又很不舒服，我们能不能尝试一些解构赋值呢。。。

for(let {key, value} of newObj){
    console.log(key, value );
}
// 输出结果
// e 5
// f 6

这样似乎非常完美了。。。

扩展知识：for-of和其他循环的区别

Iterator는 ES6에서 도입되었습니다. for-of를 사용하여 Iterator 인터페이스를 제공하는 데이터 유형과 인수와 같은 특정 배열을 사용할 수 있습니다. 인터페이스는 기본적으로 제공되므로 for-of를 사용하여 탐색할 수 있습니다.

循环名称	循环对象	是否可中断循环	是否有返回值
for	for循环体的length	可以	无返回值
forEach	仅可循环数组、map、set等，不可循环字符串、普通对象	不可以	无返回值
do...while	满足某种条件，则可一直循环，至少循环一次	可以	无返回值
while	满足某种条件，则可一直循环	可以	无返回值
map	组成新的数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
filter	过滤数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
for...in	可循环数组、对象，不可循环map、set。可遍历数字键名，还可遍历手动添加的其他键，甚至包括原型链上的键	可以	无返回值
for...of	그러면 왜 대부분의 데이터 구조와 Object 객체를 순회할 수 있는 for...of를 사용할 수 없나요?		이유:

일반 객체의 경우 for...of 구조를 직접 사용할 수 없으며 obj is not iterable이라는 오류 메시지가 보고됩니다. Iterator 인터페이스는 기본적으로 배포되어야 하며 Iterator 인터페이스를 획득한 후에만 사용할 수 있습니다. 어떻게 해결하나요? for-of가 객체를 순회하도록 하세요

🎜이유는 분명합니다. 어떻게 해결해야 할까요? 객체 및 기타 데이터 유형에 대한 Iterator 인터페이스를 제공할 수 있습니까? 대답은 '예'입니다. ES6은 또한 Symbol.iterator 속성을 제공하는 한, 다음 단계로 간주됩니다. 이 인터페이스를 구현한 후 가장 간단한 구현은 다음과 같습니다. 🎜rrreee🎜자세히 살펴보면 Symbol.iterator 인터페이스가 실제로 생성기 함수라는 것을 알 수 있으며 코드를 단순화할 수 있습니다. 🎜rrreee🎜가치가 있습니다. Object.keys가 문제를 해결한다는 점에 주목하여 우리는 이전에 for-in에서 발생한 상속 문제를 해결했습니다🎜🎜이것은 우리의 기대에 부응하고 for-of를 사용하여 객체를 순회하지만 뭔가 잘못된 것 같습니다. 객체를 순회할 때 일반적으로 예상합니다. 키와 값을 동시에 출력하려면 이렇게 조정하세요. 🎜rrreee🎜 코드는 이와 같은 객체를 반환하는데 매우 불편해 보입니다. . . 🎜rrreee🎜완벽해 보이네요. . . 🎜🎜🎜지식 확장: for-of와 다른 루프의 차이점🎜🎜루프가 중단될 수 있는지 여부🎜🎜for🎜🎜for 루프 본문의 길이🎜🎜는🎜🎜반환 값이 없습니다🎜🎜🎜forEach🎜🎜는 배열만 루프할 수 있습니다. map, set 등 문자열과 일반 객체는 루프할 수 없습니다🎜🎜No🎜🎜반환 값 없음🎜🎜🎜do...while🎜🎜특정 조건이 충족되면, 영원히 반복할 수 있습니다. 최소한 한 번만 반복하면 됩니다🎜🎜can🎜🎜반환 값이 없습니다🎜🎜🎜while🎜🎜특정 조건이 충족되면 영원히 반복할 수 있습니다🎜🎜can🎜🎜반환 없음 value🎜🎜🎜map🎜🎜 문자열과 일반 객체가 아닌 배열만 반복할 수 있습니다. Set 및 map🎜🎜은 중단할 수 없습니다🎜🎜 원본 배열에 영향을 미침🎜🎜🎜 filter🎜🎜필터 배열 멤버, 루프 가능한 배열만, 루프 가능한 문자열 아님, 일반 개체, 세트, ​​맵🎜🎜중단할 수 없음🎜🎜새 배열 반환, 원래 배열에 영향을 주지 않습니다🎜🎜🎜 for...in🎜🎜배열, 개체를 반복할 수 있지만 맵, 설정은 반복할 수 없습니다. 코드>. 숫자 키 이름은 물론 수동으로 추가한 다른 키, 심지어 프로토타입 체인의 키까지 순회할 수 있습니다.🎜🎜Can🎜🎜반환 값 없음🎜🎜🎜for...of🎜🎜 순환 반복 가능한 객체, 비순환 일반 객체(통합 데이터 구조 순회) 🎜🎜 가능 🎜🎜 반환 값 없음 🎜🎜🎜🎜🎜 [관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜웹 프론트 엔드🎜]🎜

루프 이름	루프 개체	반환 값이 있습니까

위 내용은 es6은 객체를 탐색할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!