JavaScript 数组方法 .map() 的 5 个使用场景

2021 年 12 月 19 日
本文字数：1682 字
阅读完需：约 6 分钟

.map() 函数是 JavaScript 数组结构中很实用的一个方法之一，更多可以参阅《JavaScript 数据结构之 Array》。本文主要介绍一下.map() 函数常用的场景，其通过调用回调函数创建一个新数组。该函数访问调用数组中的每个元素。可以将 map() 方法视为经过一个循环并在回调函数中编写语句（格式化、数据处理）以构造一个新数组。

语法

const newArray = array.map(function callback(currentValue[, index[, array]]) { // 为新数组返回新的元素}[, thisArg])

复制代码

.map() 函数用于遍历数组元素。它接受一个回调函数作为参数，根据回调函数返回一个新数组和新元素。

.map() 方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。

参数

callback（必须）：生成新数组元素的函数，接收三个参数：
currentValue：callback 数组中正在处理的当前元素。
index：可选，callback 数组中正在处理的当前元素的索引。
array：可选，map 方法调用的数组。
thisArg：可选，执行 callback 函数时值被用作 this 。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

当需要更新数组中的所有项并将其存储到一个新数组中时，.map() 方法就可以派上用场了。

1. 元素翻倍

可以使用 .map() 方法从另一个数组创建一个新数组。例如，可以将一个整数数组的每个元素翻倍构造一个新数组。

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 ]

复制代码

2. 元素格式化

可以使用 .map() 方法格式化对象数组。例如，有一个对象数组，对象属性包含 username、address、age 等，现在需要一个由 username 组成的数组，这样的场景就非常适合 .map() 方法。

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' ]

复制代码

从上面的接口可以看到，.map() 不会对原数组进行改造。

3. 回调数组中的某些元素

可以将指定的元素翻倍，而不是将数组中的每个元素都翻倍。例如，只对数组中的奇数元素进行翻倍。

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 ]

复制代码

4. 将字符串转换为数组

可以使用 .map() 方法将字符串转换为数组。

const language = "China";const map = Array.prototype.map;const letters = map.call(language, (eachLetter) => `${eachLetter}`);
console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]

复制代码

5. 在 React.js 中渲染列表

还可以在 React 中使用 .map() 来渲染一个列表。

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"));

复制代码

发布于: 4 小时前阅读数: 5

原文链接:【http://xie.infoq.cn/article/ea141cdb050520fe3c661a98a】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

JavaScript 数组方法 .map() 的 5 个使用场景

语法

参数

返回值

1. 元素翻倍

2. 元素格式化

3. 回调数组中的某些元素

4. 将字符串转换为数组

5. 在 React.js 中渲染列表

devpoint

评论