JS--配列のすべての要素に順番に同じ処理を行う

配列のすべての要素に順番に同じ処理を行う

 

【開発環境】

OS：Win11（64ビット）

VSCode1.72.2、

クロム

【要素に対して順番に処理する】

Array オブジェクトの map メソッドを使うと、配列に含まれる要素に対して順番にコールバック関数を呼び出し処理を行うことができます。

 

・書式
配列名.map( コールバック関数(要素の値) )
配列名.map( コールバック関数(要素の値, 要素のインデックス) )
配列名.map( コールバック関数(要素の値, 要素のインデックス, 配列) )

 

map メソッド→配列に含まれる要素を先頭から順に取り出しコールバック関数を呼び出します。更に、map メソッドはコールバック関数から戻された値を要素に持つ新しい配列を作成し戻り値として返します。

 

コールバック関数は、現在取り出されている要素の値、要素のインデックス、そして配列そのものを引数にして呼び出されます。コールバック関数の中では要素に対する処理を記述し、戻り値として要素の新しい値を返します。

 

サンプル文

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(function(element){
  return element.toUpperCase();//すべての文字を大文字にする
});

console.log(newfruit);//大文字に成る
> ["APPLE", "GRAPES", "MELON", "ORANGE"]

console.log(fruit);//影響されず、元の小文字のまま
> ["Apple", "Grapes", "Melon", "Orange"]

アロー関数式を使うと

let fruit = ['Apple', 'Grapes', 'Melon', 'Orange'];
let newfruit = fruit.map(element => element.toUpperCase());

console.log(newfruit);
> ["APPLE", "GRAPES", "MELON", "ORANGE"]

console.log(fruit);
> ["Apple", "Grapes", "Melon", "Orange"]