One of the most useful methods in JavaScript array structures is the.map() function, which creates a new array by calling the callback function. This function accesses each element in the calling array. The map() method can be thought of as going through a loop and writing statements (formatting, data processing) in the callback function to construct a new array.

grammar

Const newArray = array.map(function callback(currentValue[, index[, array]]) {}[, thisArg])Copy the code

The.map() function is used to iterate over array elements. It takes a callback function as an argument and returns a new array and element.

The.map() method is a generic way to create a new array, modify its contents, and leave the original array unchanged. This is used when you need to modify the contents of an existing array and store the result as a new variable.

parameter

  • Callback (required) : A function that generates a new array element, taking three arguments:

    • currentValue:callbackThe current element in the array being processed.
    • index: optional,callbackThe index of the current element being processed in the array.
    • array: optional,mapAn array of method calls.

  • ThisArg: Optional, the value is used as this when callback is executed.

The return value

A new array consisting of the result of each element of the original array executing the callback function.

The.map() method comes in handy when you need to update all the items in an array and store them in a new array.

1. Double the elements

You can create a new array from another array using the.map() method. For example, you can construct a new array by doubling each element of an array of integers.

const arrayNumbers = [1, 2, 3, 4, 5]; const doubles = (array) => array.map((num) => num * 2); console.log(arrayNumbers); // [ 1, 2, 3, 4, 5 ] console.log(doubles(arrayNumbers)); // [2, 4, 6, 8, 10]Copy the code

2. Element formatting

You can format an array of objects using the.map() method. For example, if you have an array of objects whose attributes include username, address, age, and so on, you now need an array of username, which would be a good fit for the.map() method.

const arrayUsers = [ { id: 1, username: "Magic", address: "Johnson", }, { id: 2, username: "Kobe", address: "Bryant", }, { id: 3, username: "Lebron", address: "James", }, { id: 4, username: "Kareem", address: "Abdul-jabbar ",}, {id: 5, username: "Shaquille", address: "O 'Neal ",},]; const newUsers = arrayUsers.map((item) => item.username); console.log(arrayUsers); // [ // { id: 1, username: 'Magic', address: 'Johnson' }, // { id: 2, username: 'Kobe', address: 'Bryant' }, // { id: 3, username: 'Lebron', address: 'James' }, // { id: 4, username: 'Kareem', address: 'Abdul-Jabbar' }, // { id: 5, username: 'Shaquille', address: 'O 'neal '} //] console.log(newUsers); // [ 'Magic', 'Kobe', 'Lebron', 'Kareem', 'Shaquille' ]Copy the code

As you can see from the interface above,.map() does not modify the original array.

3. Callback some elements in the array

Instead of doubling every element in the array, you can double the specified element. For example, only the odd elements of an array are doubled.

const arrayNumbers = [1, 2, 3, 4]; const doubles = (nums) => nums.map((num) => (num % 2 === 1 ? num * 2 : num)); console.log(arrayNumbers); // [ 1, 2, 3, 4 ] console.log(doubles(arrayNumbers)); // [2, 2, 6, 4]Copy the code

4. Convert strings to arrays

You can use the.map() method to convert strings into arrays.

const language = "China";
const map = Array.prototype.map;
const letters = map.call(language, (eachLetter) => `${eachLetter}`);

console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]
Copy the code

5. Render the list in react.js

You can also use.map() in React to render a list.

import React from "react";
import ReactDOM from "react-dom";

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li> {number} </li>);

ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));
Copy the code