What are the uses of array functions?

In fact? Arrays and array iteration functions can be confusing to beginners, so I will try to simplify the problem for each, and the final question is: what do you want to return?

Introduction

• Return a thing for each existing thing: map()

• Only return some existing things: filter()

• Only return one thing: reduce()

• Don’t return anything, but do something with each existing thing: forEach()

The following will be introduced one by one These array-related functions use a non-arrow function example and an arrow function example.

Return a new thing for each existing thing: map()

If you have an array and want to map each item in the array To perform some operations and return an array with new values, it is most appropriate to use map(). Here is a simple function that takes an array and doubles each item in the array:

const originalArray = [1, 2, 3];const newArray = originalArray.map(function(item) {    return item * 2;
});
console.log(newArray); // -> [2, 4, 6]

Use ES6 arrow functions:

const originalArray = [1, 2, 3];const newArray = originalArray.map(item => item * 2);
console.log(newArray); // -> [2, 4, 6]

Note: Use With the new arrow function syntax, we do not need to use the function, return keywords or curly braces {}. This is because arrow functions provide implicit returns for simple() functions like this. You can read more about arrow functions from Wes Bos.

Return a new array containing only some existing array items that meet the criteria: filter()

filter() is probably easiest Understand the array function because it's very well named. filter()Accepts a range of values, performs a function or comparison on each value, and returns a new array. These values ​​pass its test (we call them truthy values).

Here is an example, take a number greater than 5 from an array, and then return a new array that meets the conditions:

const originalArray = [1, 9, 4, 2, 42];const newArray = originalArray.filter(function(item) {    return item > 5;
});
console.log(newArray); // -> [9, 42]

Use the ES6 arrow function:

const newArray = originalArray.filter(item => item > 5);

Return only a new thing: reduce()

Sometimes you have a series of values, but you only want to return a new thing from them. The reduce() function in an array performs a function or comparison on each item in the array and then performs some operation on what is called an accumulator. This is a function that is easier to describe with an example because the terminology it describes is just as confusing as the function itself.

Suppose you have an array of names and you want to count the number of times the name Bob appears:

const originalArray = ["Alice", "Bob", "Charlie", "Bob", "Bob", "Charlie"];const numberOfBobs = originalArray.reduce(function(accumulator, item) {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);
console.log(numberOfBobs); // -> 3

Use the ES6 arrow function:

const numberOfBobs = originalArray.reduce((accumulator, item) => {    if (item === "Bob") {        return accumulator + 1;
    } else {        return accumulator;
    }
}, 0);

As you can see, this arrow function doesn't save us time because we have to provide two arguments to the function and then have logic before returning, so we still need the curly braces {}.

The 0 at the end of the reduce() function is the starting value of our accumulator. If the value we encounter is Bob, then Add 1, otherwise we return the current accumulator. If you don't return anything, undefined will be returned the next time you run the function.

Do something with each value in the array, but return no value: forEach()

Sometimes, you have a series of values ​​that you want to process, but There is no need to track the return value of each function call. This is what forEach() means.

const originalArray = [1, 2, 3];
originalArray.forEach(function(item) {
    doSomething(item);
});

Using ES6 arrow functions:

originalArray.forEach( item => doSomething(item); );

Summary

Simple and sweet. These are the simplest examples we provide for each function to keep it as simple as possible, mainly to make it easier to understand when you should use them. You can do a lot of work with these functions, and each function has an advanced form that also provides the current index:

arr.map((item, index) => {})
arr.filter((item, index) => {})
arr.reduce((accumulator, item, index) => {})
arr.forEach((item, index) => {})

Related recommendations:

php array functions Implementing the editing of associated tables

The most practical JS array functions

What are the commonly used array functions