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. Butif you use foreach to traverse the array, you cannot interrupt the loop using break, and you cannot return to the outer functionusing 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

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

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

Extension

JS array traversal:

1. Ordinary for loop

var arr = [1,2,0,3,9]; for ( var i = 0; i 
        

         Copy after login
        
       

2. Optimization Version of the for loop

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

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

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!