登录  /  注册
首页 > web前端 > js教程 > 正文

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

不言
发布: 2019-01-09 15:25:39
原创
6897人浏览过

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

JavaScript

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

var array = [ 数组数据 ];
array.map(回调函数);
登录后复制

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

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

如何使用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

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”并将其作为数组返回。

以上就是JavaScript中进行数组处理的map()方法的使用方法分析的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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