JavaScript/配列

JavaScriptには、配列という便利なデータ構造があります。配列は、複数の値を一つのインスタンスに格納することができます。これにより、複数の値を扱う場合に便利です。配列には、文字列や数値などのプリミティブ型の値をはじめ、JavaScriptの全てのオブジェクトを格納することができます。
この章では、配列とその操作について学びます。配列の作成、要素の追加や削除、配列の検索など、配列に対する基本的な操作を学びます。また、配列を扱う上で役立つメソッドについても学びます。
配列はJavaScriptにおいて非常に重要なデータ構造であり、JavaScriptを学ぶ上で欠かせない部分です。この章を通じて、配列について深く理解し、JavaScriptのプログラミング能力を向上させてください。
JavaScriptでは、配列を作成するために配列リテラルと呼ばれる構文があります。配列リテラルは、角括弧( [ ] )で要素を囲んで定義されます。
以下は、配列リテラルを用いた配列の作成の例です。
上記の例では、fruitsという名前の配列を作成しています。配列リテラルの中に'apple'、'banana'、'orange'という3つの文字列が要素として含まれています。console.log()を用いて、配列の内容をコンソールに表示しています。
また、配列リテラルを使用することで、空の配列を作成することもできます。
異なる型のオブジェクトを含んだ配列を作ることも出来ます。
このように、配列リテラルは配列を簡単に作成するための便利な構文です。
JavaScriptの配列は、複数の値を格納できるデータ構造で、それぞれの値は配列内で一意のインデックス番号によって参照されます。インデックス番号は、0から始まる整数値で、配列内の要素の順序に従って割り当てられます。
配列の要素を参照するには、角括弧 [] 内に要素のインデックス番号を指定します。例えば、以下のように書くことで、配列aryの2番目の要素にアクセスすることができます。
C言語の配列のように、要素数を予め決め全ての要素の型が同じオブジェクトに型付き配列があります。
JavaScriptにおける配列は、Arrayコンストラクタ関数を使用して作成することができます。Arrayコンストラクタ関数は、以下のように使われます。
上記のコードのlengthは、配列の長さを表します。element0、element1、...、elementNは、配列に含める要素を表します。
また、Arrayコンストラクタ関数の代わりに、配列リテラルを使用することもできます。例えば、以下のように書くことができます。
こちらは、より簡潔で一般的に使用されます。
JavaScriptにおけるスプレッド構文は、配列の要素を展開するために使用されます。配列の要素を展開することにより、別の配列に追加することができます。スプレッド構文は、...という記号で表されます。
例えば、以下のように配列を作成して、スプレッド構文を使用して配列の要素を展開し、新しい配列に追加することができます。
上記の例では、...myArrayを使用して、myArrayの要素を新しい配列に追加しています。[...myArray, 4, 5, 6]は、myArrayの要素に4、5、6を追加した新しい配列を作成することになります。
また、スプレッド構文を使用して、配列を結合することもできます。
上記の例では、スプレッド構文を使用して、array1とarray2を結合し、新しい配列array3を作成しています。
スプレッド構文と Arrray.prototype.map メソッドを組み合わせたトリック
このコードは、5つの要素を持つ配列を作成し、それをスプレッド演算子 ... を使って展開します。この結果、空で、要素数が5の配列が作成されます。
そして、mapメソッドが配列の各要素に対して繰り返し処理を実行します。ここで、第一引数 _ は無視され、第二引数 n には現在のインデックスが渡されます。このコードでは、繰り返し処理の中で、各要素にインデックス番号を割り当てています。
その結果、最終的に [0, 1, 2, 3, 4] という配列が作成されます。つまり、このコードは、0から始まり、5未満の整数を持つ配列を作成するための一般的な方法の一例です。
JavaScriptの配列をイテレーションする方法には、以下のような方法があります。
以上のように、JavaScriptの配列をイテレーションする方法は複数ありますが、どの方法でも同じ結果を得ることができます。
JavaScriptには、for...inループという構文があります。この構文は、オブジェクトのプロパティを列挙するためのものですが、配列でも使用することができます。
しかし、配列をfor...inループで列挙する場合、以下のような問題が発生することがあります。
上記のような問題があるため、配列を列挙する場合は、for...inループを使用せず、forループやforEachメソッド、for...ofループなど、適切な方法を使用することが推奨されます。
このコードは、まず空の配列 a を作成し、ループ内で Math.random() を使用して a 配列に999999個のランダムな数字を詰め込んでいます。
次に、a.reduce((a, b) => Math.max(a, b), -Infinity) を使用して、a 配列の最大値を取得しようとしています。 reduce メソッドは、配列の要素を1つずつ処理し、それらを単一の値にまとめるために使用されます。第1引数の関数は、2つの引数を受け取り、それらの中からどちらが大きいかを返します。ここでは -Infinity が初期値として渡されており、それはすべての値よりも小さいので、reduce メソッドは a 配列の最大値を返します。
Math.max は可変長引数を受け取るため、スプレッド構文を使用して配列 a をそのまま引数として渡すことができます。しかし、可変長引数には引数の数に上限があるため、巨大な配列を引数として渡すと RangeError: Maximum call stack size exceeded エラーが発生します。
一方、 reduce メソッドは引数として渡されるコールバック関数の第1引数に累積値を、第2引数に現在の要素を渡して順次処理を行うため、配列を引数として渡してもスタックオーバーフローは発生しません。
このコードは、配列aの最小値、最大値、算術平均、幾何平均を求めるものです。配列aは、Math.random()を用いて0以上100未満の数値が100個ランダムに生成されます。
reduceメソッドを使用して、配列aの要素を1つずつ処理していき、その過程で最小値、最大値、総和、無限積を計算しています。reduceメソッドは、第1引数にコールバック関数を取り、第2引数に初期値を取ります。このコードでは、初期値として、最小値には正の無限大、最大値には負の無限大、総和には0、無限積には1を指定しています。コールバック関数の第1引数には、前の処理結果のオブジェクトが、第2引数には現在処理している要素の値が渡されます。コールバック関数では、最小値、最大値、総和、無限積を更新した後、オブジェクトとして返します。
最後に、各値を求めたオブジェクトから取り出して、console.logで出力しています。算術平均は、ans.sumを要素数で割ったもので求められます。幾何平均は、無限積を要素数乗根で割ったもので求められます。
JavaScriptでは、配列の要素として、他の配列を含めることができます。このように、配列の中に配列が含まれる構造を「配列の配列」と呼びます。
以下は、配列の配列の例です。
この場合、matrix は3つの要素を持ち、それぞれが配列です。各配列の要素は、[行][列] のようにアクセスすることができます。たとえば、行番号が 1、列番号が 2 の要素にアクセスするには、以下のようにします。
また、配列の配列に対して、forループやforEachメソッド、for...ofループなどのイテレーションを行うこともできます。ただし、配列の配列を列挙する際には、二重のループが必要になるため、処理が複雑になることがあります。
at()の機能は、配列に対して .at(-2) のようにメソッド指定すると、末尾から2番目の値を返す配列の要素参照です(ただし[ ]のように左辺値化はできません)。つまり、マイナスのインデックス値を指定すると、末尾から数えた位置にある値を返します。
一方、atメソッドで0以上のインデックスを指定した場合は、通常の配列の数え方と同様に、前から数えた数え方をします。