ust Know JavaScript Array Methods

This guide explores six fundamental JavaScript array methods: filter, map, reduce, some, every, and includes. Mastering these will significantly enhance your JavaScript programming skills.

1. filter() Method:

The filter() method creates a new array containing only elements satisfying a specified condition. Elements failing the condition are omitted.

How it Works:

• Iterates through each array element.
• Applies a callback function to each element.
• If the callback returns true, the element is included in the new array; otherwise, it's excluded.

<code class="language-javascript">let boxers = [
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 },
    { name: "Jermall Charlo", weight: 160 },
    { name: "Terence Crawford", weight: 146 }
];

// Filter boxers weighing over 170 pounds
let heavyweights = boxers.filter(boxer => boxer.weight > 170);

console.log(heavyweights);</code>

Output:

<code class="language-javascript">[
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 }
]</code>

2. map() Method:

The map() method transforms each element of an array and returns a new array with the transformed elements.

How it Works:

• Iterates through each array element.
• Applies a callback function to each element.
• The callback's return value replaces the original element in the new array.

<code class="language-javascript">let decimalNumbers = [222, 354, 4684, 123, 5];

// Convert decimal numbers to hexadecimal
let hexNumbers = decimalNumbers.map(num => num.toString(16));

console.log(hexNumbers);</code>

3. reduce() Method:

The reduce() method iteratively applies a callback function to each element, accumulating a single result value.

How it Works:

• Iterates through the array.
• Applies the callback to an accumulator and the current element.
• The callback's result becomes the new accumulator value.
• The final accumulator value is returned.

<code class="language-javascript">let numbers = [1, 2, 3, 4, 5];

// Calculate the sum of all numbers
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // Output: 15</code>

4. some() Method:

The some() method checks if at least one element satisfies a given condition. It returns true if a match is found, false otherwise.

How it Works:

• Iterates through the array.
• Stops and returns true immediately upon finding an element satisfying the condition.
• Returns false if no element satisfies the condition.

<code class="language-javascript">let ages = [16, 20, 14, 18];

// Check if at least one person is an adult (≥ 18)
let hasAdult = ages.some(age => age >= 18);

console.log(hasAdult); // Output: true</code>

5. every() Method:

The every() method checks if all elements satisfy a given condition. Returns true only if every element passes; otherwise, false.

How it Works:

• Iterates through the array.
• Returns false immediately if an element fails the condition.
• Returns true only if all elements pass.

<code class="language-javascript">let scores = [80, 85, 90, 95];

// Check if all scores are above 75
let allAbove75 = scores.every(score => score > 75);

console.log(allAbove75); // Output: true</code>

6. includes() Method:

The includes() method checks if an array contains a specific value. Returns true if found, false otherwise.

How it Works:

• Searches for the value using strict equality (===).
• An optional starting index can be specified.

<code class="language-javascript">let boxers = [
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 },
    { name: "Jermall Charlo", weight: 160 },
    { name: "Terence Crawford", weight: 146 }
];

// Filter boxers weighing over 170 pounds
let heavyweights = boxers.filter(boxer => boxer.weight > 170);

console.log(heavyweights);</code>

The above is the detailed content of ust Know JavaScript Array Methods. For more information, please follow other related articles on the PHP Chinese website!