Do you know all 24 methods of JavaScript loop traversal?

Preface

Today we'll look at some basics and see the loop traversal methods in JavaScript:

1. Array traversal method

1. forEach()

The forEach method is used to call each element of an array and pass the element to the callback function. The callback function will be called for each value in the array. Its syntax is as follows:

array.forEach(function(currentValue, index, arr), thisValue)

The first parameter of this method is the callback function, which is required and has three parameters:

• currentValue: required. Current element
• index: Optional. The index value of the current element.
• arr: Optional. The array object to which the current element belongs

let arr = [1,2,3,4,5]
arr.forEach((item, index, arr) => {
  console.log(index+":"+item)
})

This method can also have a second parameter to bind the this variable inside the callback function (provided that the callback function cannot be an arrow function, because arrow functions do not have this):

let arr = [1,2,3,4,5]
let arr1 = [9,8,7,6,5]
arr.forEach(function(item, index, arr){
  console.log(this[index]) // 9 8 7 6 5
}, arr1)

Notice:

• The forEach method does not change the original array and has no return value;
• forEach cannot use break or continue to exit the loop. When return is used, the effect is the same as using continue in the for loop.
• The forEach method cannot traverse objects and is only applicable to array traversal.

2. map()

The map() method returns a new array whose elements are the values ​​processed by calling the function on the elements of the original array. This method processes the elements in the original array in order. Its syntax is as follows:

array.map(function(currentValue,index,arr), thisValue)

The first parameter of this method is the callback function, which is required and has three parameters:

• currentValue: Required. The value of the current element;
• index: Optional. The index value of the current element;
• arr: Optional. The array object to which the current element belongs.

let arr = [1, 2, 3];
 
arr.map(item => {
    return item + 1;
})

// Output: [2, 3, 4]

The second parameter of this method is used to bind the this variable inside the parameter function and is optional:

let arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)

// Output: ['b', 'c']

This method can also be chained:

let arr = [1, 2, 3];
 
arr.map(item => item + 1).map(item => item + 1)

// Output: [3, 4, 5]

Notice:

• The map method does not detect empty arrays;
• The map method returns a new array when it traverses the array, and does not change the original array;
• The map method has a return value, which can be returned. The map callback function supports return value.
• The map method cannot traverse objects and is only applicable to array traversal.

3. for of

The for...of statement creates a loop to iterate over an iterable object. The for...of loop was introduced in ES6 to replace for...in and forEach() and supports the new iteration protocol. Its syntax is as follows:

for (variable of iterable) {
    statement
}

This method takes two parameters:

• variable: The property value of each iteration is assigned to this variable.
• iterable: An object that has enumerable properties and can be iterated over.

This method allows to get the value of a key in an object:

let arr = [
    {id:1, value:'hello'},
    {id:2, value:'world'},
    {id:3, value:'JavaScript'}
]
for (let item in arr) {
  console.log(item); 
}
// Output: 0 1 2 

Notice:

• The for of method only traverses the properties of the current object, not the properties on its prototype chain;
• The for of method is applicable to traversing collections with iterator objects such as arrays/class arrays/strings/maps/sets;
• The for of method does not support traversal of plain objects because it does not have an iterator object. If you want to iterate over the properties of an object, you can use the for in method;
• You can use break, continue, and return to interrupt the loop traversal;

4. filter()

The filter() method is used to filter an array, and elements that meet the conditions will be returned. Its parameter is a callback function. All array elements execute the function in turn. Elements with a return value of true will be returned. If there are no elements that meet the conditions, an empty array will be returned. Its syntax is as follows:

array.filter(function(currentValue,index,arr), thisValue)

The first parameter of this method is the callback function, which is required and has three parameters:

• currentValue: Required. The value of the current element;
• index: Optional. The index value of the current element;
• arr: Optional. The array object to which the current element belongs.

const arr = [1, 2, 3, 4, 5]
arr.filter(item => item > 2) 

// Output: [3, 4, 5]

Similarly, it also has a second parameter, which is used to bind the this variable inside the parameter function.

You can use the filter() method to remove undefined, null, NAN and other values ​​from the array:

let arr = [1, undefined, 2, null, 3, false, '', 4, 0]
arr.filter(Boolean)

// Output: [1, 2, 3, 4]

Notice:

• The filter method returns a new array and does not change the original array;
• The filter method does not detect empty arrays;
• The filter method only works on arrays.

5. some(), every()

The some() method will iterate over each item in the array. If at least one element meets the criteria, it will return true, and the remaining elements will not be tested. Otherwise, it will return false.

The every() method will iterate over every item in the array and return true only when all elements meet the condition. If one element in the array is detected to be unsatisfactory, the entire expression returns false and the remaining elements will not be tested again. Its syntax is as follows:

The syntax for both is as follows:

