JavaScript中進行陣列處理的map()方法的使用方法分析

本篇文章將介紹給大家關於處理陣列資料的map()方法的用法以及map()方法與forEach語句的區別，內容很詳細，下面我們來看具體的內容。

首先我們來看看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()方法的使用方法分析中還有一個與map()方法用法類似的reduce()方法，關於reduce()方法可以參考這篇文章：

JavaScript中進行陣列處理的map()方法的使用方法分析中的reduce如何使用

關於reduce()和map()方法的差別可以參考這篇文章：

JavaScript中進行陣列處理的map()方法的使用方法分析中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中進行陣列處理的map()方法的使用方法分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！