JavaScript Array Methods: `forEach`, `map`, `filter`, and `reduce`

JavaScript Array Methods: forEach, map, filter, and reduce

JavaScript provides several powerful methods to work with arrays. These methods—forEach, map, filter, and reduce—can make your code more efficient and easier to read. Let's explore these methods using simple analogies and examples.

forEach

Analogy: Playing with each toy in the box

Imagine you have a box of toys, and you want to play with each toy one by one. You take each toy out of the box, play with it, and then put it back.

Example:

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

Explanation:
You look at each toy in the box and play with it.

map

Analogy: Changing each toy into something new

Suppose you have a box of toys and you want to turn each toy into something else. For example, you turn each car into a race car, each doll into a superhero, and each ball into a basketball.

Example:

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

Explanation:
You transform each toy into a new version and put the new toys into a new box.

filter

Analogy: Choosing only certain toys to play with

You have a box of toys, but today you only want to play with the toys that are red. So, you look through the box and take out only the red toys.

Example:

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

Explanation:
You select only the toys that match a certain condition (in this case, being red).

reduce

Analogy: Combining all toys into one mega toy

Imagine you want to create one big toy by combining all the toys together. You take each toy and add it to the mega toy one by one.

Example:

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Explanation:
You start with an empty mega toy and keep adding each toy to it until you have one big toy.

Putting it all together

Let's say you have a box of different toys, and you want to:

1. Look at each toy and see what it is (forEach).
2. Transform each toy into a new version (map).
3. Select only the toys that are blue (filter).
4. Combine all selected toys into one mega toy (reduce).

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

Explanation:

1. Look at each toy.
2. Change each toy to a new version.
3. Choose only the blue toys.
4. Combine them into one big toy.

---

Advanced Options and Techniques

forEach

• Breaking out of forEach: You cannot break out of a forEach loop. If you need this functionality, consider using a for loop or for...of.
• Using thisArg: You can provide a thisArg to use as this inside the callback.

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

map

• Using thisArg: Similar to forEach, you can provide a thisArg to use as this inside the callback.

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• Returning different types: map can return an array of a different type.

  let toyLengths = toys.map(toy => toy.length);

filter

• Complex conditions: Use complex conditions for filtering.

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

reduce

• Initial value: Always provide an initial value to avoid unexpected results.

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• Reduce to object: You can use reduce to create objects.

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

By understanding these methods and their advanced options, you can write more efficient and readable JavaScript code. Happy coding!

The above is the detailed content of JavaScript Array Methods: `forEach`, `map`, `filter`, and `reduce`. For more information, please follow other related articles on the PHP Chinese website!