the most popular array methods in JavaScript that you don't want to miss out on!

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.

<code class="language-javascript">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']</code>

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

<code class="language-javascript">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 }]</code>

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

<code class="language-javascript">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</code>

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

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

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

<code class="language-javascript">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</code>

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

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

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.

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

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.

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

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

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

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

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

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

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

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.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

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

<code class="language-javascript">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']</code>

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

<code class="language-javascript">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 }]</code>

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!