TOC

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

前書き

JavaScriptでは、https：//www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#arrays [array]データ型は要素のリストで構成されます。 JavaScript開発者が配列を操作するために利用できる多くの便利な組み込みメソッドがあります。 元の配列を変更するメソッドは、https：//www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methods [* mutator * methods]、およびhttps://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-accessor-methods[accessor methods]として知られる新しい値または表現を返します。

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

このチュートリアルを最大限に活用するには、配列の作成、インデックス付け、変更、およびループ処理にある程度精通している必要があります。これについては、チュートリアルhttps://www.digitalocean.com/community/tutorials/understandingで確認できます。 -arrays-in-javascript [JavaScriptの配列について]。

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

矢印機能について

このチュートリアル全体の多くの例では、JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions [矢印関数式]を使用します。これらは等号とその後に続く大なり記号： + ⇒ +。

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

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

example();

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

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

example();

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

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

このチュートリアルの例では、矢印関数の構文を使用します。 JavaScriptの関数の詳細を読んで理解するには、https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions [Mozilla Developer Networkの関数リファレンス]を読んでください。

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

これを行う別の方法は、https：//www.digitalocean.com/community/tutorials/how-to-construct-for-loops-in-javascript [+ 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（）`は元の配列を変更せず、代わりに新しい配列値を返します。 ` forEach（）`とは異なり、 ` 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（）+`を使用して、特定の文字で始まるリスト内の項目のみを含む新しい配列を返すことができます。 これを行うには、https：//www.digitalocean.com/community/tutorials/how-to-index-split-and-manipulate-strings-in-javascript#how-strings-are-indexed [string indexing]を利用できます。配列の各文字列項目の最初の項目（または文字）を呼び出します。

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（）

`+ 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（）`はhttps://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#strings[strings]およびその他のhttps：//www.digitaloceanでも使用できます。 com / community / tutorials / understanding-data-types-in-javascript [データ型]。 ` 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の主要な組み込み反復配列メソッドを確認しました。 反復メソッドは、配列内のすべてのアイテムを操作し、多くの場合新しい機能を実行します。 配列をループする方法、配列内の各項目の値を変更する方法、配列をフィルター処理して削減する方法、および値とインデックスを見つける方法について説明しました。

配列の基本を確認するには、https：//www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript [JavaScriptの配列について]をお読みください。 JavaScriptの構文の詳細については、https：//www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure-in-javascript [「JavaScriptの構文とコード構造を理解する」のチュートリアルを参照してください。 ]

Related