Können ES6 Objekte durchqueren?

es6s „for of“ kann keine Objekte durchqueren. Grund: Die Iterator-Schnittstelle wurde in ES6 eingeführt. Nur Datentypen, die die Iterator-Schnittstelle bereitstellen, können mit „for-of“ durchlaufen werden, während normale Objekte standardmäßig keine Iterator-Schnittstelle bereitstellen, sodass „for-of“ nicht verwendet werden kann Durchquerung.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

Mit der kontinuierlichen Weiterentwicklung des Frontends sind viele Methoden für Lichtschleifen entstanden, z. B. for, forEach, do..while, for...in usw. Diese Schleifen haben jedoch auch ihre eigenen Anwendungsszenarien und Vorteile und Nachteile.

ES6 stellt uns eine neue Schleifenmethode für ... von zur Verfügung, die Zeichenfolgen, Arrays und andere Array-ähnliche Objekte schleifen kann. Da es sich um das am weitesten verbreitete Objektobjekt handelt, liegt es auf der Hand, dass es in einer Schleife ausgeführt werden kann.

Schauen wir uns das folgende Codebeispiel an:

{
    // 迭代数组
  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
}

Oh nein, es wurde ein Fehler gemeldet: Uncaught TypeError: obj is not iterable. Es erinnert daran, dass obj nicht iterierbar ist. Offensichtlich ist es nicht möglich, for...of direkt zum Durchlaufen des Objektobjekts zu verwenden. 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 wurde in ES6 eingeführt. Nur Datentypen, die die Iterator-Schnittstelle bereitstellen, können mithilfe von Datentypen wie Array, Set, Map und bestimmten Arrays wie Argumenten durchlaufen werden Die Schnittstelle wird standardmäßig bereitgestellt, sodass sie mit for-of durchlaufen werden können.

循环名称	循环对象	是否可中断循环	是否有返回值
for	for循环体的length	可以	无返回值
forEach	仅可循环数组、map、set等，不可循环字符串、普通对象	不可以	无返回值
do...while	满足某种条件，则可一直循环，至少循环一次	可以	无返回值
while	满足某种条件，则可一直循环	可以	无返回值
map	组成新的数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
filter	过滤数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
for...in	可循环数组、对象，不可循环map、set。可遍历数字键名，还可遍历手动添加的其他键，甚至包括原型链上的键	可以	无返回值
for...of	Warum kann also nicht für ... von, das die meisten Datenstrukturen durchqueren kann, Objektobjekte durchquert werden?		Grund:

Für gewöhnliche Objekte kann die for...of-Struktur nicht direkt verwendet werden, und es wird ein Fehler gemeldet, der obj is not iterable auffordert, was bedeutet, dass gewöhnliche Objekte nicht iterierbar sind ist standardmäßig eine Iterator-Schnittstelle und muss bereitgestellt werden. Sie kann erst nach dem Erwerb der Iterator-Schnittstelle verwendet werden. Wie kann man es lösen? Lassen Sie for-of das Objekt durchqueren

🎜Der Grund ist also klar, wie kann man es lösen? Kann es eine Iterator-Schnittstelle für Objekte und andere Datentypen bereitstellen? Die Antwort lautet: Ja, solange eine Datenstruktur über dieses Attribut verfügt, wird davon ausgegangen, dass sie über eine Iterator-Schnittstelle verfügt ist wie Nach der Implementierung dieser Schnittstelle ist Folgendes die einfachste Implementierung: 🎜rrreee🎜Wenn Sie genau hinschauen, werden Sie feststellen, dass die Symbol.iterator-Schnittstelle tatsächlich eine Generatorfunktion ist. Dann kann der Code vereinfacht werden: 🎜rrreee🎜Es lohnt sich Beachten Sie, dass Object.keys zufällig gelöst wird. Wir haben das Vererbungsproblem gelöst, auf das for-in zuvor gestoßen ist. Dies entspricht unseren Erwartungen und verwendet for-of, um das Objekt zu durchlaufen, aber etwas scheint nicht zu stimmen, wenn wir das Objekt durchqueren, was wir normalerweise erwarten um Schlüssel und Wert gleichzeitig auszugeben. Der Code 🎜rrreee🎜 gibt ein Objekt wie dieses zurück, was sehr unangenehm erscheint. Können wir eine destrukturierende Zuweisung versuchen? . . 🎜rrreee🎜Das scheint perfekt zu sein. . . 🎜🎜🎜Wissen erweitern: der Unterschied zwischen for-of- und anderen Schleifen🎜🎜Ob die Schleife unterbrochen werden kann🎜🎜for🎜🎜for Die Länge🎜🎜 des Schleifenkörpers kann🎜🎜keinen Rückgabewert🎜🎜🎜forEach🎜🎜kann nur Schleife array, map , set usw. Zeichenfolgen und gewöhnliche Objekte können nicht in einer Schleife ausgeführt werden. 🎜🎜Nein kann ewig schleifen, zumindest einmal 🎜🎜 kann 🎜🎜keinen Rückgabewert🎜🎜🎜while🎜🎜Wenn bestimmte Bedingungen erfüllt sind, kann es weiter schleifen🎜🎜kann🎜🎜keinen Rückgabewert 🎜🎜🎜map🎜🎜 Es kann nur Arrays schleifen, keine Zeichenfolgen und gewöhnlichen Objekte. 🎜🎜kann nicht unterbrochen werden. Gibt ein neues Array zurück, ohne es zu beeinflussen das ursprüngliche Array🎜🎜🎜 filter🎜🎜Filtert Array-Mitglieder, nur Arrays können in einer Schleife ausgeführt werden, Zeichenfolgen, gewöhnliche Objekte können nicht in einer Schleife ausgeführt, festgelegt, zugeordnet werden🎜🎜kann nicht unterbrochen werden🎜🎜Gibt ein neues zurück Array, wirkt sich nicht auf das ursprüngliche Array aus . Es kann numerische Schlüsselnamen und andere manuell hinzugefügte Schlüssel durchlaufen, sogar Schlüssel in der Prototypenkette , nicht zyklische gewöhnliche Objekte (einheitliche Datenstrukturdurchquerung) 🎜🎜 Ja 🎜🎜 Kein Rückgabewert 🎜🎜🎜🎜🎜 [Verwandte Empfehlungen: 🎜Javascript-Video-Tutorial🎜, 🎜Web-Frontend🎜]🎜

Schleifenname	Schleifenobjekt	Gibt es einen Rückgabewert

Das obige ist der detaillierte Inhalt vonKönnen ES6 Objekte durchqueren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!