Was ist der Unterschied zwischen for…in und for…of in JS?

Dieser Artikel stellt Ihnen den Unterschied zwischen for...in und for...of in JavaScript vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Verwandte Empfehlungen: „Javascript-Video-Tutorial“

Der Unterschied zwischen for...in und for...of

1 Beim Durchlaufen eines Arrays wird normalerweise eine for-Schleife verwendet

ES5 Sie können forEach verwenden. ES5 hat die Funktion, Arrays wie Map, Filter, Some, Every, Reduce, ReduceRight usw. zu durchlaufen, aber ihre Rückgabeergebnisse sind unterschiedlich. Aber Wenn Sie foreach verwenden, um das Array zu durchlaufen, können Sie die Schleife nicht mit break unterbrechen und Sie können nicht mit return zur äußeren Funktion zurückkehren.

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. Probleme beim Durchlaufen von Arrays

1 Der Index ist eine Zeichenfolgenzahl und kann keine direkten geometrischen Operationen ausführen

2. Die Durchlaufreihenfolge stimmt möglicherweise nicht mit der tatsächlichen Reihenfolge überein array

3 .Die Verwendung von for in durchläuft alle aufzählbaren Eigenschaften des Arrays, einschließlich Prototypen. Zum Beispiel ist die Prototypmethode Methode und das Namensattribut von Shangli

, sodass for in besser zum Durchlaufen von Objekten geeignet ist. Verwenden Sie for in nicht zum Durchlaufen von Arrays.

Wie können wir also zusätzlich zur Verwendung einer for-Schleife das Array einfacher und korrekter durchlaufen, um unsere Erwartungen zu erfüllen (das heißt, ohne die Methode und den Namen zu durchlaufen)? Das for of in ES6 ist noch besser.

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

Denken Sie daran, dass bei „for“ der Index (d. h. der Schlüsselname) des Arrays durchlaufen wird, während bei „for“ die Werte der Array-Elemente durchlaufen werden.

for durchläuft nur die Elemente im Array, enthält jedoch nicht die Prototypattributmethode und den Indexnamen des Arrays Schlüsselnamen von Objekten

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 können zur Prototypmethode von myObject durchlaufen werden. Wenn Sie die Prototypmethode und -eigenschaften nicht durchlaufen möchten, können Sie sie innerhalb der Schleife beurteilen Eigenschaft ist eine Instanzeigenschaft des Objekts for..of eignet sich zum Durchlaufen von Zahlen/Array-Objekten/Zeichen. String/Map/Set usw. verfügen jedoch über eine Sammlung von Iteratorobjekten, da es im Gegensatz zu forEach() kein Iteratorobjekt gibt. , kann es korrekt auf Break-, Continue- und Return-Anweisungen reagieren

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

Iterieren über die Karte Destrukturierung eignet sich zum Beispiel für Objekte;

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

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

  Nach dem Login kopieren
Alle Objekte mit Symbol.iterator gelten als iterierbar. In den folgenden Artikeln werden Sie feststellen, dass das Konzept iterierbarer Objekte fast in der gesamten Sprache verwendet wird, nicht nur in der for-of-Schleife, sondern auch in den Map- und Set-Konstruktoren, der Destrukturierungszuweisung und dem neuen Spread-Operator. Die
for...of-Schritte

• 
  

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

  Nach dem Login kopieren

• 
  
  

  JS-Array-Traversal:

1. Gewöhnliche for-Schleife

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

  Nach dem Login kopieren
  
  
  2 . Optimierte Version der for-Schleife

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

Nach dem Login kopieren

forEach. Diese Methode weist auch einen kleinen Fehler auf: Sie können die Schleife weder mit der break-Anweisung noch mit der return-Anweisung unterbrechen um zur äußeren Funktion zurückzukehren.

4.map traversalmap bedeutet „Zuordnung“ und wird ähnlich wie forEach verwendet. Ebenso können Sie die Schleife nicht mit der Break-Anweisung unterbrechen und auch nicht mit der Return-Anweisung zum Äußeren zurückkehren Funktion.

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

Map Traversal unterstützt die Verwendung von Rückgabeanweisungen und Rückgabewerten

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

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

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen for…in und for…of in JS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!