JavaScript 配列の基本操作まとめ！初期化/追加/削除

JavaScriptの配列の基本操作を知りたいときはないでしょうか。

けど、そんな中で悩むことは、

ですよね。

今回はそんなお悩みを解決する

についてまとめます！

JavaScriptの配列とは

JavaScriptの配列とはArrayオブジェクトで扱われ、複数のデータを一つの変数にまとめたものです。
目的のデータをインデックス（位置番号）や添え字の指定により呼び出すことができます。

また、JavaScript の配列はリサイズ可能であり、異なるデータ型を交ぜて格納することができます。

JavaScriptの配列の使い方

JavaScriptの配列の使い方について説明をします。

配列を宣言する

新しいArray オブジェクトを生成し配列を作成

新しいArray オブジェクトを生成し配列を作成します。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array();
console.log( arrTemp );

結果です。

new Array()に数字を指定すると、数分の空要素が作成されます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
console.log( arrTemp );

結果です。

配列に値を代入する

配列に値を代入していきましょう。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp );

結果です。

new Arrayの引数に複数の値を渡すと、配列の値として扱われます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(1,2);
console.log( arrTemp );

結果です。

new Arrayを省略して、[]で値を代入すると同じく配列として扱われます。

let arrTemp = [1,2];
console.log( arrTemp );

結果です。

配列の初期化を行う

配列の初期化を行いましょう。

一旦配列に代入した値を最後に初期化しています。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp );
//配列を初期化します。
arrTemp = [];
console.log( arrTemp );

結果です。

配列の要素を取得する

配列の要素を取得していきましょう。

配列の要素を取得するには位置番号であるインデックス値を指定する必要があります。

JavaScript の配列はゼロオリジンで、最初の要素は 0 の位置にあるので、0から数える必要があります。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp[1] );

結果です。

配列の要素を追加する

配列の要素を追加してみましょう。

インデックス値を指定し値を追加する

インデックス値を指定し値を追加していきます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp );
//配列の３番目に値を追加します。
arrTemp[2] = 3;
console.log( arrTemp );

結果です。

Pushメソッドで値を追加する

push()メソッドで値を追加していきます。

配列の末尾に 1 つ以上の要素を追加することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp );
//配列の３番目に値を追加します。
arrTemp.push(3);
console.log( arrTemp );

結果です。

Unshiftメソッドで値を追加する

Unshiftメソッドで値を追加していきます。

配列の先頭に 1 つ以上の要素を追加することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(2);
arrTemp = [1,2];
console.log( arrTemp );
//配列の先頭に値を追加します。
arrTemp.unshift(3);
console.log( arrTemp );

結果です。

配列の要素を削除する

配列の要素を削除してみましょう。

インデックス値を指定し値を削除する

インデックス値を指定し、deleteメソッドにて値を削除していきます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(3);
arrTemp = [1,2,3];
console.log( arrTemp );
//配列の３番目の値を削除します。
delete　arrTemp[2];
console.log( arrTemp );

結果です。

popメソッドで値を削除する

popメソッドで値を削除していきます。

配列の末尾に 1 つ以上の要素を削除することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(3);
arrTemp = [1,2,3];
console.log( arrTemp );
//配列の３番目を削除します。
arrTemp.pop();
console.log( arrTemp );

結果です。

shiftメソッドで値を削除する

shiftメソッドで値を削除していきます。

配列の先頭に 1 つ以上の要素を削除することができます。

//新しい Array オブジェクトを生成します。
let arrTemp = new Array(3);
arrTemp = [1,2,3];
console.log( arrTemp );
//配列の先頭を削除します。
arrTemp.shift();
console.log( arrTemp );

結果です。

さいごに

いかがでしょうか。

今回は、

についてまとめました。

また、他にも便利な方法がありますので、よろしければご参照頂ければと思います。