JavaScript array methods explained with examples

push():Adds one or more elements to the end of the array and returns the new length.

let arr = [1, 2, 3];
arr.push(4);
// Now the value of arr is [1, 2, 3, 4]

pop(): Removes the element at the end of the array and returns the value of the element.

let arr = [1, 2, 3];
let removedElement = arr.pop();
//The value of removedElement is 3, and the value of arr is [1, 2]

shift():Delete the first element of the array and return the value of the element.

let arr = [1, 2, 3];
let removedElement = arr.shift();
//The value of removedElement is 1, the value of arr is [2, 3]

unshift():Adds one or more elements to the beginning of the array and returns the new length.

let arr = [2, 3];
arr.unshift(1);
// Now the value of arr is [1, 2, 3]

concat(): Used to merge two or more arrays and return a new array.

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
//The value of newArr is [1, 2, 3, 4]

slice():Returns selected elements from an existing array.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3);
//The value of newArr is [2, 3]

splice(): Adds/removes items to/from the array and returns the removed item.

let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(1, 2);
//The value of removed is [2, 3], the value of arr is [1, 4, 5]

indexOf(): Returns the index of the first occurrence of the specified element in the array, or -1 if it does not exist.

let arr = [1, 2, 3, 4, 3, 5];
let index = arr.lastIndexOf(3);
//The value of index is 4

lastIndexOf(): Returns the index of the last occurrence of the specified element in the array, or -1 if it does not exist.

let arr = [1, 2, 3, 4, 3, 5];
let index = arr.lastIndexOf(3);
//The value of index is 4

forEach(): Execute the provided function once for each element of the array.

let arr = [1, 2, 3];
arr.forEach(function(element) {
  console.log(element);
});
//Console output:
// 1
// 2
// 3

map(): Creates a new array whose result is the result of calling a provided function on each element in the array.

let arr = [1, 2, 3];
let newArr = arr.map(function(element) {
  return element * 2;
});
// The value of newArr is [2, 4, 6]

filter():Creates a new array containing all elements of the test implemented by the provided function.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(element) {
  return element > 2;
});
//The value of newArr is [3, 4, 5]

reduce():Execute a function you provide on each element in the array and aggregate its results into a single return value.

let arr = [1, 2, 3, 4];
let sum = arr.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0);
//The value of sum is 10

every(): Check whether all elements in the array meet the specified conditions.

let arr = [1, 2, 3, 4, 5];
let allGreaterThanZero = arr.every(function(element) {
  return element > 0;
});
// The value of allGreaterThanZero is true

some(): Check whether some elements in the array meet the specified conditions.

let arr = [1, 2, 3, 4, 5];
let someGreaterThanFour = arr.some(function(element) {
  return element > 4;
});
// the value of someGreaterThanFour is true

find(): Returns the value of the first element in the array that satisfies the provided test function. Otherwise, undefined is returned.

let arr = [1, 2, 3, 4, 5];
let firstGreaterThanTwo = arr.find(function(element) {
  return element > 2;
});
// The value of firstGreaterThanTwo is 3

findIndex(): Returns the index of the first element in the array that satisfies the provided test function. Otherwise, -1 is returned.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(function(element) {
  return element > 2;
});
//The value of index is 2

includes(): Determine whether the array contains a specific value, if so, return true, otherwise return false.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
// The value of hasThree is true

reverse(): Reverse the order of elements in the array.

let arr = [1, 2, 3, 4, 5];
arr.reverse();
// Now the value of arr is [5, 4, 3, 2, 1]

sort(): Sorts the array elements and returns the sorted array.

let arr = [3, 1, 2, 5, 4];
arr.sort();
// Now the value of arr is [1, 2, 3, 4, 5]

join(): Join all elements in the array into a string.

let arr = ["Hello", "World", "!"];
let joinedString = arr.join(" ");
//The value of joinedString is "Hello World!"

toString():Convert the array to a string and return the result.

let arr = [1, 2, 3];
let arrString = arr.toString();
// The value of arrString is "1,2,3"

isArray(): Determines whether a variable is an array type. If so, it returns true, otherwise it returns false.

let arr = [1, 2, 3];
let isArr = Array.isArray(arr);
// The value of isArr is true

fill(): Fills all elements in the array from the starting index to the ending index with a fixed value.

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3);
// Now the value of arr is [1, 0, 0, 4, 5]

flat(): Concatenate all sub-array elements into a new array and return it, the depth can be specified.

let arr = [1, 2, [3, 4, [5, 6]]];
let newArr = arr.flat(2);
//The value of newArr is [1, 2, 3, 4, 5, 6]

from(): Create a new array instance from an array-like object or iterable object.

let arr = Array.from('hello');
// The value of arr is ['h', 'e', 'l', 'l', 'o']

keys(): Returns an Array Iterator object containing each index key in the array.

let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {
    console.log(key);
}
//Console output:
// 0
// 1
// 2

values(): Returns a new Array iterator object containing the values for each index of the array.

let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {
    console.log(value);
}
//Console output:
// 'a'
// 'b'
// 'c'

entries(): Returns a new Array iterator object containing the key/value pairs for each index in the array.

let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let entry of iterator) {
    console.log(entry);
}
//Console output:
// [0, 'a']
// [1, 'b']
// [2, 'c']