数组方法map有返回值么（数组中的map方法）

英文 | 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.mapconst 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 库中渲染列表

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

感谢您的阅读，祝您编程愉快！

到此这篇数组方法map有返回值么（数组中的map方法）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：双管反激电路图（双管反激电路图片）

下一篇：电路工作原理分析（电路工作原理分析实验报告）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/jszy-jszl/46020.html

相关文章：