JavaScript Array Iteration Methods

Array Iteration

Array iteration methods operate on every array item.

Array.forEach()

The forEach() method calls a function (a callback function) once for each array element. Array.forEach() is supported in all browsers except Internet Explorer 8 or earlier: 

      
                    var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
    txt = txt + value + "";
}

Array.map()

Array.map() is supported in all browsers except Internet Explorer 8 or earlier.

  • The map() method creates a new array by performing a function on each array element.
  • The map() method does not execute the function for array elements without values.
  • The map() method does not change the original array.
      
                    var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
    return value * 2;
}

When a callback function uses only the value parameter, the index and array parameters can be omitted: 

      
                    var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
    return value * 2;
}

Array.filter()

The filter() method creates a new array with array elements that passes a test. Array.filter() is supported in all browsers except Internet Explorer 8 or earlier. 

      
                    var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
    return value > 18;
}

In the example above, the callback function does not use the index and array parameters, so they can be omitted: 

      
                    var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
    return value > 18;
}

Array.reduce()

  • The reduce() method runs a function on each array element to produce (reduce it to) a single value.
  • The reduce() method works from left-to-right in the array. See also reduceRight().
  • The reduce() method does not reduce the original array.
      
                    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
    return total + value;
}

The reduce() method can accept an initial value: 

      
                    var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
    return total + value;
}

Array.reduceRight()

  • The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.
  • The reduceRight() works from right-to-left in the array. See also reduce().
  • The reduceRight() method does not reduce the original arra
  • This example finds the sum of all numbers in an array:
      
                     var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruitsvar numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
    return total + value;
}

Array.every()

The every() method check if all array values pass a test.This example check if all array values are larger than 18: 

      
                    var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
    return value > 18;
}

TWhen a callback function uses the first parameter only (value), the other parameters can be omitted: 

      
                    
                    var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value) {
    return value > 18;
}

Array.some()

The some() method check if some array values pass a test.This example check if some array values are larger than 18: 

      
                    
                    var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
    return value > 18;
}

Array.indexOf()

The indexOf() method searches an array for an element value and returns its position.If the item is present more than once, it returns the position of the first occurrence. 

      
                    var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

Array.lastIndexOf()/h2>

Array.lastIndexOf() is the same as Array.indexOf(), but returns the position of the last occurrence of the specified element. 

      
                    var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

Array.find()

The find() method returns the value of the first array element that passes a test function. 

      
                    var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
    return value > 18;
}

Array.findIndex()

The findIndex() method returns the index of the first array element that passes a test function.

Popular tags

JavaScript Array JavaScript Math JavaScript Function JavaScript Operators JavaScript Variables

Dess App

DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

View
1 1