How to use JS.map() method (array method)

This article will introduce you to the Array.map() method in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Sometimes you may need to take an array and apply some operations to its children in order to get a new array with modified elements.

Instead of manually iterating through the array using a loop, you can simply use the built-in Array.map() method.

The Array.map() method allows you to iterate over an array and modify its elements using callback functions. The callback function will then be executed for each element of the array.

For example, suppose you have the following array elements:

let arr = [3, 4, 5, 6];

Now, suppose you need to multiply each element of the array by 3. You might consider for using a loop as follows:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

But you can actually use the Array.map() method to achieve the same result. Here's an example:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

The Array.map() method is typically used to make some changes to an element, whether it's multiplying a specific number as in the code above, or applying Any other actions that may be required.

How to use map() on an array of objects

For example, you might have an array of objects that store firstName and lastName that you The values ​​of friends look like this:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

You can use the map() method on the array to iterate and join the values ​​of firstName and lastName is as follows:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

The map() method passes more than just one element. Let's look at all the parameters passed map() to the callback function.

Complete map() method syntax

The syntax of the map() method is as follows:

arr.map(function(element, index, array){  }, this);

function() This callback is called on each array element, and the map() method always maps the current element, index of the current element, and the entire array Object passed to it.

This this parameter will be used in the callback function. By default, its value is undefined. For example, here's how to change the this value to a number 80:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(this) // 80
}, 80);

console.log() If you're interested, also Additional parameters can be tested using:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

That's all you need to know about the Array.map() method. Normally you would only element use parameters in the callback function and ignore the rest. This is what I usually do in my daily projects :)

English original address:

https://www.freecodecamp.org/news/javascript- map-how-to-use-the-js-map-function-array-method/

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How to use JS.map() method (array method). For more information, please follow other related articles on the PHP Chinese website!