Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript配列の反復

配列反復メソッドは、すべての配列項目で動作します。

JavaScript配列 forEach()

forEach()メソッドは、配列要素ごとに関数(コールバック関数)を1回呼び出します。

例

const numbers = [45, 4, 9, 16, 25]; let txt = ""; numbers.forEach(myFunction); function myFunction(value, index, array) {  txt += value + "<br>"; }

この関数は3つの引数を取ることに注意してください。

  • アイテム値
  • アイテムインデックス
  • 配列自体

上記の例では、valueパラメータのみを使用しています。この例は次のように書き換えることができます。

例

const numbers = [45, 4, 9, 16, 25]; let txt = ""; numbers.forEach(myFunction); function myFunction(value) {  txt += value + "<br>"; }

JavaScript配列 map()

map()メソッドは、各配列要素に対して関数を実行して新しい配列を作成します。 map()メソッドは、値のない配列要素に対して関数を実行しません。 map()メソッドは元の配列を変更しません。

この例では、各配列値を2で乗算します。

例

const numbers1 = [45, 4, 9, 16, 25]; const numbers2 = numbers1.map(myFunction); function myFunction(value, index, array) {   return value * 2; }

この関数は3つの引数を取ることに注意してください。

・アイテム値
・アイテムインデックス
・配列自体

コールバック関数がvalueパラメーターのみを使用する場合、indexおよびarrayパラメーターは省略できます。

例

const numbers1 = [45, 4, 9, 16, 25]; const numbers2 = numbers1.map(myFunction); function myFunction(value) {   return value * 2; }

JavaScript Array flatMap()

ES2019では、JavaScriptにArray flatMap()メソッドが追加されました。
flatMap()メソッドは、まず配列のすべての要素をマップし、次に配列をフラット化して新しい配列を作成します。

例

const myArr = [1, 2, 3, 4, 5, 6]; const newArr = myArr.flatMap((x) => x * 2);

JavaScript配列 filter()

filter()メソッドは、テストに合格した配列要素で新しい配列を作成します。

この例では、18より大きい値を持つ要素から新しい配列を作成します。

例

const numbers = [45, 4, 9, 16, 25]; const over18 = numbers.filter(myFunction); function myFunction(value, index, array) {   return value > 18; }

この関数は3つの引数を取ることに注意してください。

・アイテム値
・アイテムインデックス
・配列自体

上記の例では、コールバック関数はインデックスと配列パラメーターを使用しないため、省略できます。

例

const numbers = [45, 4, 9, 16, 25]; const over18 = numbers.filter(myFunction); function myFunction(value) {   return value > 18; }

JavaScript配列 reduce()

reduce()メソッドは、各配列要素に対して関数を実行して、単一の値を生成(縮小)します。 reduce()メソッドは、配列内で左から右に機能します。reduceRight()も参考にしてください。
reduce()メソッドは元の配列を縮小しません。

この例では、配列内のすべての数値の合計を見つけます。

例

const numbers = [45, 4, 9, 16, 25]; let sum = numbers.reduce(myFunction); function myFunction(total, value, index, array) {   return total + value; }

この関数は4つの引数を取ることに注意してください。

・合計(初期値 / 前回の戻り値)
・アイテム値
・アイテムインデックス
・配列自体

上記の例では、indexおよびarrayパラメーターを使用していません。次のように書き換えることができます。

例

const numbers = [45, 4, 9, 16, 25]; let sum = numbers.reduce(myFunction); function myFunction(total, value) {   return total + value; }

reduce()メソッドは初期値を受け入れることができます。

例

const numbers = [45, 4, 9, 16, 25]; let sum = numbers.reduce(myFunction, 100); function myFunction(total, value) {   return total + value; }

JavaScript配列 reduceRight()

reduceRight()メソッドは、各配列要素に対して関数を実行して、単一の値を生成(縮小)します。 reduceRight()配列内で右から左に機能します。reduce()も参考にしてみてください。
reduceRight()メソッドは元の配列を縮小しません。

この例では、配列内のすべての数値の合計を見つけます。

例

const numbers = [45, 4, 9, 16, 25]; let sum = numbers.reduceRight(myFunction); function myFunction(total, value, index, array) {   return total + value; }

この関数は4つの引数を取ることに注意してください。

・合計 (初期値 / 前回の戻り値)
・アイテム値
・アイテムインデックス
・配列自体

