Array methods are functions that perform operations on arrays, such as adding, removing, or iterating through elements. In JavaScript, arrays come with a rich set of built-in methods that make manipulating them much easier. Here’s a detailed explanation of some common array methods:
1. Array Creation
- Array.from(): Creates a new array instance from an array-like or iterable object.
let str = ‘hello’; let arr = Array.from(str); // [‘h’, ‘e’, ‘l’, ‘l’, ‘o’]
- Array.of(): Creates a new array instance with a variable number of arguments, regardless of number or type of the arguments.
let arr = Array.of(1, 2, 3); // [1, 2, 3]
2. Adding/Removing Elements
- push(): Adds one or more elements to the end of an array and returns the new length.
let arr = [1, 2, 3]; arr.push(4); // arr is now [1, 2, 3, 4]
- pop(): Removes the last element from an array and returns that element.
let arr = [1, 2, 3, 4]; arr.pop(); // returns 4, arr is now [1, 2, 3]
- unshift(): Adds one or more elements to the beginning of an array and returns the new length.
let arr = [1, 2, 3]; arr.unshift(0); // arr is now [0, 1, 2, 3]
- shift(): Removes the first element from an array and returns that element.
let arr = [1, 2, 3]; arr.shift(); // returns 1, arr is now [2, 3]
- splice(): Adds/removes elements from an array.
let arr = [1, 2, 3, 4]; arr.splice(1, 2, ‘a’, ‘b’); // arr is now [1, ‘a’, ‘b’, 4]
3. Accessing and Finding Elements
- indexOf(): Returns the first index at which a given element can be found, or -1 if it is not present.
let arr = [1, 2, 3, 2]; arr.indexOf(2); // returns 1
- lastIndexOf(): Returns the last index at which a given element can be found, or -1 if it is not present.
let arr = [1, 2, 3, 2]; arr.lastIndexOf(2); // returns 3
- includes(): Determines whether an array includes a certain element.
let arr = [1, 2, 3]; arr.includes(2); // returns true
- find(): Returns the first element that satisfies the provided testing function.
let arr = [1, 2, 3, 4]; let found = arr.find(element => element > 2); // returns 3
- findIndex(): Returns the index of the first element that satisfies the provided testing function.
let arr = [1, 2, 3, 4]; let foundIndex = arr.findIndex(element => element > 2); // returns 2
4. Iteration Methods
- forEach(): Executes a provided function once for each array element.
let arr = [1, 2, 3]; arr.forEach(element => console.log(element)); // logs 1, 2, 3
- map(): Creates a new array with the results of calling a provided function on every element.
let arr = [1, 2, 3]; let mappedArr = arr.map(x => x * 2); // [2, 4, 6]
- filter(): Creates a new array with all elements that pass the test implemented by the provided function.
let arr = [1, 2, 3, 4]; let filteredArr = arr.filter(x => x > 2); // [3, 4]
- reduce(): Executes a reducer function on each element, resulting in a single output value.
let arr = [1, 2, 3, 4]; let sum = arr.reduce((acc, curr) => acc + curr, 0); // 10
- reduceRight(): Executes a reducer function on each element from right to left, resulting in a single output value.
let arr = [1, 2, 3, 4]; let sum = arr.reduceRight((acc, curr) => acc + curr, 0); // 10
5. Array Transformation and Slicing
- slice(): Returns a shallow copy of a portion of an array into a new array object.
let arr = [1, 2, 3, 4]; let slicedArr = arr.slice(1, 3); // [2, 3]
- concat(): Merges two or more arrays into a new array.
let arr1 = [1, 2]; let arr2 = [3, 4]; let combinedArr = arr1.concat(arr2); // [1, 2, 3, 4]
- flat(): Flattens a nested array into a single array.
let arr = [1, [2, [3, 4]]]; let flatArr = arr.flat(2); // [1, 2, 3, 4]
- flatMap(): Maps each element using a mapping function, then flattens the result into a new array.
let arr = [1, 2, 3]; let flatMappedArr = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
6. Array Sorting and Reversing
- sort(): Sorts the elements of an array in place and returns the array.
let arr = [3, 1, 4, 2]; arr.sort(); // [1, 2, 3, 4]
- reverse(): Reverses the order of the elements in an array in place.
let arr = [1, 2, 3, 4]; arr.reverse(); // [4, 3, 2, 1]
7. Array Testing
- every(): Tests whether all elements in the array pass the provided function.
let arr = [1, 2, 3, 4]; let allLessThanFive = arr.every(x => x < 5); // true
- some(): Tests whether at least one element in the array passes the provided function.
let arr = [1, 2, 3, 4]; let someGreaterThanTwo = arr.some(x => x > 2); // true
8. Array to String
- join(): Joins all elements of an array into a string and returns this string.
let arr = [‘hello’, ‘world’]; let str = arr.join(‘ ‘); // ‘hello world’
- toString(): Returns a string representing the array and its elements.
let arr = [1, 2, 3]; let str = arr.toString(); // ‘1,2,3’
These methods cover a wide range of functionalities needed for working with arrays, making JavaScript a powerful language for data manipulation.