array.some(function(currentValue,index,arr),thisValue)
array.every(function(currentValue,index,arr), thisValue)

The first parameter of both methods is the callback function, which is required and has three parameters:

• currentValue: Required. The value of the current element;
• index: Optional. The index value of the current element;
• arr: Optional. The array object to which the current element belongs.

let arr = [1, 2, 3, 4, 5]
arr.some(item => item > 4) 

// Output: true

let arr = [1, 2, 3, 4, 5]
arr.every(item => item > 0) 

// Output: true

Notice:

• Both methods will not change the original array and will return a Boolean value;
• Neither method will detect empty arrays;
• Both methods are applicable only to arrays.

6. reduce(), reduceRight()

The reduce() method receives a function as an accumulator, and each value in the array (from left to right) is reduced, eventually evaluating to a single value. reduce() can be used as a higher-order function for function compose. Its syntax is as follows:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

The reduce method executes the callback function for each element in the array in turn, excluding elements that have been deleted or never assigned to the array. The callback function accepts four parameters:

• total: the value returned by the last callback call, or the provided initial value (initialValue);
• currentValue: the element currently being processed;
• currentIndex: the index of the current element;
• arr: The array object to which the current element belongs.

The second parameter of this method is initialValue, which represents the initial value passed to the function (as the first parameter of the first call to callback):

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

Output:

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

Let’s try adding an initial value:

let arr = [1, 2, 3, 4]
let sum = arr.reduce((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

Output:

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

From this we can conclude that if no initial value initialValue is provided, reduce will execute the callback method starting from index 1, skipping the first index. If an initial value is provided, execution starts at index 0

The reduceRight() method is almost identical to the reduce() method, except that it traverses the array in reverse order, while the reduce() method traverses the array in forward order.

let arr = [1, 2, 3, 4]
let sum = arr.reduceRight((prev, cur, index, arr) => {
    console.log(prev, cur, index);
    return prev + cur;
}, 5)
console.log(arr, sum);

Output:

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

Notice:

• Neither method will change the original array;
• If the two methods add an initial value, the original array will be changed and the initial value will be placed at the end of the array;
• Both methods will not execute the callback function for an empty array.

7. find(), findIndex()

The find() method returns the value of the first element of the array determined by the function. When an element in the array returns true when testing the condition, find() returns the element that meets the condition, and the execution function will not be called for subsequent values. If no element meets the criteria, returns undefined.

The findIndex() method returns the position (index) of the first element in an array that meets the conditions passed to a test function. When an element in the array returns true under the function condition, findIndex() returns the index position of the element that meets the condition, and the execution function will not be called for subsequent values. If no element meets the condition, returns -1.

The syntax of both methods is as follows:

array.find(function(currentValue, index, arr),thisValue)
array.findIndex(function(currentValue, index, arr), thisValue)

The first parameter of both methods is the callback function, which is required and has three parameters:

• currentValue: required. Current element;
• index: Optional. The index of the current element;
• arr: Optional. The array object to which the current element belongs.

let arr = [1, 2, 3, 4, 5]
arr.find(item => item > 2) 

// Output: 3

let arr = [1, 2, 3, 4, 5]
arr.findIndex(item => item > 2) 

// Output: 2

The find() and findIndex() methods are almost the same, except that they return different results:

• find(): returns the first value that meets the conditions;
• findIndex: Returns the index value of the first value that returns the condition.

Notice:

• For empty arrays, the two methods will not execute the functions;
• Both methods will not change the original array.

8. keys(), values(), entries()

All three methods return an array iteration object, and the contents of the object are slightly different:

• keys() returns the index value of the array;
• values() returns the elements of an array;
• entries() returns an array of key-value pairs.

The syntax of the three methods is as follows:

array.keys()
array.values()
array.entries()

These three methods have no parameters:

let arr = ["Banana", "Orange", "Apple", "Mango"];
const iterator1 = arr.keys();
const iterator2 = arr.values() 
const iterator3 = arr.entries() 

for (let item of iterator1) {
  console.log(item);
}
// Output: 0 1 2 3

for (let item of iterator2) {
  console.log(item);
}
// Output: Banana Orange Apple Mango

for (let item of iterator3) {
  console.log(item);
}
// Output: [0, 'Banana'] [1, 'Orange'] [2, 'Apple'] [3, 'Mango']

Summarize:

2. Object traversal method

1. for in

for…in is mainly used to loop over object properties. Each time the code in the loop is executed, the properties of the object are operated on. Its syntax is as follows:

for (var in object) {
The code block to execute
}

Two of the parameters are:

• var: required. The specified variable can be an array element or an object property.
• object: required. The object to iterate over.

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('Key name:', i); 
    console.log('Key value:', obj[i]); 
}

Output:

Key name: a
Key value: 1
Key name: b
Key value: 2
Key name: c
Key value: 3

Notice:

• The for in method not only traverses all enumerable properties of the current object, but also traverses the properties on its prototype chain.

2. Object.keys(), Object.values(), Object.entries()

These three methods are used to traverse objects. They return an array consisting of the given object's own enumerable properties (excluding inherited and Symbol properties). The order of the array elements is consistent with the order returned when traversing the object normally. The values ​​returned by these three elements are as follows:

• Object.keys(): Returns an array containing the object's key names;
• Object.values(): Returns an array containing the key values ​​of the object;
• Object.entries(): Returns an array containing the object's keys and values.

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj)); // Output: ['id', 'name', 'age']
console.log(Object.values(obj)); // Output: [1, 'hello', 18]
console.log(Object.keys(obj)); // Output: [['id', 1], ['name', 'hello'], ['age', 18]

