6 个JavaScript 中Map() 的用例

38acdb4f01cceaeba5c6e90cddbf9d02.png

英文 | https://betterprogramming.pub/6-use-cases-for-map-in-javascript-a09f51ea2d2c

翻译 | 杨小爱

map( ) 函数通过调用用户提供的回调函数创建一个新数组。该函数访问调用数组中的每个元素。您可以将 map( ) 方法视为经过一个循环并在回调函数中编写语句以构造一个新数组。

参数是什么?

参数是回调函数和执行回调函数时用作“this”的值。

回调函数

callBackFunction:对数组中的每个元素都调用该函数,当回调函数执行完毕后,将返回值添加到将使用map()构造的新数组中。

currentValue:它是数组的当前元素,回调函数遍历它。

index:回调函数正在处理的当前元素的索引。

array:就是回调函数所经过的数组。

This

thisArgument — 这是在执行 callBackFunction 时用作 this 的值。

1、将数组元素加倍

您可以使用 map() 方法从另一个数组创建一个新数组。例如,您可以将整数数组的元素加倍并从初始数组构造一个新数组。

let initialArray = [1,2,3,4,5]


let doubles = initialArray.map( function(num) {
  return num*2
})


console.log(initialArray); // returns [1,2,3,4,5]
console.log(doubles); // returns [2,4,6,8,10]

你也可以使用箭头函数来做同样的操作。

let initialArray = [1,2,3,4,5]
let doubles = initialArray.map(x => x * 2);
console.log(initialArray); // returns [1,2,3,4,5]
console.log(doubles); // returns [2,4,6,8,10]

2、 重新格式化数组中的对象

您可以使用 map() 方法重新格式化对象数组。例如,您有一个包含人名和姓氏的对象数组。此外,您希望在 people 数组中创建一个包含人员全名的新数组。

var lineup = [
  {
    id: 1,
    firstName: "Magic",
    lastName: "Johnson"
  }, {
    id: 2,
    firstName: "Kobe",
    lastName: "Bryant"
  }, {
    id: 3,
    firstName: "Lebron",
    lastName: "James"
  }, {
    id: 4,
    firstName: "Kareem",
    lastName: "Abdul-Jabbar"
  }, {
    id: 5,
    firstName: "Shaquille",
    lastName: "O’Neal"
  }
];

现在,您可以创建一个包含重新格式化对象的新数组。

let lineupSpeech = lineup.map( player => {
 let newObj = {};
 newObj["fullName"] = player.firstName + " " + player.lastName;
 return newObj;
 })


console.log(lineup);
/*
[
  { id: 1, firstName: 'Magic', lastName: 'Johnson' },
  { id: 2, firstName: 'Kobe', lastName: 'Bryant' },
  { id: 3, firstName: 'Lebron', lastName: 'James' },
  { id: 4, firstName: 'Kareem', lastName: 'Abdul-Jabbar' },
  { id: 5, firstName: 'Shaquille', lastName: 'O’Neal' }
]
*/
console.log(lineupSpeech);
/*
[
  { fullName: 'Magic Johnson' },
  { fullName: 'Kobe Bryant' },
  { fullName: 'Lebron James' },
  { fullName: 'Kareem Abdul-Jabbar' },
  { fullName: 'Shaquille O’Neal' }
]
*/

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

您可以将指定的元素加倍,而不是将数组中的每个元素都加倍。例如,如果元素是奇数,您可能希望将它们加倍。

const numArray = [1, 2, 3, 4];
const sqrts = numArray.map( (num) => {
  return num % 2 === 1 ? Math.sqrt(num): num
 } );

4、将字符串转换为数组

您可以使用 map() 方法将字符串转换为数组。为此,您可以从 .call() 方法获得帮助。

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


console.log(letters) //  ['J','a','v','a','S','c','r','i','p','t']

5、 遍历一个 NodeList

您可以使用 map() 方法遍历由 querySelectorAll() 收集的对象。这是可能的,因为 querySelectorAll() 返回一个 NodeList。

let NodeList = document.querySelectorAll(“p”);


let values = Array.prototype.map.call(NodeList, function(obj) {
  return obj.value
})

6、在 React.js 中渲染一个列表

您还可以在使用 React 库时使用 map()。你可以在 React 中渲染一个列表。

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

总结

JavaScript 中的内置函数很有用。您可以使用它来构造更复杂的函数。因此,了解这些函数对提高您对该编程语言的了解非常重要。

map() 也是一个有用的内置 javascript 方法。您可以从另一个数组创建一个新数组,而无需使用 while 或 for 循环。

综上所述,本文中map()方法的使用案例如下:

  • 将数组的元素加倍

  • 重新格式化数组中的对象

  • 对数组中的某些元素应用回调

  • 将字符串转换为数组

  • 遍历 NodeList

  • 在 React 库中渲染列表

最后,希望今天的内容对您有所帮助,如果您觉得今天内容有用的话,请记得分享给您身边的朋友,也许可以帮助到他。

感谢您的阅读,祝您编程愉快!

学习更多技能

请点击下方公众号

bee2a7b2edcbf5753695a70f33a2798e.gif

9dc5203431a292ec80a10bc68e328602.png

144c0f44c6d055a823dbbb732625db2e.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值