Was sind die neuen Schleifen in es6?

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 }

< Code >

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.
JavaScriptZu den integrierten Standardwerten, die standardmäßig iterierbar sind, gehören:

• Generatoren</ code></li><li><code>Collections/TypedArrays
• String-Iterationsmethode

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

🎜🎜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"}

Nach dem Login kopieren

Nach dem Login kopieren

🎜 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}

Nach dem Login kopieren

Nach dem Login kopieren

🎜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 }

Nach dem Login kopieren

Nach dem Login kopieren

前面的不多说,重点描述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);
  }
}

Nach dem Login kopieren

Nach dem Login kopieren

结果：

现在，只需记住：

• 这是最简洁、最直接的遍历数组元素的语法
• 这个方法避开了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

Nach dem Login kopieren

Nach dem Login kopieren

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

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

Nach dem Login kopieren

Nach dem Login kopieren

通过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}

Nach dem Login kopieren

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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);
  }

Nach dem Login kopieren

结果:

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

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

Nach dem Login kopieren

示例

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);
  }

Nach dem Login kopieren

结果:

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!