JavaScriptの配列メソッドの使用方法：反復メソッド

紹介

JavaScriptでは、arrayデータ型は要素のリストで構成されています。JavaScriptの開発者が配列を操作するための多くの便利な組み込みメソッドがあります。元の配列を変更するメソッドはミューテータメソッドとして知られており、新しい値や表現を返すメソッドはアクセサメソッドとして知られています。

配列メソッドの第三のクラスとして、反復メソッドがあります。これは、配列内の各アイテムに対して一度に操作するメソッドです。これらのメソッドはループと密接に関連しています。このチュートリアルでは、反復メソッドに焦点を当てます。

このチュートリアルを最大限に活用するためには、配列の作成、インデックス付け、変更、およびループについてのいくつかの理解が必要です。これについては、チュートリアルJavaScriptでの配列の理解を確認できます。

このチュートリアルでは、イテレーションメソッドを使用して配列をループし、配列内の各アイテムに関数を実行し、配列の所望の結果をフィルタリングし、配列のアイテムを単一の値に縮小し、配列内を検索して値やインデックスを見つけます。

Arrow Functionsの理解

このチュートリアル全体での多くの例では、JavaScriptのアロー関数式が使用されます。これは等号の後に矢印が続く形式です：=>。

A function is a block of reusable code that can be executed. Traditionally, a function can be written with the following syntax:

var example = function() {
  // 実行するコード
}

example();

執筆時点でのJavaScriptの最新バージョンでは、アロー関数の使用が可能で、次の構文で記述できます：

var example = () => {
  // 実行するコード
}

example();

どちらの場合も、括弧内にパラメータを含めることができます。パラメータが1つだけの場合、括弧は省略することができます。例：

var example = parameter1 => {
  // 実行するコード
}

このチュートリアルの例では、アロー関数構文を使用します。JavaScriptの関数についてさらに理解するには、Mozilla Developer Networkの関数リファレンスを読んでください。Functions reference on the Mozilla Developer Network。

forEach()

forEach()メソッドは、配列内の各要素に対して関数を呼び出します。

次の配列を変数fishに割り当てましょう：

let fish = [ "piranha", "barracuda", "cod", "eel" ];

forEach()を使用して、fish配列の各アイテムをコンソールに出力できます。

// 配列内の各アイテムを出力する
fish.forEach(individualFish => {
	console.log(individualFish);
})

これを行うと、次の出力が得られます：

Output
piranha
barracuda
cod
eel

これを行う別の方法は、forループキーワードを使用し、それを配列のlengthプロパティと比較することです。

// 配列の長さをループする
for (let i = 0; i < fish.length; i++) {
	console.log(fish[i]);
}

上記のコードは、forEach()メソッドを使用した場合と同じ出力になります。配列で使用するために特に意図された反復方法として、forEach()はこの特定のタスクに対してより簡潔でわかりやすいです。

map()

map()メソッドは、配列内の各要素に対して関数の呼び出しを行い、その結果を新しい配列として作成します。

let fish = [ "piranha", "barracuda", "cod", "eel" ];

イテレーションメソッドmap()の使用例として、ループの各イテレーションをコンソールに出力することができます。map()は元の配列を変更せず、代わりに新しい配列の値を返します。// 配列内の各アイテムを出力する
let printFish = fish.map(individualFish => {
	console.log(individualFish);
});

printFish;

Output
piranha
barracuda
cod
eel

map()を使用して、配列内の各アイテムの値を変更することもできます。これを示すために、fish配列の各単語の末尾にsを追加して単語を複数形にします。// fish配列のすべてのアイテムを複数形にする
let pluralFish = fish.map(individualFish => {
	return `${individualFish}s`;
});

pluralFish;

Output
[ 'piranhas', 'barracudas', 'cods', 'eels' ]

元のfish変数は変更されませんが、pluralFishには元の変数の変更されたバージョンが含まれています。

filter()

filter()メソッドは、指定されたテストの結果をパスする要素を持つ新しい配列を作成します。

filter()を使用して、特定の文字で始まるリスト内の項目のみを含む新しい配列を返すことができます。これを行うには、文字列のインデックスを利用して、配列内の各文字列項目の最初の項目（または文字）を呼び出します。

let seaCreatures = [ "shark", "whale", "squid", "starfish", "narwhal" ];

// "s" で始まるすべての生物を新しいリストにフィルタリングする
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

Output
[ 'shark', 'squid', 'starfish' ]

配列内の項目が0インデックスでsを持っているかどうかをテストし、その結果を新しい変数に割り当てました。

filter()は反復処理メソッドであり、元の配列を変更しません。

reduce()

reduce()メソッドは、配列を単一の値に縮小します。

これは、配列内のすべての数値の合計を見つけるなど、数値で一般的に見られます。

let numbers = [ 42, 23, 16, 15, 4, 8 ];

// すべての数値値の合計を取得
let sum = numbers.reduce((a, b) => {
	return a + b;
});

sum;

Output
108

reduce()は、文字列や他のデータ型とも使用できます。 reduce()によって返される値は、数値、文字列、配列、またはその他のデータ型である可能性があります。 reduce()は、元の配列を変更しない反復処理メソッドです。

find()

find()メソッドは、指定されたテストをパスする配列内の最初の値を返します。

例として、海洋生物の配列を作成します。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

次に、配列内のどれかの生物が軟体動物であるかどうかをテストするためにfind()メソッドを使用します。

// 特定の値が軟体動物かどうかを確認する
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Output
octopus

関数isCephalopod()において、octopusが最初にテストを満たしたエントリーであったため、最初に返される値です。

find()メソッドは、多くの値を含む配列を操作するのに役立ちます。

findIndex()

findIndex()メソッドは、指定されたテストをパスする配列内の最初のインデックスを返します。

find()メソッドのseaCreaturesの例を使用できます。

let seaCreatures = [ "whale", "octopus", "shark", "cuttlefish", "flounder" ];

isCephalopodテストを使用して、最初の一致の値の代わりにインデックス番号を見つけます。

// 特定の値が軟体動物かどうかを確認する
const isCephalopod = cephalopod => {
	return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output
1

octopusは最初の一致する項目であり、インデックス番号が1であるため、インデックス番号が返されます。

テストが満たされない場合、findIndex() は-1を返します。

const isThereAnEel = eel => {
    return [ "eel" ].includes(eel);
}

seaCreatures.findIndex

Output
-1

findIndex() メソッドは、多くのアイテムを含む配列を扱う際に特に便利です。

結論

このチュートリアルでは、JavaScriptの主要な組み込みイテレーション配列メソッドを検討しました。イテレーションメソッドは配列内のすべてのアイテムに作用し、新しい関数を実行することがよくあります。配列をループし、各アイテムの値を変更し、配列をフィルタリングおよび縮小し、値とインデックスを検索する方法について説明しました。

配列の基本を復習するには、JavaScriptでの配列の理解を読んでください。JavaScriptの構文に関する詳細は、「JavaScriptの構文とコード構造の理解」のチュートリアルを参照してください。