for ... in, for ... of, forEach () What is the difference

This article was originally Links: https://cloud.tencent.com/developer/article/1360074

for of loop and for in

Loop through the array, you still use forstatements with anything yet?

I have that forwith anything, and finally found himself dug ourselves a huge hole, layers of nested loops, the total spend a lot of time to clear all kinds of logical relationships stroke, easily confused logic. Finally you have painstakingly stroke clear of the logic to achieve functional requirements. But this time a flood of questions come up? Performance, scalability, reusability .... and so on, co-author I went to great lengths in vain. This time a nose a tear, full of bitterness;

Very little use later on forreplaced APIand ES6some of the new features

Array for of

When it comes to recycling we can easily think of for in, but we should know that he is more suited to traverse the object instead of an array, it was said that he was to traverse ordinary objects and design.

the reason:

for in Traversing random array is traversed in a certain order.

for in Through the array index when possible to get a string index instead of a numeric index, and we want to traverse the array is a numeric index to traverse (in addition to the associative array)

for ... inDue to circulation problems left over by history, it's actually a property of traversing the object's name. A Arrayarray is actually an object, each element of the index it is considered an attribute.

We are also very easy to think of cycling forEach()method

• Array.prototype.forEach (): function method is performed for each element of the array once provided.

        array.forEach(callback(currentValue, index, array){ //do something }, this) 复制代码

parameter

callback: For each array element performs a function, the function takes three parameters:

currentValue(Current value): The current element in the array being processed.

index(索引): Index of the current element in the array being processed.

array: forEach()Array method is operating.

thisArgOptional: Optional. C used when performing the callback function thisvalue (reference object).

Returns: undefinedlimitations: You can not breakbreak the cycle, you can not use the returnstatement to return to the outer function

Now I imagine you recommend for ... of the cycle, your best choice

for ofThrough the array should be the best choice, the most simple, the most direct through the array syntax elements can be used break, continueand returnstatements, but he avoided the for indefects of cycle

for-ofCirculation not only supports arrays, also supports most class array of objects, for-ofloop also supports the string traversal.

We can put the illusion into a string array, an array of strings and some methods have, it also supports Mapand Setobjects traverse. There in a nutshell is the iterator methods can be used for ofloop (if you do not know Mapand Setwe can begin their journey of learning)

Come to talk about an array of other traversalAPI

• Array.prototype.filter (): method creates a new array, which contains all the elements to achieve by testing the function of the offer.

    const new_array = arr.filter(callback[, thisArg]) 复制代码

callback: To test the function of each element of the array. When using call parameters ( element, index, array). Return trueindicates the retention element (tested), falseis not preserved.

thisArg: Optional. Performed callbackfor the time thisvalue.

Returns: an array of elements in the collection by a new test

• Array.prototype.map (): Creates a new array, the result is returned after the results of each element in the array to call a function provided.

    let new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg]) 复制代码

callback : A new array elements generating function, three parameters:

currentValue: callbackThe first argument, the array elements currently being processed.

index: callbackThe second argument, the index of the current element in the array being processed.

array: callbackThe third parameter mapmethod is called an array.

ound: #eee;">thisArg: Optional. Performed callbackwhile the function thisvalue.

• Array.prototype.every (): if each element in the array satisfies the test function returns true, otherwise it returns false.
• Array.prototype.some (): If there is at least one element in the array to meet the test function returns true, otherwise it returns false.

Reproduced in: https: //www.cnblogs.com/leftJS/p/11068492.html