Home > Web Front-end > JS Tutorial > How to use JS.map() method (array method)

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

青灯夜游
Release: 2021-05-25 09:08:28
forward
3208 people have browsed it

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.

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

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];
Copy after login

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]
Copy after login

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]
Copy after login

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"}
];
Copy after login

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"]
Copy after login

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);
Copy after login

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);
Copy after login

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);
Copy after login

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!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template