What is the difference between for…in and for…of in JS

This article will introduce to you the difference between for...in and for...of in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "javascript video tutorial"

for…in and for… The difference of

#1. Traversing an array usually uses a for loop

If you have ES5, you can also use forEach, ES5 has Array traversal functions include map, filter, some, every, reduce, reduceRight, etc., but their return results are different. But if you use foreach to traverse the array, you cannot interrupt the loop using break, and you cannot return to the outer function using 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. Problems with for in traversing arrays

1.index is a string number and cannot be directly used for geometric operations

2. The traversal order may not be according to the internal order of the actual array

3. Using for in will traverse all enumerable properties of the array, including the prototype. For example, Shangli's prototype method method and name attribute are

, so for in is more suitable for traversing objects. Do not use for in to traverse arrays.

In addition to using a for loop, how can we traverse the array more simply and correctly to achieve our expectations (that is, without traversing method and name), the for of in ES6 is even better.

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

Remember, for in traverses the index (i.e. key name) of the array, while for of traverses the array element values.

for of only traverses the elements in the array, not including the prototype attribute method and index name of the array

##3, Traversing objects

Traversing objects usually uses for in to traverse the key names of objects

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 can traverse to the prototype method method of myObject. If you don’t want to traverse the prototype method and For attributes, you can judge it inside the loop. The

hasOwnPropery method can determine whether a property is an instance property of the object.

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

It can also be done through ES5's Object.keys(myObject) Gets an array of instance properties of an object, excluding prototype methods and properties

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

Summary

• for..of is suitable for traversing collections with iterator objects such as numbers/array objects/strings/map/set. However, it cannot traverse objects because there is no iterator object. Unlike forEach(), it can correctly respond to break, continue and return statements

• The for-of loop does not support ordinary objects, but if you want to iterate the properties of an object, you can use a for-in loop (which is its job) Or the built-in Object.keys() method:

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

• It is suitable to use destructuring when traversing the map object, for example;

  
  

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

• When you add the myObject.toString() method to an object, you can convert the object into a string. Similarly, when you add the myObjectSymbol.iterator method to any object, you can Traverse this object.

  For example, suppose you are using jQuery. Although you are very fond of the .each() method inside, you still want the jQuery object to also support for-of loops. You can do this:
  
  

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

All objects that have Symbol.iterator are called iterable. In the following articles, you will find that the concept of iterable objects is used almost throughout the entire language, not only the for-of loop, but also the Map and Set constructors, destructuring assignment, and the new spread operator.

• Steps of for...of

  The or-of loop first calls the Symbol.iterator method of the collection, and then returns a new iterator object. The iterator object can be any object with a .next() method; the for-of loop will call this method repeatedly, once for each loop. For example, this code is the simplest iterator I can come up with:
  
  

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

Extension

JS array traversal:

1. Ordinary for loop

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

2. Optimization Version of the for loop

Use variables to cache the length to avoid repeated acquisition of the length. When the array is large, the optimization effect is obvious

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

3.forEach

Introduced by ES5, the loop that comes with the array has its main function of traversing the array. Its actual performance is weaker than for.

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

forEach method also has a small flaw: you cannot use the break statement. To interrupt the loop, you cannot use the return statement to return to the outer function.

4.map traversal

map means "mapping" and its usage is similar to forEach. Likewise,

the break statement cannot be used to interrupt the loop. Nor can you use the return statement to return to the outer function.

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

Map traversal supports the use of return statements and return values

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

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

The above is the detailed content of What is the difference between for…in and for…of in JS. For more information, please follow other related articles on the PHP Chinese website!