Notice

• The values ​​in the array returned by the Object.keys() method are all strings, which means that key values ​​that are not strings will be converted to strings.
• The property values ​​in the result array are all enumerable properties of the object itself, excluding inherited properties.

3. Object.getOwnPropertyNames()

The Object.getOwnPropertyNames() method is similar to Object.keys(). It also accepts an object as a parameter and returns an array containing all the property names of the object itself. But it can return non-enumerable properties.

let a = ['Hello', 'World'];
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

Both of these methods can be used to count the number of properties in an object:

var obj = { 0: "a", 1: "b", 2: "c"};
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

4. Object.getOwnPropertySymbols()

The Object.getOwnPropertySymbols() method returns an array of the object's own Symbol properties, excluding string properties:

let obj = {a: 1}

// Add a non-enumerable Symbol property to the object Object.defineProperties(obj, {
 [Symbol('baz')]: {
  value: 'Symbol baz',
  enumerable: false
 }
})
 
// Add an enumerable Symbol property to the object obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((key) => {
 console.log(obj[key]) 
})

// Output: Symbol baz Symbol foo

5. Reflect.ownKeys()

Reflect.ownKeys() returns an array containing all the properties of the object itself. It is similar to Object.keys(), which returns the property keys but does not include non-enumerable properties, while Reflect.ownKeys() returns all property keys:

var obj = {
	a: 1,
	b: 2
}
Object.defineProperty(obj, 'method', {
	value: function () {
	    alert("Non enumerable property")
	},
	enumerable: false
})

console.log(Object.keys(obj))
// ["a", "b"]
console.log(Reflect.ownKeys(obj))
// ["a", "b", "method"]

Notice:

• Object.keys(): equivalent to returning an array of object attributes;
• Reflect.ownKeys() : Equivalent to Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj).

Summarize:

3. Other traversal methods

1. for

The for loop is probably the most common loop method. It consists of three expressions: declaring loop variables, judging loop conditions, and updating loop variables. The three expressions are separated by semicolons. You can use a temporary variable to cache the length of the array to avoid repeatedly obtaining the array length. The optimization effect will be more obvious when the array is large.

const arr = [1,2,3,4,5]
for(let i = 0, len = arr.length; i < len; i++ ){
  console.log(arr[i])
}

When executing, the execution conditions will be judged first and then executed. The for loop can be used to iterate over arrays, strings, array-like objects, DOM nodes, etc. The original array can be changed.

2. while

The end condition in the while loop can be of various types, but will eventually be converted to a Boolean value. The conversion rules are as follows.

• Boolean: true is true, false is false;
• String: An empty string is false, and all non-empty strings are true;
• Number: 0 is false, non-zero number is true;
• null/Undefined/NaN: all false;
• Object: All true.

let num = 1;
            
while (num < 10){
    console.log(num);
    num++;
}

While is the same as for, both judge first and then execute. A loop executes code as long as a specified condition is true.

3. do / while

This method will execute first and then judge. Even if the initial condition is not met, the do/while loop will be executed at least once.

let num = 10;
            
do
	{
    console.log(num);
    num--;
  }
while(num >= 0);
            
console.log(num); //-1

It is not recommended to use do/while to iterate over an array.

4. for await of

The for await...of method is called an asynchronous iterator, which is mainly used to traverse asynchronous objects. It is a method introduced in ES2018.

The for await...of statement creates an iteration loop over asynchronous or synchronous iterable objects, including String, Array, array-like, Map, Set, and custom asynchronous or synchronous iterable objects. This statement can only be used in an async function:

function Gen (time) {
  return new Promise((resolve,reject) => {
    setTimeout(function () {
       resolve(time)
    },time)
  })
}

async function test () {
   let arr = [Gen(2000),Gen(100),Gen(3000)]
   for await (let item of arr) {
      console.log(Date.now(),item)
   }
}
test()

Output:

Summarize

This concludes this article on 24 JavaScript loop traversal methods. For more information on JavaScript loop traversal methods, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!