This guide explores fourteen indispensable JavaScript array methods. We'll outline each method and illustrate its usage with examples.

1. map(): Transforms each array element and returns a new array with the results. The original array remains unchanged.

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

2. filter(): Creates a new array containing only elements that pass a provided test function. The original array is untouched.

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

3. reduce(): Applies a function cumulatively to array elements to reduce them to a single value. Think of it as iteratively combining elements.

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30

4. forEach(): Executes a provided function once for each array element. It doesn't return a value (returns undefined).

[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));

5. find(): Returns the first element that satisfies a provided testing function. If no element satisfies the condition, it returns undefined.

const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2

6. findIndex(): Returns the index of the first element that satisfies a provided testing function. Returns -1 if no element satisfies the condition.

const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1

7. some(): Tests whether at least one element in the array passes the test implemented by the provided function. Returns true if at least one element passes, otherwise false.

const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true

8. every(): Tests whether all elements in the array pass the test implemented by the provided function. Returns true only if all elements pass, otherwise false.

const allPositive = [1, 2, 3].every(n => n > 0); // true

9. includes(): Determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false

10. indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1

11. slice(): Extracts a section of an array and returns it as a new array, without modifying the original.

const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]

12. splice(): Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. Modifies the original array.

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']

13. sort(): Sorts the elements of an array in place. By default, it sorts as strings; for numerical sorting, a comparison function is needed.

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

14. join(): Creates and returns a new string by concatenating all of the elements in an array (separated by a specified separator string).

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

Mastering these methods significantly enhances your JavaScript array manipulation capabilities.

The above is the detailed content of the most popular array methods in JavaScript that you don't want to miss out on!. For more information, please follow other related articles on the PHP Chinese website!