JavaScript で Arraylist を実装する

1. JavaScript で配列要素を作成する
2. JavaScript で配列要素にアクセスする
3. JavaScript で配列に要素を追加する
4. 配列からの要素の削除

サイズを指定せずに配列に要素を追加できる Java の Arraylist についてはよく知っています。これは素晴らしい機能ですが、JavaScript に似たようなものはありますか？各言語には、独自のデータ構造のセットがあります。JavaScript には、同種の値と異種の値を格納できる配列があります。異種とは、値が文字列、数値、ブール値などのさまざまなデータ型であり、すべてが 1つの配列にまとめられていることを意味します。これは、Java の ArrayList と比較して、ユニークで優れた機能です。

JavaScript で配列要素を作成する

JavaScript で配列を作成するのは簡単です。var キーワードを使用して配列を作成します。これは、Java で ArrayList を使用して配列を作成する方法に似ています。Java は、ArrayList のデータ型を指定することを主張します。ただし、JavaScript では、配列のデータ型を明示的に宣言していません。配列に割り当てられた値に基づいて、JavaScript インタープリターにその決定を任せます。いずれにせよ、JavaScript の場合、配列のタイプは object です。配列を作成するには、次のコードを参照してください。

var a = [1, 6, 3, 5];
console.log(a.length);
console.log(typeof a);
console.log(typeof a[2]);

O 出力：

4
object
number

• length：JavaScript には、配列のサイズを返す length 属性があります。
• typeof：typeof は単項演算子です。また、JavaScript でオペランドのタイプを見つけるために使用されます。上記のコードは、配列のデータ型を typeof 演算子を使用してオブジェクトとして返します。

JavaScript で配列要素にアクセスする

Java の Arraylist と同様に、ループ、for ループ、および while ループを使用して JavaScript 配列を反復処理できます。JavaScript には、配列内の要素を反復処理するための .foreach() 関数もあります。foreach() を使用して、各配列要素で特定のコード行を実行できます。foreach 関数は、関数をパラメーターとして受け入れます。この関数はインライン関数として記述できます。以下のコードスニペットを確認して、理解を深めてください。

var a = ['hello', 1, false];
a.forEach((i) => {
  console.log(typeof i);
})

O 出力：

string
number
boolean

ここでは、配列の各要素に typeof 操作を適用します。コードはさらに、出力を Web ブラウザーコンソールに記録します。JavaScript には、配列内の要素の位置を逆にする別の関数 .reverse() 関数があります。次のコードを参照してください。

var a = ['hello', 1, false];
console.log(a.reverse());

O 出力：

[false, 1, "hello"]

上記のログは、Google Chrome ウェブブラウザコンソールで取得されたものです。

JavaScript で配列に要素を追加する

Java の .add() 関数を使用して、ArrayList に要素を追加できます。同様に、JavaScript には、配列のさまざまな位置に要素を追加するために使用できるいくつかの関数があります。

• .push()：名前が示すように、push() 関数を使用して配列に要素を追加できます。配列の最後に、関数にパラメーターとして渡された要素を追加します。push() 関数は元の配列を変更します。したがって、コードで使用するときは注意してください。新しい要素を追加した後、変更された配列のサイズを返します。
• .unshift()：配列の先頭に要素を追加する必要がある場合、配列内のすべてのコンテンツをインデックスで再配置する必要があるため、多忙な作業になります。このタスクは、JavaScript の .unshift() 関数を使用して実行できます。unshift() を使用して、配列の先頭に 1つ以上の要素を追加できます。配列に追加したい要素をパラメータとして unshift 関数に渡します。

var a = ['hello', 1, false];
a.push(2.15);
console.log(a);
a.unshift(123);
console.log(a);

O 出力：

["hello", 1, false, 2.15]
[123, "hello", 1, false, 2.15]

出力は、グーグルクロームウェブブラウザで取得されたとおりです。操作は、代入演算子を使用せずに元の配列を変更することに注意してください。

配列からの要素の削除

同様に、次の JavaScript 関数を使用して、配列から要素を削除できます。これは、Java の ArrayList の remove() 関数に相当します。

• .pop() 配列の後ろから要素を削除する場合は、.pop() 関数を使用できます。この関数は元の配列を変更し、ポップされた最後の要素を返すことに注意してください。
• .shift() 配列の先頭から要素を削除する必要がある場合は、.shift() 関数を使用できます。.pop() と同様に、.shift() も元の配列を変更します。したがって、.shift() 関数を使用するときは注意してください。

var a = [123, 'hello', 1, false, 2.15];
a.pop();
console.log(a);
a.shift();
console.log(a);

出力：

[123, "hello", 1, false]
["hello", 1, false]

ここで注意すべきことがいくつかあります。

1. pop() 関数と shift() 関数はどちらもパラメーターを受け入れません。また、特定の時間に配列から 1つの要素を削除するために使用されます。
2. 代入演算子を必要とせずに、元の配列を変更します。したがって、それらを慎重に使用する必要があります。そうしないと、デバッグが困難になる未知の副作用に陥る可能性があります。

配列に複数の要素を追加および削除する

JavaScript には、splice() 関数という別のメソッドがあります。これを使用して、配列から 1つ以上の要素を追加または削除できます。splice() 関数は、次のようにいくつかのパラメータを取ります。

• startIndex：startIndex パラメーターを使用して配列インデックスを指定します。
• count：このパラメーターは、配列から削除する要素の数を指定します。count が指定されていない場合、splice() は startIndex から配列の最後までのすべての要素を削除します。
• elements：最後のパラメーターは、startIndex から配列に追加する要素のリストです。splice() 関数で要素が指定されていない場合、配列から要素が削除されます。

詳細を理解するために、次のコードを見てみましょう。

var a = [123, 'hello', 1, false, 2.15];
a.splice(2, 1, 'there');
console.log(a);
a.splice(2, 2);
console.log(a);
a.splice(2);
console.log(a);

出力：

[123, "hello", "there", false, 2.15]
[123, "hello", 2.15]
[123, "hello"]