Loading Please Wait...
JavaScript array iteration refers to accessing array elements (or items) and perform operation accordingly.
The forEach() method calls a function (a callback function) once for each array element. This callback function can take 3 arguments: the item value, the item index and the array itself.
const services = ["Website", "Applications", "Software"];
let serviceList = "";
services.forEach(myFun);
function myFun(value, index, array) {
serviceList += (index) + ": " + value + "<br>";
// You can use
// serviceList += (index+1) + ": " + value + "<br>";
// to start list with 1 as array index start with 0
}
The above code can also be written as below and we can omit array parameter as we are not using it.
const services = ["Website", "Applications", "Software"];
let serviceList = "";
services.forEach(function(value, index){
serviceList += (index+1) + ": " + value + "<br>";
});
// Or
services.forEach((value, index) => {
serviceList += (index+1) + ": " + value + "<br>";
});
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.
This callback function also take 3 arguments: the item value, the item index and the array itself.
// Below code add 1 to each element of the array1 and store in array2
const array1 = [10, 20, 30, 40, 50];
const array2 = array1.map((value) => {
return value + 1;
});
// or we can write
const array3 = array1.map((value) => value + 1);
The flatMap() method first maps all elements of an array and then creates a new array by flattening (reducing the dimensions) the array.
const array1 = [10, 20, 30, 40, 50];
const array2 = array1.flatMap((x) => x * 2);
The flatMap() method reduce the array dimension to 1 depth while map() does not.
const array = [10, 20, 30, 40, 50];
const mapArray = array.map((x) => [x * 2]);
// mapArray = [[20], [40], [60], [80], [100]]
const flatMapArray = array.flatMap((x) => [x * 2]);
// flatMapArray = [20, 40, 60, 80, 100]
The filter() method creates a new array with array elements that pass a test.
const array = [10, 20, 30, 40, 50];
const filterArray = array.filter((val) => val > 20);
// filterArray = [30, 40, 50]
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.
The reduce() method does not reduce the original array.
This callback function take 4 arguments: initial or previous value, the item value, the item index and the array itself.
const array = [10, 20, 30, 40, 50];
// Without initial value
let sum1 = array.reduce((total, val) => total + val);
// sum1 = 150
// With initial value
let sum1 = array.reduce(((total, val) => total + val), 100);
// sum1 = 250
The reduceRight() method runs a function on each array element to produce (reduce it to) a single value.
The reduceRight() method works from right-to-left in the array.
The reduceRight() method does not reduce the original array.
This callback function take 4 arguments: initial or previous value, the item value, the item index and the array itself.
const array = [10, 20, 30, 40, 50];
// Without initial value
let sum1 = array.reduceRight((total, val) => total + val);
// sum1 = 150
// With initial value
let sum1 = array.reduceRight(((total, val) => total + val), 100);
// sum1 = 250
The every() method checks if all array values pass a test and return true or false.
const array = [10, 20, 30, 40, 50];
array.every((val) => val > 20);
The some() method checks if some array values pass a test and return true or false.
const array = [10, 20, 30, 40, 50];
array.some((val) => val > 20);
The indexOf() method searches an array for an element value and returns its position.
The indexOf() returns -1 if the item is not found.
The indexOf() has 2 arguments: the item to be searched and start position (optional). Negative start value means search from last element to first element.
const array = [10, 20, 30, 40, 50];
array.indexOf(30); // 2
array.indexOf("30"); // -1
array.indexOf(30, 2); // 2
array.indexOf(30, 3); // -1
array.indexOf(30, -3); // 2
The lastIndexOf() method is same as indexOf() except it returns the position of last occurrence of the searched item.
const array = [10, 20, 30, 40, 30];
array.lastIndexOf(30); // 4
array.lastIndexOf("30"); // -1
array.lastIndexOf(30, 2); // 2
array.lastIndexOf(30, 3); // 2
array.lastIndexOf(30, -3); // 2
The find() method returns the value of the first array element that passes a test function.
const array = [10, 20, 30, 40, 30];
array.find((val) => val > 20); // 30
The findIndex() method returns the index of the first array element that passes a test function.
const array = [10, 20, 30, 40, 30];
array.findIndex((val) => val > 20); // 2
The Array.from() method returns an Array object from any object with a length property or any iterable object.
Array.from("abcd"); // ["a", "b", "c", "d"]
The keys() method returns an Array Iterator object with the keys of an array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const keys = fruits.keys();
for (let x of keys) {
// here x is the index of fruits
}
The entries() method create an Array Iterator, and then iterate over the key/value pairs
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const fr = fruits.entries();
for (let x of fr) {
// Here x is index/value pair like (0,Banana)
}
The includes() method allows us to check if an element is present in an array.
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.includes("Mango"); // is true
The ... operator expands an iterable (like an array) into more elements:
const array1 = [10, 20];
const array2 = [30, 40];
const array3 = [...array1, ...array2]; // [10, 20, 30, 40]
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved