suchen
HeimWeb-FrontendFront-End-Fragen und AntwortenWas sind die neuen Schleifen in es6?

Was sind die neuen Schleifen in es6?

Nov 07, 2022 pm 07:29 PM
javascriptes6循环结构循环遍历

ES6 hat eine neue Schleifenanweisung: „for of“-Schleife. Die „for..of“-Anweisung kann das gesamte Objekt durchlaufen und ist eine Schleife einer Reihe von Werten, die vom Iterator erzeugt werden. Der Wert der „for..of“-Schleife muss iterierbar (iterierbar) sein die Syntax „for(aktueller Wert des Arrays){...}“. Die for-of-Schleife unterstützt nicht nur Arrays, sondern auch die meisten Array-ähnlichen Objekte. Sie unterstützt auch das Durchlaufen von Zeichenfolgen und durchläuft Zeichenfolgen als eine Reihe von Unicode-Zeichen.

Was sind die neuen Schleifen in es6?

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

Früher gab es for-Schleifen und for-in-Schleifen, aber ES6 hat neue Schleifen: for of-Schleife: Durchlaufen (Iterieren, Schleifen) des gesamten Objekts.

for..of

ES6 fügt eine neue for..of-Schleife hinzu, bei der es sich um eine Schleife handelt, die eine Reihe von Werten im Iterator erzeugt. Der Wert der for..of-Schleife muss ein iterierbarer sein. for..of循环,在迭代器生产的一系列值的循环。for..of循环的值必须是一个iterable

var a = ["a", "b","c","d","e"]
for(var idx in a){
    console.log(idx)
}
// 0 1 2 3 4
for(var val of a){
    console.log(val)
}
// a b c d e

for..in在数组a的键/索引上循环,for..ofa的值上循环。【相关推荐:javascript视频教程web前端

<span style="font-size: 18px;">ES6</span>之前的代码

var a = ["a", "b","c","d","e"]
for(var val, ret, it = a[Symbol.iterator]();(ret=it.next()) && !ret.done){
    val = ret.value
    console.log(val)
}
// a b c d e

在底层,for..of循环向iterable请求一个迭代器,然后反复调用这个迭代器把它产生的值赋给循环迭代变量。

JavaScript默认为iterable的标准内建值包括:

  • Array
  • Strings
  • Generators
  • Collections/TypedArrays

字符串迭代方式

for(var c of "hello"){
    console.log(c)
}
// h e l l o

原生字符串值被强制类型转换到等价的String封装对象中,它是一个iterable

<span style="font-size: 18px;">for(XYZ of ABC)</span>

对于XYZ这个位置既可以是赋值表达式,也可以是声明。下面看个赋值表达式的例子:

var o = {}
for(o.a of [1,2,3]){
    console.log(o.a)
}
o // {a:3}
for({x:o.a} of [{x:1},{x:2},{x:3}]){
    console.log(o.a)
}
o // {a:3}

通过break,continue,return提前终止循环。

自定义迭代器

通过对底层的了解,for..ofiterable请求一个迭代器,然后反复调用这个迭代器把它产生的值赋给循环迭代变量。那么我可以自定义一个iterable

var o = {
    [Symbol.iterator](){
        return this
    },
    next(){
        if(!val){
            val = 1
        }else{
            val ++
        }
        return {value:val, done:val== 6}
    }
}
for(var val of o[Symbol.iterator]()){
    console.log(val)
}

由此可见,自定义迭代器满足两个条件,[Symbol.iterator]属性,返回的对象中有next方法,next方法返回值必须是{value:xx,done:xx}的形式,如果遇到done:true

const arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
const iter = arr[Symbol.iterator]();
 
iter.next() // { value: &#39;a&#39;, done: false }
iter.next() // { value: &#39;b&#39;, done: false }
iter.next() // { value: &#39;c&#39;, done: false }
iter.next() // { value: undefined, done: true }

