Detailed explanation of the usage example of map in JavaScript

Introduction

JavaScript's map method is a very powerful and commonly used function of arrays. It allows you to execute a function on each element in the array and return a new array. The array is the result obtained by processing each element in the original array through this function.

Map is a method of arrays, and its basic syntax is as follows:

let newArray = (function(element, index, array) {
    // Return the element of the new array}, thisArg);

• element: The array element currently being processed.
• index (optional): The index of the current element.
• array (optional): a reference to the original array, allowing access to the complete array inside the function.
• thisArg (optional): This value used when executing the callback function.

const numbers = [10, 20, 30, 40];

// Use element, index, and array parametersconst newArray = (function(element, index, array) {
    (`The array element currently being processed： ${element} The index of the current element： ${index}, References to the original array： ${array}`);
    return element / 10;
});

(newArray); // Output: [1, 2, 3, 4]

In this example, we print the element being processed, its index, and the entire array, and then divide each element by 10 to create a new array.

The use of thisArg parameter can help us set the value of this in the callback function. This is especially useful when you want the callback function to access properties of external objects inside.

function Counter() {
   = 2;
}

const counter = new Counter();

const numbers = [1, 2, 3, 4];

// Use thisArg parameterconst multiplied = (function(element) {
    return element * ; // 'this' now refers to the 'counter' object}, counter); // Pass 'counter' as 'thisArg'
(multiplied); // Output: [2, 4, 6, 8]

In this example, the thisArg parameter of the map method is set to the counter object, so the pointer in the callback function.

Here are some common usages and examples of map:

1. Convert array elements

You can use map to convert each element in the array. This may include changing the data type of the element, or generating a new data format based on existing data.

const numbers = [1, 2, 3, 4];
const squares = (number => number * number);
(squares); // Output: [1, 4, 9, 16]

2. Extract the properties of the object array

If you have an array of objects, you can use map to create a new array that contains only certain properties of the original array object.

const users = [
  { id: 1, name: 'Alice', age: 22 },
  { id: 2, name: 'Bob', age: 25 }
];
const names = (user => );
(names); // Output: ['Alice', 'Bob']

3. Format array data

You can use map to format the data of an array, such as formatting dates or numbers, or convert text information to uppercase or lowercase.

const dates = ['2021-01-01', '2021-12-31'];
const formattedDates = (date => new Date(date).toLocaleDateString('zh-CN'));
(formattedDates); // Output: ['2021/1/1', '2021/12/31'] (The output format may vary depending on the region setting)

4. Add or modify object properties

Using map can easily add new properties or modify existing properties to an object array.

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 }
];
const productsWithTax = (product => ({
  ...product,
  priceWithTax:  * 1.15
}));
(productsWithTax);
// Output: [{ id: 1, price: 100, priceWithTax: 115 }, { id: 2, price: 200, priceWithTax: 230 }]

5. Use in combination with deconstruction

You can use deconstruction in the map callback function, which makes processing elements in the object array more direct and clear.

const points = [
  { x: 10, y: 20 },
  { x: 20, y: 30 }
];
const shiftedPoints = (({ x, y }) => ({ x: x + 5, y: y + 5 }));
(shiftedPoints); // Output: [{ x: 15, y: 25 }, { x: 25, y: 35 }]

map  is a very flexible method that can be used almost any situation where you need to generate a new array from an array. It is especially useful when processing and transforming data, and can help you write concise and declarative code.

Summarize

This is the end of this article about the detailed explanation of map usage in JavaScript. For more related content on map usage in JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!