这篇文章给大家分享的是有关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 );
输出结果如下
在该示例中,对于数值“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 ); });
输出结果是一样的都为
正如您在此示例中看到的,forEach和map获得的结果是相同的。
那么,它们有什么不同,大一点的不同就是是否具有返回值。
换句话说,forEach只是一种执行方法,而map在执行后将结果作为数组数据返回。
我们具体看示例
forEach:
var result = [1,2,3].forEach(function( value ) { return value * 2; }); console.log( result );
输出结果如下为:
forEach的返回值看不到。
map:
var result = [1,2,3].map(function( value ) { return value * 2; }); console.log( result );
输出结果为
可以将数组数据作为执行结果返回。
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 );
输出结果如下
此外,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 );
输出结果如下
在过去,“回调函数”被指定为“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 );
输出结果如下
在此示例中,您可以看到关键字在数组order中设置,从中获取与对象中拥有的关键字匹配的“price”并将其作为数组返回。
感谢各位的阅读!关于JavaScript中如何进行数组处理就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:JavaScript中如何进行数组处理-创新互联
标题路径:https://www.cdcxhl.com/article36/pghsg.html
成都网站建设公司_创新互联,为您提供网站内链、动态网站、网页设计公司、外贸建站、服务器托管、网站设计公司
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联