for..in durchläuft Schlüssel/Indizes des Arrays a, for..of auf a > Durchläuft den Wert. [Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

ES6Vorheriger Code

window.onload=function(){ 
   const arr = [55,00, 11, 22];
   arr.name = "hello";
  // Array.prototype.FatherName = &#39;FatherName&#39;;
   /*for(let key in arr){
    console.log(&#39;key=&#39;+key+&#39;,key.value=&#39;+arr[key]);
   }*/
   /* arr.forEach((data) => {console.log(data);});*/
  /* arr.forEach((data,index,arr) => {console.log(data+&#39;,&#39;+index+&#39;,&#39;+arr);});*/
  /*for(let key of arr){
    console.log(key);
  }*/
  var string1 = &#39;abcdefghijklmn&#39;;
  var string2 = &#39;opqrstuvwxyc&#39;;
  const stringArr = [string1,string2];
  for(let key of stringArr){
    console.log(key);
  }
  for(let key of string1){
    console.log(key);
  }
}
  • Unten fordert die for..of-Schleife einen Iterator von iterable an und ruft diesen Iterator dann wiederholt auf, um ihn zu generieren Der Wert wird der Schleifeniterationsvariablen zugewiesen.
  • JavaScriptZu den integrierten Standardwerten, die standardmäßig iterierbar sind, gehören:

Array

Strings
  • Generatoren code>
  • Collections/TypedArrays
  • String-Iterationsmethode

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
Native String-Werte werden umgewandelt Äquivalent Im String-gekapselten Objekt handelt es sich um ein iterierbares🎜

🎜🎜for(XYZ of ABC)🎜🎜🎜🎜 für XYZDiese Position kann entweder ein Zuweisungsausdruck oder eine Anweisung sein. Schauen wir uns ein Beispiel für einen Zuweisungsausdruck an: 🎜
var s = new Set([1, 2, 3, 3, '3']);
console.log(s); // Set {1, 2, 3, "3"}
🎜 Beenden Sie die Schleife vorzeitig durch break, continue, return. 🎜

🎜🎜Benutzerdefinierter Iterator🎜🎜🎜🎜Durch das Verständnis der zugrunde liegenden Ebene können for..of Anfragen an iterable Ein Iterator gestellt werden , und rufen Sie diesen Iterator dann wiederholt auf, um den von ihm erzeugten Wert der Schleifeniterationsvariablen zuzuweisen. Dann kann ich einen iterierbaren anpassen. 🎜
var s = new Set([1, 2, 3]);
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // Set {1, 2, 3, 4}
🎜Es ist ersichtlich, dass der benutzerdefinierte Iterator zwei Bedingungen erfüllt, das Attribut [Symbol.iterator] und das zurückgegebene Objekt die Methode next hat, next Der Rückgabewert der Methode muss die Form {value:xx,done:xx haben. Wenn done:true auftritt, endet die Schleife . 🎜🎜Fazit: Das Obige ist der gesamte Inhalt der for..of-Schleife, die iterierbare Objekte schleifen kann. 🎜🎜🎜Wissen erweitern: Warum wird for-of eingeführt? 🎜🎜🎜Um diese Frage zu beantworten, werfen wir zunächst einen Blick auf die Mängel der drei for-Schleifen vor ES6: 🎜🎜🎜forEach kann nicht unterbrochen und zurückgegeben werden; 🎜🎜for-in weist nicht nur offensichtliche Mängel auf Im Array werden auch benutzerdefinierte Eigenschaften durchlaufen, und es wird sogar auf Eigenschaften in der Prototypenkette zugegriffen. Außerdem kann die Reihenfolge, in der Array-Elemente durchlaufen werden, zufällig sein. 🎜🎜🎜Angesichts der oben genannten Mängel müssen wir also die ursprüngliche for-Schleife verbessern. Aber ES6 wird den von Ihnen geschriebenen JS-Code nicht beschädigen. Heutzutage sind Tausende von Websites auf For-In-Schleifen angewiesen, und einige von ihnen verwenden sie sogar zum Durchlaufen von Arrays. Das Hinzufügen von Array-Traversal-Unterstützung durch das Korrigieren von for-in-Schleifen würde dies noch verwirrender machen, daher hat das Standardskomitee eine neue Schleifensyntax in ES6 hinzugefügt, um das aktuelle Problem zu lösen, for-of . 🎜🎜Was genau kann man also tun? 🎜🎜🎜Im Vergleich zu forEach kann es korrekt auf Unterbrechung, Fortsetzung und Rückkehr reagieren. 🎜🎜for-of-Schleife unterstützt nicht nur Arrays, sondern auch die meisten Array-ähnlichen Objekte, wie z. B. DOM-Nodelist-Objekte. 🎜🎜Die for-of-Schleife unterstützt auch den String-Traversal, der den String als eine Reihe von Unicode-Zeichen durchläuft. 🎜🎜for-of unterstützt auch die Objektdurchquerung von Map und Set (beides neue Typen in ES6). 🎜🎜🎜Zusammenfassend weist die For-Of-Schleife die folgenden Eigenschaften auf: 🎜
  • 这是最简洁、最直接的遍历数组元素的语法。
  • 这个方法避开了 for-in 循环的所有缺陷。
  • 与 forEach 不同的是,它可以正确响应 break、continue 和 return 语句。
  • 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。

但需要注意的是,for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用
for-in 循环(这也是它的本职工作)。

最后要说的是,ES6 引进的另一个方式也能实现遍历数组的值,那就是 Iterator。上个例子:

const arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;];
const iter = arr[Symbol.iterator]();
 
iter.next() // { value: &#39;a&#39;, done: false }
iter.next() // { value: &#39;b&#39;, done: false }
iter.next() // { value: &#39;c&#39;, done: false }
iter.next() // { value: undefined, done: true }

前面的不多说,重点描述for-of

for-of循环不仅支持数组,还支持大多数类数组对象,例如DOM NodeList对象

for-of循环也支持字符串遍历,它将字符串视为一系列的Unicode字符来进行遍历:

window.onload=function(){ 
   const arr = [55,00, 11, 22];
   arr.name = "hello";
  // Array.prototype.FatherName = &#39;FatherName&#39;;
   /*for(let key in arr){
    console.log(&#39;key=&#39;+key+&#39;,key.value=&#39;+arr[key]);
   }*/
   /* arr.forEach((data) => {console.log(data);});*/
  /* arr.forEach((data,index,arr) => {console.log(data+&#39;,&#39;+index+&#39;,&#39;+arr);});*/
  /*for(let key of arr){
    console.log(key);
  }*/
  var string1 = &#39;abcdefghijklmn&#39;;
  var string2 = &#39;opqrstuvwxyc&#39;;
  const stringArr = [string1,string2];
  for(let key of stringArr){
    console.log(key);
  }
  for(let key of string1){
    console.log(key);
  }
}

结果:

Was sind die neuen Schleifen in es6?

现在,只需记住:

  • 这是最简洁、最直接的遍历数组元素的语法
  • 这个方法避开了for-in循环的所有缺陷
  • 与forEach()不同的是,它可以正确响应break、continue和return语句

for-in循环用来遍历对象属性。

for-of循环用来遍历数据—例如数组中的值。

它同样支持Map和Set对象遍历。

Map和Set对象是ES6中新增的类型。ES6中的Map和Set和java中并无太大出入。

SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。

要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

Was sind die neuen Schleifen in es6?

重复元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
console.log(s); // Set {1, 2, 3, "3"}

Was sind die neuen Schleifen in es6?

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

var s = new Set([1, 2, 3]);
s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

Set对象可以自动排除重复项

var string1 = &#39;abcdefghijklmn&#39;;
  var string2 = &#39;opqrstuvwxyc&#39;;
  var string3 = &#39;opqrstuvwxyc&#39;;
  var string4 = &#39;opqrstuvwxyz&#39;;
 
  const stringArr = [string1,string2,string3,string4];
 
 
 var newSet = new Set(stringArr);
  for(let key of newSet){
    console.log(key);
  }

结果:

Was sind die neuen Schleifen in es6?

Map对象稍有不同:内含的数据由键值对组成,所以你需要使用解构(destructuring)来将键值对拆解为两个独立的变量:

for (var [key, value] of phoneBookMap) {   
console.log(key + "&#39;s phone number is: " + value);
}

 示例

var m = new Map([[1, &#39;Michael&#39;], [2, &#39;Bob&#39;], [3, &#39;Tracy&#39;]]);
  var map = new Map([[&#39;1&#39;,&#39;Jckey&#39;],[&#39;2&#39;,&#39;Mike&#39;],[&#39;3&#39;,&#39;zhengxin&#39;]]);
  map.set(&#39;4&#39;,&#39;Adam&#39;);//添加key-value
  map.set(&#39;5&#39;,&#39;Tom&#39;);
  map.set(&#39;6&#39;,&#39;Jerry&#39;);
  console.log(map.get(&#39;6&#39;));
  map.delete(&#39;6&#39;);
   console.log(map.get(&#39;6&#39;));
  for(var [key,value] of map) {
    console.log(&#39;key=&#39;+key+&#39; , value=&#39;+value);
  }

结果:

Was sind die neuen Schleifen in es6?

Das obige ist der detaillierte Inhalt vonWas sind die neuen Schleifen in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
React: Die Kraft einer JavaScript -Bibliothek für die WebentwicklungReact: Die Kraft einer JavaScript -Bibliothek für die WebentwicklungApr 18, 2025 am 12:25 AM

React ist eine von Meta entwickelte JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen, wobei der Kern die Komponentenentwicklung und die virtuelle Dom -Technologie ist. 1. Komponenten und Staatsmanagement: React verwaltet den Zustand durch Komponenten (Funktionen oder Klassen) und Hooks (wie Usestate), wodurch die Wiederverwendbarkeit und Wartung von Code verbessert wird. 2. Virtuelle DOM- und Leistungsoptimierung: Reagieren Sie durch virtuelles DOM effizient die reale DOM, um die Leistung zu verbessern. 3. Lebenszyklus und Haken: Hooks (wie die Verwendung von UseEffect) ermöglichen Funktionskomponenten, Lebenszyklen zu verwalten und Nebeneffektoperationen durchzuführen. V.

Reacts Ökosystem: Bibliotheken, Tools und Best PracticesReacts Ökosystem: Bibliotheken, Tools und Best PracticesApr 18, 2025 am 12:23 AM

Das React-Ökosystem umfasst staatliche Verwaltungsbibliotheken (z. B. Redux), Routing-Bibliotheken (z. B. Reactrouter), UI-Komponentenbibliotheken (wie Material-UI), Testwerkzeuge (wie Scherz) und Erstellung von Tools (z. B. Webpack). Diese Tools arbeiten zusammen, um Entwicklern dabei zu helfen, Anwendungen effizient zu entwickeln und zu pflegen, und die Effizienz der Code zu verbessern.

Reagieren und Frontendentwicklung: Ein umfassender ÜberblickReagieren und Frontendentwicklung: Ein umfassender ÜberblickApr 18, 2025 am 12:23 AM

React ist eine von Facebook entwickelte JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen. 1. Es wird komponentierte und virtuelle DOM -Technologie verwendet, um die Effizienz und Leistung der UI -Entwicklung zu verbessern. 2. Die Kernkonzepte von React umfassen Komponentierungen, Staatsmanagement (wie Usestate und UseEffect) und das Arbeitsprinzip des virtuellen DOM. 3. In praktischen Anwendungen unterstützt React von der grundlegenden Komponentenwiedergabe bis hin zur erweiterten asynchronen Datenverarbeitung. 4. Häufige Fehler wie das Vergessen, Schlüsselattribute oder falsche Statusaktualisierungen hinzuzufügen, können durch ReactDevtools und Protokolle debuggen werden. 5. Leistungsoptimierung und Best Practices umfassen die Verwendung von React.MEMO, Code -Segmentierung und Halten des Codes und die Aufrechterhaltung der Zuverlässigkeit

Die Kraft des Reagierens in HTML: Moderne WebentwicklungDie Kraft des Reagierens in HTML: Moderne WebentwicklungApr 18, 2025 am 12:22 AM

Die Anwendung von React in HTML verbessert die Effizienz und Flexibilität der Webentwicklung durch Komponentierungen und virtuelles DOM. 1) Die Reaktion der Komponentierung Die Idee unterteilt die Benutzeroberfläche in wiederverwendbare Einheiten, um das Management zu vereinfachen. 2) Virtuelle DOM -Optimierungsleistung, minimieren Sie DOM -Operationen durch Differungsalgorithmus. 3) Die JSX -Syntax ermöglicht das Schreiben von HTML in JavaScript, um die Entwicklungseffizienz zu verbessern. 4) Verwenden Sie den Usestate -Hook, um den Status zu verwalten und dynamische Inhaltsaktualisierungen zu realisieren. 5) Optimierungsstrategien umfassen die Verwendung von React.Memo und Usecallback, um unnötiges Rendern zu verringern.

Das Verständnis der Hauptfunktion von React: Die Frontend -PerspektiveDas Verständnis der Hauptfunktion von React: Die Frontend -PerspektiveApr 18, 2025 am 12:15 AM

Zu den Hauptfunktionen von React gehören komponentiertes Denken, Staatsmanagement und virtuelles DOM. 1) Die Idee der Komponentierung ermöglicht es, die Benutzeroberfläche in wiederverwendbare Teile aufzuteilen, um die Lesbarkeit und Wartbarkeit der Code zu verbessern. 2) Das staatliche Management verwaltet dynamische Daten durch Status und Requisiten und ändert sich auslösen UI -Updates. 3) Aktualisieren Sie die Benutzeroberfläche virtuelle DOM -Optimierungsleistung durch die Berechnung des Mindestbetriebs der DOM -Replik im Speicher.

Frontend -Entwicklung mit Reaktionen: Vorteile und TechnikenFrontend -Entwicklung mit Reaktionen: Vorteile und TechnikenApr 17, 2025 am 12:25 AM

Die Vorteile von React sind seine Flexibilität und Effizienz, die sich in: 1) basierendem Design widerspiegeln, verbessert die Wiederverwendbarkeit des Codes. 2) Virtual DOM -Technologie optimiert die Leistung, insbesondere beim Umgang mit großen Mengen an Datenaktualisierungen. 3) Das reiche Ökosystem bietet eine große Anzahl von Bibliotheken und Tools von Drittanbietern. Wenn Sie verstehen, wie React Beispiele funktioniert und verwendet, können Sie seine Kernkonzepte und Best Practices beherrschen, um eine effiziente, wartbare Benutzeroberfläche zu erstellen.

Reagieren Sie gegen andere Frameworks: Vergleichen und KontrastoptionenReagieren Sie gegen andere Frameworks: Vergleichen und KontrastoptionenApr 17, 2025 am 12:23 AM

React ist eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen, die für große und komplexe Anwendungen geeignet sind. 1. Der Kern von React ist Komponentierung und virtuelles DOM, wodurch die UI -Rendering -Leistung verbessert wird. 2. Im Vergleich zu VUE ist React flexibler, hat aber eine steile Lernkurve, die für große Projekte geeignet ist. 3. Im Vergleich zum Angular ist React leichter, hängt von der Gemeinschaftsökologie ab und geeignet für Projekte, die Flexibilität erfordern.

Entmystifizierende Reaktionen in HTML: Wie alles funktioniertEntmystifizierende Reaktionen in HTML: Wie alles funktioniertApr 17, 2025 am 12:21 AM

React arbeitet in HTML über virtuelles DOM. 1) React verwendet die JSX-Syntax, um HTML-ähnliche Strukturen zu schreiben. 2) Virtual DOM -Management -UI -Update, effizientes Rendering durch Differungsalgorithmus. 3) Verwenden Sie Reactdom.render (), um die Komponente zum realen DOM zu rendern. 4) Optimierung und Best Practices umfassen die Verwendung von React.MEMO und Komponentenaufteilung zur Verbesserung der Leistung und Wartbarkeit.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software