上記の例では、indexおよびarrayパラメーターを使用していません。次のように書き換えることができます。

例

const numbers = [45, 4, 9, 16, 25]; let sum = numbers.reduceRight(myFunction); function myFunction(total, value) {   return total + value; }

JavaScript配列 every()

every()メソッドは、すべての配列値がテストに合格するかどうかをチェックします。

この例では、すべての配列値が18より大きいかどうかを確認します。

例

const numbers = [45, 4, 9, 16, 25]; let allOver18 = numbers.every(myFunction); function myFunction(value, index, array) {   return value > 18; }

この関数は3つの引数を取ることに注意してください。

・アイテム値
・アイテムインデックス
・配列自体

コールバック関数が最初のパラメーター(値)のみを使用する場合、他のパラメーターは省略できます。

例

const numbers = [45, 4, 9, 16, 25]; let allOver18 = numbers.every(myFunction); function myFunction(value) {   return value > 18; }

JavaScript配列 some()

some()メソッドは、一部の配列値がテストに合格するかどうかをチェックします。

この例では、一部の配列値が18より大きいかどうかを確認します。

例

const numbers = [45, 4, 9, 16, 25]; let someOver18 = numbers.some(myFunction); function myFunction(value, index, array) {   return value > 18; }

この関数は3つの引数を取ることに注意してください。

・アイテム値
・アイテムインデックス
・配列自体

JavaScript配列.from()

Array.from()メソッドは、長さプロパティを持つオブジェクトまたは反復可能なオブジェクトから Array オブジェクトを返します。

例

文字列から配列を作成します。

Array.from("ABCDEFG");

ブラウザのサポート

from()はES6(JavaScript 2015)の機能です 。

最新のすべてのブラウザーでサポートされています。

Chrome Edge Firefox Safari Opera
はい はい はい はい はい
from()はInternet Explorerではサポートされていません。

JavaScript Array.keys()

Array.keys()メソッドは、配列のキーを持つArray Iteratorオブジェクトを返します。

例

配列のキーを含むArray Iteratorオブジェクトを作成します。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; const keys = fruits.keys(); for (let x of keys) {   text += x + "<br>"; }

ブラウザのサポート

keys()はES6(JavaScript 2015)の機能です。

最新のすべてのブラウザーでサポートされています。

Chrome Edge Firefox Safari Opera
はい はい はい はい はい
keys()はInternet Explorerではサポートされていません。

JavaScript Array.entries()

例

配列反復子を作成し、キーと値のペアを反復処理します。

const fruits = ["Banana", "Orange", "Apple", "Mango"]; const f = fruits.entries(); for (let x of f) {   document.getElementById("demo").innerHTML += x; }

entries()メソッドは、キーと値のペアを持つArray Iteratorオブジェクトを返します。

[0, "バナナ"]
[1, "オレンジ"]
[2, "リンゴ"]
[3, "マンゴー"]

entries()メソッドは元の配列を変更しません。

ブラウザのサポート

entries()はES6(JavaScript 2015)の機能です 。

最新のすべてのブラウザーでサポートされています。

Chrome Edge Firefox Safari Opera
はい はい はい はい はい
entries()はInternet Explorer ではサポートされていません。

JavaScript Array with()

ES2023では、元の配列を変更せずに配列内の要素を更新する安全な方法としてArray with()メソッドが追加されました。

例

const months = ["Januar", "Februar", "Mar", "April"]; const myMonths = months.with(2, "March");

JavaScript Array.Spread (...)

... 演算子は、イテラブル(配列など)をより多くの要素に展開します。

例

const q1 = ["Jan", "Feb", "Mar"]; const q2 = ["Apr", "May", "Jun"]; const q3 = ["Jul", "Aug", "Sep"]; const q4 = ["Oct", "Nov", "May"]; const year = [...q1, ...q2, ...q3, ...q4];

ブラウザのサポート

spreadはES6(JavaScript 2015)の機能です。

最新のすべてのブラウザーでサポートされています。

Chrome Edge Firefox Safari Opera
はい はい はい はい はい
spreadはInternet Explorerではサポートされていません。

完全な配列リファレンス

配列の完全なリファレンスについては、完全なJavaScript配列リファレンスを参照してください。

このリファレンスには、配列のすべてのプロパティとメソッドの説明と例が含まれています。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル