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.
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..of
在a
的值上循环。【相关推荐: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..of
向iterable
请求一个迭代器,然后反复调用这个迭代器把它产生的值赋给循环迭代变量。那么我可以自定义一个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 = ['a', 'b', 'c']; const iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', 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 = 'FatherName'; /*for(let key in arr){ console.log('key='+key+',key.value='+arr[key]); }*/ /* arr.forEach((data) => {console.log(data);});*/ /* arr.forEach((data,index,arr) => {console.log(data+','+index+','+arr);});*/ /*for(let key of arr){ console.log(key); }*/ var string1 = 'abcdefghijklmn'; var string2 = 'opqrstuvwxyc'; 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. -
JavaScript
Zu 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, 3Native String-Werte werden umgewandelt Äquivalent Im String-gekapselten Objekt handelt es sich um ein
iterierbares
🎜🎜🎜for(XYZ of ABC)🎜
🎜🎜🎜 für XYZ
Diese 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
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 = ['a', 'b', 'c']; const iter = arr[Symbol.iterator](); iter.next() // { value: 'a', done: false } iter.next() // { value: 'b', done: false } iter.next() // { value: 'c', 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 = 'FatherName'; /*for(let key in arr){ console.log('key='+key+',key.value='+arr[key]); }*/ /* arr.forEach((data) => {console.log(data);});*/ /* arr.forEach((data,index,arr) => {console.log(data+','+index+','+arr);});*/ /*for(let key of arr){ console.log(key); }*/ var string1 = 'abcdefghijklmn'; var string2 = 'opqrstuvwxyc'; const stringArr = [string1,string2]; for(let key of stringArr){ console.log(key); } for(let key of string1){ console.log(key); } }
结果:
现在,只需记住:
- 这是最简洁、最直接的遍历数组元素的语法
- 这个方法避开了for-in循环的所有缺陷
- 与forEach()不同的是,它可以正确响应break、continue和return语句
for-in循环用来遍历对象属性。
for-of循环用来遍历数据—例如数组中的值。
它同样支持Map和Set对象遍历。
Map和Set对象是ES6中新增的类型。ES6中的Map和Set和java中并无太大出入。
Set
和Map
类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set
中,没有重复的key。
要创建一个Set
,需要提供一个Array
作为输入,或者直接创建一个空Set
:
var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重复元素在Set中自动被过滤:
var s = new Set([1, 2, 3, 3, '3']); console.log(s); // Set {1, 2, 3, "3"}
通过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 = 'abcdefghijklmn'; var string2 = 'opqrstuvwxyc'; var string3 = 'opqrstuvwxyc'; var string4 = 'opqrstuvwxyz'; const stringArr = [string1,string2,string3,string4]; var newSet = new Set(stringArr); for(let key of newSet){ console.log(key); }
结果:
Map对象稍有不同:内含的数据由键值对组成,所以你需要使用解构(destructuring)来将键值对拆解为两个独立的变量:
for (var [key, value] of phoneBookMap) { console.log(key + "'s phone number is: " + value); }
示例
var m = new Map([[1, 'Michael'], [2, 'Bob'], [3, 'Tracy']]); var map = new Map([['1','Jckey'],['2','Mike'],['3','zhengxin']]); map.set('4','Adam');//添加key-value map.set('5','Tom'); map.set('6','Jerry'); console.log(map.get('6')); map.delete('6'); console.log(map.get('6')); for(var [key,value] of map) { console.log('key='+key+' , value='+value); }
结果:
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!

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.

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.

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 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.

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.

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.

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.

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.


Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Dreamweaver CS6
Visuelle Webentwicklungstools

Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

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