An in-depth explanation of js array loops and iterations

1. The first method is the for() loop

for( varindex = 0; index < array.length; i ++){}

This method is very common and exists in various languages, so I won’t go into details here

2. The newly added iteration method of es5 (every, filter, forEach, map, some)

These methods all receive two parameters, 1) a function that can be run on each item (the passed-in function accepts three parameters: a. The value of the array item; b. The position of the item in the array; c. The array itself); 2) (Optional) The scope in which the function is run - affects the value of this.

Syntax: Take forEach as an example, others are similar

array.forEach(callback [, thisArg])

nums = [3, 2, 3, 4

1) every() method:

Test whether all elements in the array pass the test of the specified function. If there is If the item returns false, it returns false;

The every method executes the callback function once for each element of the element (Does not include items deleted by certain methods or undefined, except for items whose value is defined as undefined) until you find a value that causes the callback to return false (a value that can be converted to false), jump out of the iteration and return false. Returns true otherwise (true for all elements).

The elements traversed by the every method are the values ​​of the first callback, and values ​​added thereafter will not be accessed.

function isBigEnough(elemen) {  
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

var a = [1, 2, 3,, 4].every (function(value){
console.log(value)   return value       
})//1，2，3，4console.log(a)
//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)   return value       
})
//1，2，3，undefind
console.log(a)
//false

2) filter() method:

Use the specified function to test all elements, create and return a new array containing all elements that pass the test

Filter is Call a callback once for each element in the array (excluding items deleted through certain methods or undefined, except items whose value is defined as undefined), and use all callbacks to return true or equivalent to true Elements create a new array. Elements that fail the callback test will be skipped and will not be included in the new array.

var a = [1, 2, 3, 7,4].filter(function(value){   
    return value > 4      
})
console.log(a)
//[7]

3) forEach() method:

forEach executes the callback function once for each known item in the array in ascending order (excluding deletion through certain methods or undefined Items, except items whose value is defined as undefined)

The range traversed by forEach will be determined before the callback is called for the first time. Items added to the array after calling forEach will not be accessed by callback. If an existing value is changed, the value passed to callback is the value at the moment forEach traverses them. Deleted items will not be traversed. If the visited element is deleted during iteration (for example, using shift()), subsequent elements will be skipped. It always returns undefined and cannot be called in a chain.

There is no way to abort or break out of the forEach loop except throwing an exception. If you need this, using the forEach() method is wrong, you can use a simple loop instead

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注意索引2被跳过了，因为在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

　If the array is modified while iterating, other elements will be jump over.

The following example outputs "one", "two", "four". When the item containing the value "two" is reached, the first item of the entire array is removed, causing all remaining items to be moved up one position. Because element "four" is now earlier in the array, "three" will be skipped. forEach()Does not create a copy of the array before iterating.

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);  if (word === "two") {
    words.shift();
  }
});// one// two// four

4) map() method:

For each item of the array ( does not include items deleted by certain methods or undefined , except items whose values ​​are defined as undefined) execute a specified function and return a new array, each element is the result of the callback function

When using the map method to process an array, The range of array elements is determined before the callback method is first called. During the execution of the map method: the newly added elements in the original array will not be accessed by the callback; if the existing elements are changed or deleted, their values ​​passed to the callback are the values ​​traversed to them by the map method. The value at a moment; the deleted element will not be accessed.

var numbers = [1, 4, 9];var roots = numbers.map(Math.sqrt);/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

5) some() method:

Tests whether certain elements in the array pass the test of the specified function. If one item returns true, it returns true

Some is an array Each element in executes the callback function once, until it finds one that causes the callback to return a "true value" (that is, a value that can be converted into a Boolean true value), stop iteration and return true; otherwise (all elements are false), return false .

var a = [1, 2, 3, 7,4].some (function(value){   return value > 8       })
console.log(a)//false
a = [1, 2, 3, 9,4].some (function(value){   
return value > 8      
 })
console.log(a)
//true

The above is the detailed content of An in-depth explanation of js array loops and iterations. For more information, please follow other related articles on the PHP Chinese website!