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倍にした配列を割り当てているので、出力結果が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 のコールバック関数

コールバック関数にはパラメーターが 1 つしかないことを見てきましたが、実際には、これを使用して 3 つのパラメーターを持つことができます。

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

});

Value は配列の値です

index は配列のインデックス番号です

array は現在処理中の配列です

たとえば、次のようになります。次の例では、パラメータ インデックスを使用して偶数の値を 2 倍にします。

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

出力結果は次のとおりです。

さらに、マップには元の配列と一致しないエラーがあります データに変更を加える関数ですが、3 番目のパラメーターの配列を使用すると、元のデータを変更することもできます。

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」の第一引数に「コールバック関数」を指定していましたが、実際、2 番目の引数として任意の「オブジェクト」を指定できます。

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

これにより、指定された配列とオブジェクトを組み合わせて、より便利なプログラミングが可能になります。

たとえば、次の例では、map の 2 番目のパラメータとして食品単純オブジェクト foodList が指定されています。

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

オブジェクトから任意のキーワードを指定し、「価格」を返します。

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

出力は次のとおりです

#この例では、キーが配列の順序で設定されていることがわかります。オブジェクト内で所有するキーで取得した値が「price」と一致し、配列として返します。

以上がJavaScriptの配列処理におけるmap()メソッドの使い方の解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。