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

投稿日: 2019-11-08 2022-10-16
タグ: Development, javascript

序章

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

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

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

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

注：配列メソッドは次のように正しく記述されます Array.prototype.method()、なので Array.prototype を参照 Array オブジェクト自体。簡単にするために、名前を次のようにリストします。 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（）

The 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() この特定のタスクについては、より簡潔でわかりやすいです。

地図（）

The 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() 配列内の各項目の値を変更します。これを実証するために、 s の各項目の最後まで fish 各単語を複数形にする配列。

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

pluralFish;

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

オリジナル fish 変数は変更されていませんが、 pluralFish 元の変数の変更されたバージョンが含まれるようになりました。

フィルター（）

The 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' ]

配列内のどのアイテムに s で 0 インデックスを作成し、結果を新しい変数に割り当てます。

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

減らす（）

The 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() 元の配列を変更しない反復法です。

探す（）

The 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() 関数の場合、最初に返される値です。

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

findIndex（）

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

同じものを使用できます seaCreatures からの例 find() 方法。

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

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

結論

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

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

getdocs

13036