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

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.

3. Traversée d'objets

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

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

Copier après la connexion

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

Copier après la connexion

• 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];

Copier après la connexion

• É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};
 }
};

Copier après la connexion

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

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

3.forEach.

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

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

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!