Quelles sont les nouvelles boucles dans es6 ?

ES6 a une nouvelle instruction de boucle : la boucle "for of". L'instruction "for..of" peut parcourir l'objet entier et est une boucle d'une série de valeurs produites par l'itérateur ; la valeur de la boucle "for..of" doit être un itérable (itérable), et la syntaxe "pour (valeur actuelle du tableau){...}". La boucle for-of prend non seulement en charge les tableaux, mais prend également en charge la plupart des objets de type tableau ; elle prend également en charge le parcours de chaînes et traverse les chaînes sous la forme d'une série de caractères Unicode.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Dans le passé, il y avait des boucles for et des boucles for in ; mais ES6 a de nouvelles boucles : for of loop : parcourir (itérer, boucler) l'objet entier.

for..of

ES6 ajoute une nouvelle boucle for..of, qui est une boucle qui produit une série de valeurs​​dans l'itérateur. La valeur de la boucle for..of doit être un itérable. 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 boucle sur les clés/index du tableau a, for..of sur a > Boucle sur la valeur. [Recommandations associées : tutoriel vidéo javascript, interface Web]

< code >

ES6Code précédent

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

• En bas, la boucle for..of demande un itérateur à iterable, puis appelle à plusieurs reprises cet itérateur pour le générer La valeur est affectée à la variable d'itération de boucle.
JavaScriptLes valeurs intégrées standard qui sont par défaut itérables incluent :

Array

Strings

• Générateurs</ code></li><li><code>Collections/TypedArrays
• Méthode d'itération de chaîne

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

Les valeurs de chaîne natives sont converties en équivalent Dans l'objet encapsulé String, c'est un itérable🎜

🎜🎜for(XYZ of ABC)🎜🎜🎜🎜 pour XYZCette position peut être soit une expression d'affectation, soit une instruction. Regardons un exemple d'expression d'affectation : 🎜

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

🎜 Terminez la boucle plus tôt via break, continue, return. 🎜

🎜🎜Itérateur personnalisé🎜🎜🎜🎜Grâce à la compréhension de la couche sous-jacente, for..of demande à iterable An itérateur, puis appelez cet itérateur à plusieurs reprises pour attribuer la valeur qu'il produit à la variable d'itération de boucle. Ensuite, je peux personnaliser un itérable. 🎜

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}

🎜On peut voir que l'itérateur personnalisé satisfait à deux conditions, l'attribut [Symbol.iterator], et que l'objet renvoyé a la méthode next, next < /code>La valeur de retour de la méthode doit être sous la forme <code>{value:xx,done:xx> Si done:true est rencontré, la boucle se termine. . 🎜🎜Conclusion : ce qui précède représente tout le contenu de la boucle for..of, qui peut boucler des objets itérables. 🎜🎜🎜Développer les connaissances : pourquoi le for-of est-il introduit ? 🎜🎜🎜Pour répondre à cette question, jetons d'abord un coup d'œil aux défauts des trois boucles for avant ES6 : 🎜🎜🎜forEach ne peut pas se casser et revenir ; 🎜🎜for-in a des défauts plus évidents. le tableau, les propriétés personnalisées seront également parcourues et même les propriétés de la chaîne de prototypes seront accessibles. De plus, l'ordre dans lequel les éléments du tableau sont parcourus peut être aléatoire. 🎜🎜🎜Donc, compte tenu des défauts ci-dessus, nous devons améliorer la boucle for originale. Mais ES6 ne cassera pas le code JS que vous avez écrit. Aujourd'hui, des milliers de sites Web s'appuient sur des boucles for-in, et certains d'entre eux les utilisent même pour parcourir des tableaux. L'ajout de la prise en charge de la traversée de tableau en corrigeant les boucles for-in rendrait cela encore plus déroutant, c'est pourquoi le comité des normes a ajouté une nouvelle syntaxe de boucle dans ES6 pour résoudre le problème actuel, for-of . 🎜🎜Alors, que peut faire exactement for-of ? 🎜🎜🎜Par rapport à forEach, il peut répondre pour interrompre, continuer, revenir correctement. La boucle 🎜🎜for-of prend en charge non seulement les tableaux, mais également la plupart des objets de type tableau, tels que les objets de liste de nœuds DOM. 🎜🎜La boucle for-of prend également en charge le parcours de chaîne, qui traverse la chaîne comme une série de caractères Unicode. 🎜🎜for-of prend également en charge la traversée d'objets Map et Set (deux nouveaux types dans ES6). 🎜🎜🎜Pour résumer, la boucle for-of présente les caractéristiques suivantes : 🎜

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

结果:

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!