Did you have a nice holiday? Going to work, let us review the knowledge, into the state of learning it!

Today we’re going to talk about array.map (). Do you really know how it works?

Sometimes, you may need to take an array and apply some procedures to its elements to get a new array with modified elements.

Instead of looping through the array manually, you can simply use the built-in array.map () method.

The map() method allows you to iterate over a group of numbers and modify its elements using callback functions. The callback function is then executed on each element of the array.

For example, suppose you have the following array elements:

let arr = [3.4.5.6];
Copy the code

Now suppose you want to multiply each element of the array by 3. You might consider using a for loop like this:

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 the code

But in reality, you can 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 the code

The map() method is typically used to apply some changes to an element, either by multiplying by a specific number as in the above code, or by performing any other action your application may need.

How to use map() on object arrays

For example, you might have an array of objects that store the first and last names of your friends, like this:

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

You can use the map() method to traverse the array and concatenate the values of firstName and lastName 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 the code

The map() method passes more than just one element. Let’s look at all the arguments that map() passes to the callback function.

Full map() syntax

The map() method has the following syntax:

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

The map() method always passes the current element, its index, and the entire array object to it by calling the callback function on each array element.

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

let arr = [2.3.5.7]

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

If you are interested, you can also test other parameters using console.log() :

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 the code

That’s all you need to know about the array.map() method. Normally, you would only use the Element argument in a callback and ignore the other arguments. This is what I often do in my daily projects.