JS Array Iteration

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Array Method

Array iteration methods are used to operate on every array item.

JavaScript Array forEach()

The forEach() method is used to calls a function (a callback function) once for each array element.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let txt = “”;

numbers.forEach(myFunction);

document.getElementById(“demo”).innerHTML = txt;

function myFunction(value, index, array) {

  txt += value + “<br>”;

}

</script>

</body>

</html>

Output

JavaScript Array.forEach()

Calls a function once for each array element.

The function takes 3 arguments:

  • The item value
  • The item index
  • The array itself

The example uses only the value parameter. The example can be rewritten to:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.forEach()</h2>

<p>Calls a function once for each array element.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let txt = “”;

numbers.forEach(myFunction);

document.getElementById(“demo”).innerHTML = txt;

function myFunction(value) {

  txt += value + “<br>”;

}

</script>

</body>

</html>

Output

JavaScript Array.forEach()

Calls a function once for each array element.

45

4

9

16

25

JavaScript Array map()

The map() method is used to make a new array by performing a function on each array element.

The map() method is used not to execute the function for array elements without values.

The map() method does not change the original array.

This example multiplies each array value by 2:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id=”demo”></p>

<script>

const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map(myFunction);

document.getElementById(“demo”).innerHTML = numbers2;

function myFunction(value, index, array) {

  return value * 2;

}

</script>

</body>

</html>

Output

JavaScript Array.map()

Creates a new array by performing a function on each array element.

90,8,18,32,50

The function takes 3 arguments:

  • The item value
  • The item index
  • The array itself

When a callback function makes use of the value parameter, the index and array parameters can be removed

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.map()</h2>

<p>Creates a new array by performing a function on each array element.</p>

<p id=”demo”></p>

<script>

const numbers1 = [45, 4, 9, 16, 25];

const numbers2 = numbers1.map(myFunction);

document.getElementById(“demo”).innerHTML = numbers2;

function myFunction(value) {

  return value * 2;

}

</script>

</body>

</html>

Output

JavaScript Array.map()

Creates a new array by performing a function on each array element.

90,8,18,32,50

JavaScript Array filter()

The filter() method specifies  a new array with array elements that passes a test.

This example defines a new array from elements with a value larger than 18:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.filter()</h2>

<p>Creates a new array with all array elements that passes a test.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

const over18 = numbers.filter(myFunction);

document.getElementById(“demo”).innerHTML = over18;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

Output

JavaScript Array.filter()

Creates a new array with all array elements that passes a test.

45,25

JavaScript Array reduce()

The reduce() method is used to run a function on each array element to generate (reduce it to) a single value.

The reduce() method is used to work from left-to-right in the array. See also reduceRight().

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.reduce()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduce(myFunction);

document.getElementById(“demo”).innerHTML = “The sum is ” + sum;

function myFunction(total, value, index, array) {

  return total + value;

}

</script>

</body>

</html>

Output

JavaScript Array.reduce()

This example finds the sum of all numbers in an array:

The sum is 99

JavaScript Array reduceRight()

The reduceRight() method is used to run a function on each array element to produce (reduce it to) a single value.

The reduceRight() works from right-to-left in the array.

The reduceRight() method does not reduce the original array.

This example finds the sum of all numbers in an array:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.reduceRight()</h2>

<p>This example finds the sum of all numbers in an array:</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let sum = numbers.reduceRight(myFunction);

document.getElementById(“demo”).innerHTML = “The sum is ” + sum;

function myFunction(total, value, index, array) {

  return total + value;

}

</script>

</body>

</html>

 

Output

JavaScript Array.reduceRight()

This example finds the sum of all numbers in an array:

The sum is 99

JavaScript Array every()

The every() method is used to check if all array values pass a test

This example below checks if all array values are larger than 18:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.every()</h2>

<p>The every() method checks if all array values pass a test.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let allOver18 = numbers.every(myFunction);

document.getElementById(“demo”).innerHTML = “All over 18 is ” + allOver18;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

Output

JavaScript Array.every()

The every() method checks if all array values pass a test.

All over 18 is false

JavaScript Array some()

The some() method  is used to check if some array values pass a test.

This example above checks if some array values are larger than 18:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.some()</h2>

<p>The some() method checks if some array values pass a test.</p>

<p id=”demo”></p>

<script>

const numbers = [45, 4, 9, 16, 25];

let someOver18 = numbers.some(myFunction);

document.getElementById(“demo”).innerHTML = “Some over 18 is ” + someOver18;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

Output

JavaScript Array.some()

The some() method checks if some array values pass a test.

Some over 18 is true

JavaScript Array indexOf()

The indexOf() method is used to find an array for an element value and returns its position.

Search an array for the item “Apple”:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.indexOf()</h2>

<p id=”demo”></p>

<script>

const fruits = [“Apple”, “Orange”, “Apple”, “Mango”];

let position = fruits.indexOf(“Apple”) + 1;

document.getElementById(“demo”).innerHTML = “Apple is found in position ” + position;

</script>

</body>

</html>

Output

JavaScript Array.indexOf()

Apple is found in position 1

JavaScript Array lastIndexOf()

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

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.lastIndexOf()</h2>

<p id=”demo”></p>

<script>

const fruits = [“Apple”, “Orange”, “Apple”, “Mango”];

let position = fruits.lastIndexOf(“Apple”) + 1;

document.getElementById(“demo”).innerHTML = “Apple is found in position ” + position;

</script>

</body>

</html>

Output

JavaScript Array.lastIndexOf()

Apple is found in position 3

JavaScript Array find()

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

This example finds (returns the value of) the first element that is larger than 18:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.find()</h2>

<p id=”demo”></p>

<script>

const numbers = [4, 9, 16, 25, 29];

let first = numbers.find(myFunction);

document.getElementById(“demo”).innerHTML = “First number over 18 is ” + first;

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

Output

JavaScript Array.find()

First number over 18 is 25

JavaScript Array findIndex()

The findIndex() method is used to return the index of the first array element that passes a test function.

This example below searches the index of the first element that is larger than 18:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Array.findIndex()</h2>

<p id=”demo”></p>

<script>

const numbers = [4, 9, 16, 25, 29];

document.getElementById(“demo”).innerHTML = “First number over 18 has index ” + numbers.findIndex(myFunction);

function myFunction(value, index, array) {

  return value > 18;

}

</script>

</body>

</html>

Output

JavaScript Array.findIndex()

First number over 18 has index 3


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420