JavaScriptで配列メソッドを使用する方法：反復メソッド

序章

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

iteration メソッドと呼ばれる3番目のクラスの配列メソッドがあります。これは、配列内のすべてのアイテムを一度に1つずつ操作するメソッドです。 これらのメソッドはループと密接に関連しています。 このチュートリアルでは、反復法に焦点を当てます。

このチュートリアルを最大限に活用するには、配列の作成、インデックス作成、変更、およびループにある程度精通している必要があります。これは、チュートリアルJavaScriptでの配列の理解で確認できます。

このチュートリアルでは、反復メソッドを使用して配列をループし、配列内の各アイテムに対して関数を実行し、配列の目的の結果をフィルタリングし、配列アイテムを1つの値に減らし、配列を検索して値またはインデックスを見つけます。

注：Array.prototypeはArrayオブジェクト自体を参照するため、配列メソッドはArray.prototype.method()として正しく記述されます。 簡単にするために、名前をmethod()と単純にリストします。

矢印機能を理解する

このチュートリアル全体の多くの例では、JavaScript 矢印関数式を使用します。これは、等号とそれに続く大なり記号=>で表されます。

関数は、実行可能な再利用可能なコードのブロックです。 従来、関数は次の構文で記述できます。

var example = function() {
  // code to execute
}

example();

執筆時点での最新バージョンのJavaScriptでは、次の構文で記述できる矢印関数を使用できます。

var example = () => {
  // code to execute
}

example();

どちらの場合も、括弧にはパラメーターを含めることができます。 パラメータが1つしかない場合は、次のように括弧を省略できます。

var example = parameter1 => {
  // code to execute
}

このチュートリアルの例では、矢印関数の構文を使用します。 JavaScriptの関数の詳細を読んで理解するには、Mozilla DeveloperNetworkの関数リファレンスを読んでください。

forEach（）

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

変数fishに割り当てられた次の配列から始めましょう。

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

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

// Print out each item in the array
fish.forEach(individualFish => {
    console.log(individualFish);
})

そうすると、次の出力が表示されます。

Outputpiranha
barracuda
cod
eel

これを行う別の方法は、 for loop キーワードを使用して、配列の長さプロパティに対してテストすることです。

// Loop through the length of the array
for (let i = 0; i < fish.length; i++) {
    console.log(fish[i]);
}

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

地図（）

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

反復法map()の使用方法の例として、ループの各反復をコンソールに出力できます。 map()は元の配列を変更せず、代わりに新しい配列値を返します。

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

// Print out each item in the array
let printFish = fish.map(individualFish => {
    console.log(individualFish);
});

printFish;

Outputpiranha
barracuda
cod
eel

map()を使用して、配列内の各アイテムの値を変更することもできます。 これを示すために、fish配列の各項目の最後にsを追加して、各単語を複数形にします。

// Pluralize all items in the fish array
let pluralFish = fish.map(individualFish => {
    return `${individualFish}s`;
});

pluralFish;

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

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

フィルター（）

filter()メソッドは、特定のテストの結果に合格する要素を含む新しい配列を作成します。

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

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

// Filter all creatures that start with "s" into a new list
let filteredList = seaCreatures.filter(creature => {
  return creature[0] === "s";
});

filteredList;

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

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

filter()は反復法であり、元の配列を変更しません。

減らす（）

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

これは、配列内のすべての数値の合計を求めるなど、数値でよく見られます。

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

// Get the sum of all numerical values
let sum = numbers.reduce((a, b) => {
    return a + b;
});

sum;

Output108

reduce()は、文字列およびその他のデータ型でも使用できます。 reduce()によって返される値は、数値、文字列、配列、またはその他のデータ型です。 reduce()は、元の配列を変更しない反復法です。

探す（）

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

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

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

次に、find()メソッドを使用して、配列内のクリーチャーのいずれかが頭足類であるかどうかをテストします。

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.find(isCephalopod);

Outputoctopus

octopusは、isCephalopod()関数のテストを満たす配列の最初のエントリであるため、返される最初の値です。

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

findIndex（）

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

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

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

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

// Check if a given value is a cephalopod
const isCephalopod = cephalopod => {
    return [ "cuttlefish", "octopus" ].includes(cephalopod);
}

seaCreatures.findIndex(isCephalopod);

Output1

octopusは、テストに一致する最初の項目であり、1のインデックスを持っているため、返されるのはインデックス番号です。

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

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

seaCreatures.findIndex

Output-1

findIndex()メソッドは、多くのアイテムを含む配列を操作する場合に特に便利です。

結論

このチュートリアルでは、JavaScriptに組み込まれている主要な反復配列メソッドを確認しました。 反復法は、配列内のすべての項目に対して機能し、多くの場合、新しい機能を実行します。 配列をループする方法、配列内の各項目の値を変更する方法、配列をフィルタリングおよび縮小する方法、値とインデックスを見つける方法について説明しました。

配列の基本を確認するには、JavaScriptでの配列についてをお読みください。 Javascriptの構文の詳細については、「JavaScriptの構文とコード構造について」のチュートリアルを参照してください。