0

0

JavaScript中进行数组处理的map()方法的使用方法分析

不言

不言

发布时间:2019-01-09 15:25:39

|

7644人浏览过

|

来源于php中文网

原创

本篇文章将给大家介绍关于处理数组数据的map()方法的用法以及map()方法与foreach语句的区别,内容很详细,下面我们来看具体的内容。

JavaScript

首先我们来看一下map()的基本语法

var array = [ 数组数据 ];
array.map(回调函数);

Map是用于数组数据的方法,可以为每个元素执行“回调函数” 并将结果作为新数组返回。

换句话说,通过在此函数中编写要执行的进程,您可以对数组的每个元素执行任何操作!

立即学习Java免费学习笔记(深入)”;

如何使用map方法迭代数组?

以下示例是对包含数字数据的数组使用map方法的示例

var items = [1,2,3,4,5];
 
var result = items.map(function( value ) {
    return value * 2;
});
console.log( result );

输出结果如下

JavaScript中进行数组处理的map()方法的使用方法分析

在该示例中,对于数值“1到5”的数组用回调函数执行对每个元素进行加倍的处理。

出于这个原因,我们分配一个数组,其结果翻2倍作为“result ”的返回值,因此可以看到输出结果都变成了其本身的2倍。

最初,它都是使用for语句或while语句编写循环,但使用map非常方便,因为它可以通过一个非常简单的程序来实现!

在JavaScript中还有一个与map()方法用法类似的reduce()方法,关于reduce()方法可以参考这篇文章:JavaScript中的reduce如何使用

关于reduce()和map()方法的区别可以参考这篇文章:JavaScript中map()和reduce()有什么区别

map()与forEach语句的区别?

map()类似于forEach语句,它可以以相同的方式操作数组。

我们来看具体的示例

//forEach
[1,2,3].forEach(function( value ) {
   console.log( value );
});
 
 
//map
[1,2,3].map(function( value ) {
    console.log( value );
});

输出结果是一样的都为

JavaScript中进行数组处理的map()方法的使用方法分析

正如您在此示例中看到的,forEach和map获得的结果是相同的。

那么,它们有什么不同,最大一点的不同就是是否具有返回值。

换句话说,forEach只是一种执行方法,而map在执行后将结果作为数组数据返回。

我们具体看示例

forEach:

var result = [1,2,3].forEach(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

输出结果如下为:

微信截图_20190109144506.png

站长俱乐部购物系统
站长俱乐部购物系统

功能介绍:1、模块化的程序设计,使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外,这些过程还提供了不同的调用参数,以实现不同的效果;2、阅读等级功能,可以加密产品,进行收费管理;3、可以完全可视化编辑文章内容,所见即所得;4、无组件上传文件,服务器无需安装任何上传组件,无需支持FSO,即可上传文件。可限制文件上传的类

下载

forEach的返回值看不到。

map:

var result = [1,2,3].map(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

输出结果为

微信截图_20190109144722.png

可以将数组数据作为执行结果返回。

map的回调函数

之前我们看回调函数只有一个参数,但实际上你可以用得到有三个参数!

数组数据.map( function( value, index, array ) {

});

Value是数组的值

index是数组的索引号

array是当前正在处理的数组

例如,在下面的示例中,我们将使用参数index,将index号的值为偶数的值翻倍

var items = [1,2,3,4,5,6,7,8,9];
var result = items.map( function( value, index, array ) {
    if( index % 2 !== 0 ) {
        return value * 2;
    }
    else {
        return value;
    }
});
console.log( result );

输出结果如下

微信截图_20190109145948.png

此外,map具有不对原始数组数据进行任何更改的功能,但如果使用第三个参数array ,则还可以更改原始数据!

var items = [1,2,3,4,5,6,7,8,9];
 
items.map( function( value, index, array ) {
 
    array[index] = value * 2;
 
});
 
console.log( items );

输出结果如下

微信截图_20190109150800.png

在过去,“回调函数”被指定为“map”的第一个参数,但实际上你可以指定任意“对象”作为第二个参数!

var array = [ 数组数据 ]; 
//指定对象为第2个参数
array.map( 回调函数, 对象 );

这使得可以组合指定的数组和对象以实现更方便的编程。

例如,在下面的示例中,将食物简单对象foodList指定为map的第二个参数。

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
数组.map( function( value ) {
 
}, foodList );

我们从对象中指定任意关键字并返回“price”。

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
var order = ['草莓', '猕猴桃'];
var result = order.map( function( value, index, array ) {
    return this[value];
 
}, foodList );
console.log( result );

输出结果如下

微信截图_20190109151827.png

在此示例中,您可以看到关键字在数组order中设置,从中获取与对象中拥有的关键字匹配的“price”并将其作为数组返回。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Java JVM 原理与性能调优实战
Java JVM 原理与性能调优实战

本专题系统讲解 Java 虚拟机(JVM)的核心工作原理与性能调优方法,包括 JVM 内存结构、对象创建与回收流程、垃圾回收器(Serial、CMS、G1、ZGC)对比分析、常见内存泄漏与性能瓶颈排查,以及 JVM 参数调优与监控工具(jstat、jmap、jvisualvm)的实战使用。通过真实案例,帮助学习者掌握 Java 应用在生产环境中的性能分析与优化能力。

3

2026.01.20

PS使用蒙版相关教程
PS使用蒙版相关教程

本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

55

2026.01.19

java用途介绍
java用途介绍

本专题整合了java用途功能相关介绍,阅读专题下面的文章了解更多详细内容。

67

2026.01.19

java输出数组相关教程
java输出数组相关教程

本专题整合了java输出数组相关教程,阅读专题下面的文章了解更多详细内容。

37

2026.01.19

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

10

2026.01.19

xml格式相关教程
xml格式相关教程

本专题整合了xml格式相关教程汇总,阅读专题下面的文章了解更多详细内容。

11

2026.01.19

PHP WebSocket 实时通信开发
PHP WebSocket 实时通信开发

本专题系统讲解 PHP 在实时通信与长连接场景中的应用实践,涵盖 WebSocket 协议原理、服务端连接管理、消息推送机制、心跳检测、断线重连以及与前端的实时交互实现。通过聊天系统、实时通知等案例,帮助开发者掌握 使用 PHP 构建实时通信与推送服务的完整开发流程,适用于即时消息与高互动性应用场景。

16

2026.01.19

微信聊天记录删除恢复导出教程汇总
微信聊天记录删除恢复导出教程汇总

本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

152

2026.01.18

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

139

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.2万人学习

Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号