JavaScript中如何进行数组处理-创新互联

这篇文章给大家分享的是有关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中如何进行数组处理

在该示例中，对于数值“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中如何进行数组处理

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

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

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

我们具体看示例

forEach：

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

输出结果如下为：

JavaScript中如何进行数组处理

forEach的返回值看不到。

map：

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

输出结果为

JavaScript中如何进行数组处理

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

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 );

输出结果如下

JavaScript中如何进行数组处理

此外，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 );

输出结果如下

JavaScript中如何进行数组处理

在过去，“回调函数”被指定为“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 );

输出结果如下

JavaScript中如何进行数组处理

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

感谢各位的阅读！关于JavaScript中如何进行数组处理就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：JavaScript中如何进行数组处理-创新互联
网站路径：http://scjbc.cn/article/pghsg.html

JavaScript中如何进行数组处理-创新互联

其他资讯