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

配列に含まれる要素について、コールバック関数を呼び出し関数から戻ってきた値を配列の要素とした新しい配列を作成することができます。例えばすべての要素の値を10倍したり、すべての要素の値を大文字に変換した新しい配列を作成する、といったことができます。ここでは JavaScript で配列のすべての要素に順番に同じ処理を行う方法について解説します。

(Last modified: 2024-09-04)

要素に対して順番に処理する(mapメソッド)

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"]

map メソッドの引数として記述したコールバック関数の中で、引数として受け取った要素の値を toUpperCase メソッドを使ってすべての文字を大文字に変換した値を戻り値として返しています。すべての要素に対して順番に同じ処理を行ったあと、戻ってきた値を要素とする新しい配列を作成して map メソッドの戻り値として返しています。

新しい配列に含まれる要素の値は、元の配列の要素の値をすべて大文字にしたものですが、 map メソッドは元の配列には何も行わないので元の配列は変更されていません。

なおコールバック関数はアロー関数式を使って次のように記述することもできます。(アロー関数式については「アロー関数式を使って関数を定義する」を参照されてください)。

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"]

-- --

JavaScript で配列のすべての要素に順番に同じ処理を行う方法について解説しました。

著者 / TATSUO IKURA

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。