你应该知道的 JavaScript Array.map() 的 5 种用途

原创 前端全栈开发 教程 JavaScript 73阅读 2018-11-14 11:04:50 举报

从经典的 for 循环到forEach()方法,用于迭代数据集合的各种技术和方法比比皆是。但是现在比较流行的方法是.map()方法。

.map()通过指定函数调用一个数组中每一项元素,来创建一个新数组。.map()是一种 non-mutating(非变异) 方法,它创建一个新数组,而不是只对调用数组进行更改的 mutating(变异) 方法。这可能很难记住。

在这篇文章中,我们将探讨一下 JavaScript 中.map()的 4 个值得注意的用法。让我们开始!

在数组中的每一项元素上调用一个函数
将字符串转换为数组
在 JavaScript 库中用于渲染列表
重新格式化数组对象
小技巧使用案例

1. 在数组中的每一项元素上调用一个函数

如前所述,.map()接受回调函数作为其参数之一,该函数的一个重要参数是由该函数处理的项的当前值。这是一个必需的参数。有了这个参数,我们可以修改数组中的每个单独项,并在其上创建一个新元素。这里有一个例子:

我们可以看到,原数组sweetArray并没有被修改,所以.map()是一种non-mutating(非变异)方法。这里值得一提的是 forEach() 方法,它是遍历数组,对原来的数据操作,会改变原数组。

这甚至可以进一步简化,使其更清洁:

拥有像sweetArray.map(makeSweeter)这样的代码可以让你在跳转到这段代码时更具可读性。

将字符串转换为数组
已知的.map()属于 Array 原型。 我们如何使用它将字符串转换为数组。 不用担心,我们不需要再开发一个方法来处理字符串,而是使用特殊的.call()方法。

JavaScript 中的所有内容都是对象,方法只是附加到这些对象的函数。.call()允许我们利用另一个对象的上下文。 因此,我们将数组中的.map()上下文复制到字符串。

.call()可以传递参数,要使用的上下文和“参数原始函数的参数”。 听起来有点拗口? 这是一个例子:

这里,我们只是在String上使用.map()的上下文,并传递了.map()所期望的函数参数。 你可以看看控制台里打印出来的内容。

这类似于 String 的.split()方法,不过.split()方法只能在返回数组之前修改每个单独的字符串字符。

在 JavaScript 库中用于渲染列表

像React 这样的 JavaScript 库利用.map()来渲染列表中的项目。这需要 JSX 语法,但是.map()方法包含在类似于 mustache 的 JSX 语法中。这是 React 组件的一个很好的例子。

{names.map(name =>
{name}
)}
); const rootElement = document.getElementById("root"); ReactDOM.render(
, rootElement);

如果你不熟悉 React ,那么我告诉这是 React 中的一个简单的无状态组件,它使用列表渲染div。 使用.map()渲染单个列表项以迭代最初创建的names数组。 此组件使用 ReactDOM 渲染 ID为 root 的 DOM 元素 。

重新格式化数组对象

如何处理数组中的对象?.map()可用于迭代数组中的对象,并以与传统数组类似的方式, 修改每个单独对象的内容 并返回一个新数组。 这个修改是基于回调函数中返回的内容来完成的。这里有一个例子:

我们所做的就是使用括号和点符号简单地修改数组中的每个对象。这个用例可以用于在前端应用程序上保存或解析之前处理或压缩接收到的数据。

小技巧使用案例

通常情况下,.map()方法中的 callback 函数只需要接受一个参数,就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。 生成新数组元素的 callback 函数,有 三个参数:

currentValue – callback 的第一个参数,数组中正在处理的当前元素,最常用的参数。
index – callback 的第二个参数,数组中正在处理的当前元素的索引。
array – callback 的第三个参数,map 方法被调用的数组。
来看一下例子:

还有一个非常实用的小技巧,像.map().reduce(),.filter()这些方法支持链式调用。例如:

小结

在这篇文章中,我们研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是,与其他方法结合使用时, .map() 的函数可以得到强大的扩展和利用。 尝试找出更多用例。 在评论区留下您的意见,问题和反馈,我们将不胜感激!
enterimagedescriptionhere

对web开发技术感兴趣的同学,欢迎加入Q群:943129070,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复