Quelle est la différence entre for…in et for…of en JS

Cet article vous présentera la différence entre for...in et for...of en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel vidéo javascript"

pour…dans et pour… La différence entre

1. Le parcours des tableaux utilise généralement une boucle for

Si vous utilisez ES5, vous pouvez utilisez également forEach, ES5 a des fonctions de parcours de tableau incluant map, filter, some, each, réduire, réduireRight, etc., mais leurs résultats de retour sont différents. Mais si vous utilisez foreach pour parcourir le tableau, vous ne pouvez pas interrompre la boucle en utilisant break, et vous ne pouvez pas revenir à la fonction externe en utilisant return.

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {
  console.log(myArray[index]);
}

2. Problèmes avec for lors du parcours des tableaux

1 L'index est un nombre de chaîne et ne peut pas être directement utilisé pour les opérations géométriques<.>

2. L'ordre de parcours peut ne pas être conforme à l'ordre interne du tableau réel

3 L'utilisation de for in parcourra toutes les propriétés énumérables du tableau, y compris les prototypes. Par exemple, la méthode prototype de Shangli et l'attribut name sont

, donc for in est plus approprié pour parcourir des objets. Ne pas utiliser for in pour parcourir des tableaux.

Donc, en plus d'utiliser une boucle for, comment pouvons-nous parcourir le tableau plus simplement et correctement pour répondre à nos attentes (c'est-à-dire sans parcourir la méthode et le nom), le for of dans ES6 est encore meilleur.

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}

Rappelez-vous que for in parcourt l'index (c'est-à-dire le nom de la clé) du tableau, tandis que for of parcourt les valeurs des éléments du tableau.

for de traverse uniquement les éléments du tableau, mais n'inclut pas la méthode d'attribut prototype et le nom d'index du tableau

3. Traversée d'objets

Le parcours d'objets utilise généralement for in pour parcourir les noms clés des objets

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
  console.log(key);
}

for in Vous pouvez accéder à la méthode prototype de myObject. Si vous ne souhaitez pas parcourir la méthode prototype et les attributs For, vous pouvez le juger à l'intérieur de la boucle. La méthode

hasOwnPropery peut juger si un certain attribut est un attribut d'instance de l'objet

for (var key in myObject) {
　　if（myObject.hasOwnProperty(key)){
　　　　console.log(key);
　　}
}

.

peut également être utilisé via Object.keys(myObject) d'ES5. Obtenez un tableau de propriétés d'instance de l'objet, à l'exclusion des méthodes et propriétés du prototype

Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}

Résumé

• for..of convient pour parcourir des collections avec des objets itérateurs tels que des nombres/objets tableau/chaînes/carte/ensemble. Cependant, il ne peut pas parcourir des objets car. il n'y a pas d'objet itérateur. Contrairement à forEach(), il peut répondre correctement aux instructions break, continue et return

• La boucle for-of ne prend pas en charge les objets ordinaires, mais si vous le souhaitez, itérer les propriétés d'un objet, vous pouvez utiliser une boucle for-in (ce qui est son travail) Ou la méthode intégrée Object.keys() :

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

• La déstructuration est adaptée lors de la traversée d'objets cartographiques, par exemple

  
  

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

• Lorsque vous ajoutez la méthode myObject.toString() à un objet, vous peut convertir l'objet en chaîne. De même, lorsque vous ajoutez la méthode myObjectSymbol.iterator à n'importe quel objet, vous pouvez parcourir cet objet.

  Par exemple, supposons que vous utilisez jQuery. Bien que vous aimiez beaucoup la méthode .each() à l'intérieur, vous souhaitez toujours que l'objet jQuery prenne également en charge les boucles for-of. Vous pouvez faire ceci :
  
  

jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

Tous les objets qui ont Symbol.iterator sont dits itérables. Dans les articles suivants, vous constaterez que le concept d'objets itérables est presque utilisé dans tout le langage, non seulement dans la boucle for-of, mais aussi dans les constructeurs Map et Set, l'affectation de déstructuration et le nouvel opérateur de propagation.

• Étapes de for...of

  La boucle or-of appelle d'abord la méthode Symbol.iterator de la collection, puis renvoie un nouvel objet itérateur. L'objet itérateur peut être n'importe quel objet avec une méthode .next() ; la boucle for-of appellera cette méthode à plusieurs reprises, une fois pour chaque boucle. Par exemple, ce code est l'itérateur le plus simple que je puisse proposer :
  
  

var zeroesForeverIterator = {
 [Symbol.iterator]: function () {
   return this;
  },
  next: function () {
  return {done: false, value: 0};
 }
};

Extended

Parcours de tableau JS :

1 Boucle for ordinaire

var arr = [1,2,0,3,9];
 for ( var i = 0; i <arr.length; i++){
    console.log(arr[i]);
}

2. la boucle

utilise des variables pour mettre en cache la longueur afin d'éviter une acquisition répétée de la longueur. L'effet d'optimisation est évident lorsque le tableau est grand

for(var j = 0,len = arr.length; j < len; j++){
    console.log(arr[j]);
}

3.forEach.

Introduite par ES5, la boucle fournie avec le tableau, sa fonction principale est de parcourir le tableau, les performances réelles sont plus faibles que for

arr.forEach(function(value,i){
　　console.log('forEach遍历:'+i+'--'+value);
})

forEach Cette méthode a également un petit défaut : vous ne pouvez pas utiliser l'instruction break. Pour interrompre la boucle, vous ne pouvez pas utiliser l'instruction return pour revenir à la fonction externe.

4.map traversal

map signifie "mapping", et son utilisation est similaire à forEach De même,

ne peut pas utiliser l'instruction break pour. interrompre la boucle. Vous ne pouvez pas non plus utiliser l'instruction return pour revenir à la fonction externe.

arr.map(function(value,index){
    console.log('map遍历:'+index+'--'+value);
});

La traversée de cartes prend en charge l'utilisation d'instructions de retour et de valeurs de retour

var temp=arr.map(function(val,index){
  console.log(val);  
  return val*val           
})
console.log(temp);

forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持

5.for-of遍历

ES6新增功能

for( let i of arr){
    console.log(i);
}

• for-of这个方法避开了for-in循环的所有缺陷

• 与forEach()不同的是，它可以正确响应break、continue和return语句 

for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。for-of循环也支持字符串遍历

JS对象遍历：

1.for-in遍历

for-in是为遍历对象而设计的，不适用于遍历数组。(遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串)

for-in循环存在缺陷：循环会遍历对象自身的和继承的可枚举属性(不含Symbol属性)

for (var index in arr){
    console.log(arr[index]);
    console.log(index);
}

2.使用Object.keys()遍历

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
     console.log(key,obj[key]);
});

3.使用Object.getOwnPropertyNames(obj)遍历

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性). 

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){
    console.log(key,obj[key]);
});

4.使用Reflect.ownKeys(obj)遍历

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.  

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){
　　console.log(key,obj[key]);
});

更多编程相关知识，请访问：编程入门！！

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!