知ってた？ナルホド！
こんにちは！コーダーの平原です。
今回は使用用途が沢山ありそうな、JavaScriptの配列について学んでいきたいと思います！
前回までの内容です。↓↓↓↓
1. Arrayとは
Arrayとは、配列を構築するためのオブジェクトです。
配列は、変数に複数の値を格納し、リスト構造で管理することができます。
2. 配列の作成
配列を作成するには、「[]」を使用したリテラル記法と、new演算子を使用する方法があります。
let stations = ["表参道", "外苑前"]; //リテラル記法
let stations_new = new Array("表参道", "外苑前"); //new演算子この2つの方法で異なる点は、1つの数値を格納した時の実行結果です。
let stations = [5];
let stations_new = new Array(5);
console.log(stations); //5 が返されます。
console.log(stations_new); //empty × 5([ , , , , ]) が返されます。リテラル記法では、5という1つの数値が配列に格納されますが、new演算子では、5つ分の空の配列が用意されます。
3. 配列の要素の取得
配列の要素の取得するには、配列のインデックスを「[]」で指定して行います。
let stations = ["表参道", "外苑前"];
console.log(stations[0]); //表参道 が返されます。
console.log(stations[2]); //undefined が返されます。指定したインデックスに値が入っていない場合、「undefined」が返されます。
配列への再代入も行うことができます。
let stations = ["表参道", "外苑前"];
stations[2] = "青山一丁目";
console.log(stations[2]); //青山一丁目 が返されます。又、配列の数量を取得するには、「lengthプロパティ」を使用します。
let stations = ["表参道", "外苑前"];
console.log(stations.length); //2 が返されます。4. 配列の要素の追加・削除
配列の末尾に要素を追加するには、「pushメソッド」を使用します。
let stations = ["表参道", "外苑前"];
let stations_push = stations.push("青山一丁目");
console.log(stations); //表参道, 外苑前, 青山一丁目 が返されます。配列の末尾の要素を削除するには、「popメソッド」を使用します。
let stations = ["表参道", "外苑前", "青山一丁目"];
let stations_pop = stations.pop();
console.log(stations); //表参道, 外苑前 が返されます。配列の先頭に要素を追加するには、「unshiftメソッド」を使用します。
let stations = ["表参道", "外苑前"];
let stations_unshift = stations.unshift("渋谷");
console.log(stations); //渋谷, 表参道, 外苑前 が返されます。配列の先頭の要素を削除するには、「shiftメソッド」を使用します。
let stations = ["渋谷", "表参道", "外苑前"];
let stations_shift = stations.shift();
console.log(stations); //表参道, 外苑前 が返されます。又、配列の中の要素のインデックスを取得するには「indexOfメソッド」を使用します。
let stations = ["渋谷", "表参道", "外苑前", "青山一丁目"];
let one_of_stations = stations.indexOf("表参道");
console.log(one_of_stations); //1 が返されます。配列の中の要素のインデックスを指定し、削除するには、「spliceメソッド」を使用します。
let stations = ["渋谷", "表参道", "外苑前", "青山一丁目"];
let one_of_stations = stations.indexOf("表参道");
let remove_one_of_stations = stations.splice(one_of_stations, 1);
console.log(stations);//渋谷, 外苑前, 青山一丁目 が返されます。変数「stations」の中の配列の要素で、変数「one_of_stations」に代入されたインデックスから、1個の要素を削除することができます。
「.splice(one_of_stations, 1);」で指定される「1」は、削除する要素の数量を指定しています。
5. スプレッド演算子
変数に代入した配列を展開するには、「…」のスプレット演算子を使用します。
これはES6からできた機能です。
let stations = ["表参道", "外苑前"];
let add_stations = ["渋谷", ...stations];
console.log(add_stations); //渋谷, 表参道, 外苑前 が返されます。配列に複数の数値を代入し、その一番大きな値を取り出す際にも使用できます。
let stations = [6, 88, -20, 35];
let max_stations = Math.max(...stations);
console.log(max_stations); //88 が返ってきます。又、以下のようにコピーした配列を組み合わせることもできます。
let stations = ["表参道", "外苑前"];
let copy_stations = [...stations];
console.log(copy_stations); //表参道, 外苑前 が返されます。
let marge_stations = [...stations, ...copy_stations];
console.log(marge_stations); //表参道, 外苑前, 表参道, 外苑前 が返されます。6. まとめ
配列とは、Arrayによって複数の値を変数に格納、管理することができるオブジェクトでした。その方法にはリテラル記法とnew演算子の2つの方法があり、その値を取得したり、追加や削除をする為の便利なプロパティやメソッドが色々と用意されていました。
ES6から追加された機能であるスプレッド演算子では、シンプルな記述で配列の展開やコピー、結合ができることがわかりました。
これから多くの実装に登場しそうな気配がぷんぷんの配列、今回学んだ内容の復習を忘れず、引き続き学習していきたいと思います！
参考サイト :
# こちらもオススメ
