Was sind die ähnlichen for-Schleifen in es6?
Ähnlich wie bei for-Schleifen in es6 gibt es: 1. „for-in“-Schleife, die Objekte, die sie durchläuft, sind nicht auf Arrays beschränkt, sondern können auch Objekte durchqueren, die Syntax lautet „for (Schlüsselname im Objekt) {...“ }“; 2. ForEach-Schleife, führen Sie die Rückruffunktion einmal für jedes Element im Array aus, das einen gültigen Wert enthält. Die Syntax lautet „array.forEach(callback function, thisValue)“; 3. „for-of“-Schleife, die Die Syntax lautet „for(aktueller Wert des Arrays){...}“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.
ECMAScript6 (kurz ES6) unterstützt 4 Arten von for-Schleifen.
Einfache for-Schleife
for-in
forEach
for-of
Werfen wir einen Blick auf diese 4 Arten von for-Schleifen.
Einfache for-Schleife
Werfen wir einen Blick auf die gebräuchlichste Schreibmethode:
const arr = [1, 2, 3]; for(let i = 0; i < arr.length; i++) { console.log(arr[i]); }
Wenn sich die Länge des Arrays während der Schleife nicht ändert, sollten wir die Länge des Arrays in einer Variablen speichern . Dadurch wird eine bessere Effizienz erreicht:
for-in
Normalerweise können wir for-in verwenden, um den Inhalt des Arrays zu durchlaufen :const arr = [1, 2, 3]; for(let i = 0, len = arr.length; i < len; i++) { console.log(arr[i]); }
for-in
for-in-Schleife durchläuft die Eigenschaften des Objekts, nicht den Index des Arrays. Daher sind die von for-in durchlaufenen Objekte nicht auf Arrays beschränkt, sondern können auch Objekte durchlaufen. Ein Beispiel lautet wie folgt:const arr = [1, 2, 3]; let index; for(index in arr) { console.log("arr[" + index + "] = " + arr[index]); }
Die Wahrheit über Array
Array ist ein Objekt in Javascript und der Index von Array ist der Eigenschaftsname. Tatsächlich ist „Array“ in Javascript etwas irreführend. Erstens ist Array in Javascript im Speicher nicht kontinuierlich. Zweitens bezieht sich der Index von Array nicht auf den Offset. Tatsächlich ist der Index des Arrays nicht vom Typ „Zahl“, sondern vom Typ „String“. Der Grund, warum wir arr[0] korrekt verwenden können, liegt darin, dass die Sprache automatisch 0 vom Typ „Zahl“ in „0“ vom Typ „String“ konvertieren kann. Deshalb gibt es in Javascript nie Array-Indizes, sondern nur Eigenschaften wie „0“, „1“ usw. Interessanterweise verfügt jedes Array-Objekt über eine Längeneigenschaft, wodurch es sich eher wie Arrays in anderen Sprachen verhält. Aber warum wird das Längenattribut beim Durchlaufen des Array-Objekts nicht ausgegeben? Das liegt daran, dass for-in nur über „aufzählbare Eigenschaften“ iterieren kann, die Länge eine nicht aufzählbare Eigenschaft ist und Array-Objekte tatsächlich viele andere nicht aufzählbare Eigenschaften haben. Lassen Sie uns nun zurückgehen und uns das Beispiel der Verwendung von for-in zur Schleife eines Arrays ansehen:const person = { fname: "san", lname: "zhang", age: 99 }; let info; for(info in person) { console.log("person[" + info + "] = " + person[info]); }
const arr = [1, 2, 3]; arr.name = "Hello world"; let index; for(index in arr) { console.log("arr[" + index + "] = " + arr[index]); }
Array.prototype.fatherName = "Father"; const arr = [1, 2, 3]; arr.name = "Hello world"; let index; for(index in arr) { console.log("arr[" + index + "] = " + arr[index]); }
let key; const arr = []; arr[0] = "a"; arr[100] = "b"; arr[10000] = "c"; for(key in arr) { if(arr.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294 ) { console.log(arr[key]); } }
for-in 只会遍历存在的实体,上面的例子中, for-in 遍历了3次(遍历属性分别为”0″、 “100″、 “10000″的元素,普通 for 循环则会遍历 10001 次)。所以,只要处理得当, for-in 在遍历 Array 中元素也能发挥巨大作用。
为了避免重复劳动,我们可以包装一下上面的代码:
function arrayHasOwnIndex(array, prop) { return array.hasOwnProperty(prop) && /^0$|^[1-9]\d*$/.test(prop) && prop <= 4294967294; // 2^32 - 2 }
使用示例如下:
for (let key in arr) { if (arrayHasOwnIndex(arr, key)) { console.log(arr[key]); } }
for-in 性能
正如上面所说,每次迭代操作会同时搜索实例或者原型属性, for-in 循环的每次迭代都会产生更多开销,因此要比其他循环类型慢,一般速度为其他类型循环的 1/7。因此,除非明确需要迭代一个属性数量未知的对象,否则应避免使用 for-in 循环。如果需要遍历一个数量有限的已知属性列表,使用其他循环会更快,比如下面的例子:
const obj = { "prop1": "value1", "prop2": "value2" }; const props = ["prop1", "prop2"]; for(let i = 0; i < props.length; i++) { console.log(obj[props[i]]); }
上面代码中,将对象的属性都存入一个数组中,相对于 for-in 查找每一个属性,该代码只关注给定的属性,节省了循环的开销和时间。
forEach
在 ES5 中,引入了新的循环,即 forEach 循环。
const arr = [1, 2, 3]; arr.forEach((data) => { console.log(data); });
运行结果:
1 2 3
forEach 方法为数组中含有有效值的每一项执行一次 callback 函数,那些已删除(使用 delete 方法等情况)或者从未赋值的项将被跳过(不包括那些值为 undefined 或 null 的项)。 callback 函数会被依次传入三个参数:
- 数组当前项的值;
- 数组当前项的索引;
- 数组对象本身;
需要注意的是,forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。
const arr = []; arr[0] = "a"; arr[3] = "b"; arr[10] = "c"; arr.name = "Hello world"; arr.forEach((data, index, array) => { console.log(data, index, array); });
运行结果:
a 0 ["a", 3: "b", 10: "c", name: "Hello world"] b 3 ["a", 3: "b", 10: "c", name: "Hello world"] c 10 ["a", 3: "b", 10: "c", name: "Hello world"]
这里的 index 是 Number 类型,并且也不会像 for-in 一样遍历原型链上的属性。
所以,使用 forEach 时,我们不需要专门地声明 index 和遍历的元素,因为这些都作为回调函数的参数。
另外,forEach 将会遍历数组中的所有元素,但是 ES5 定义了一些其他有用的方法,下面是一部分:
- every: 循环在第一次 return false 后返回
- some: 循环在第一次 return true 后返回
- filter: 返回一个新的数组,该数组内的元素满足回调函数
- map: 将原数组中的元素处理后再返回
- reduce: 对数组中的元素依次处理,将上次处理结果作为下次处理的输入,最后得到最终结果。
forEach 性能
大家可以看 jsPerf ,在不同浏览器下测试的结果都是 forEach 的速度不如 for。如果大家把测试代码放在控制台的话,可能会得到不一样的结果,主要原因是控制台的执行环境与真实的代码执行环境有所区别。
for-of
先来看个例子:
const arr = ['a', 'b', 'c']; for(let data of arr) { console.log(data); }
运行结果是:
a b c
为什么要引进 for-of?
要回答这个问题,我们先来看看ES6之前的 3 种 for 循环有什么缺陷:
- forEach 不能 break 和 return;
- for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。
所以,鉴于以上种种缺陷,我们需要改进原先的 for 循环。但 ES6 不会破坏你已经写好的 JS 代码。目前,成千上万的 Web 网站依赖 for-in 循环,其中一些网站甚至将其用于数组遍历。如果想通过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱,因此,标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题,即 for-of 。
那 for-of 到底可以干什么呢?
- 跟 forEach 相比,可以正确响应 break, continue, return。
- for-of 循环不仅支持数组,还支持大多数类数组对象,例如 DOM nodelist 对象。
- for-of 循环也支持字符串遍历,它将字符串视为一系列 Unicode 字符来进行遍历。
- for-of 也支持 Map 和 Set (两者均为 ES6 中新增的类型)对象遍历。
总结一下,for-of 循环有以下几个特征:
- 这是最简洁、最直接的遍历数组元素的语法。
- 这个方法避开了 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); }
结果:
【相关推荐:javascript视频教程、编程视频】
Das obige ist der detaillierte Inhalt vonWas sind die ähnlichen for-Schleifen in es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

Verwendung: In JavaScript wird die Methode insertBefore() verwendet, um einen neuen Knoten in den DOM-Baum einzufügen. Diese Methode erfordert zwei Parameter: den neuen Knoten, der eingefügt werden soll, und den Referenzknoten (d. h. den Knoten, an dem der neue Knoten eingefügt wird).
