JavaScriptには、順序付けされたデータを管理するために配列という機能があります。
今回は、配列の基本操作について解説していきます。
JavaScriptでは、配列に対応するメソッドを使う機会が頻繁にあるため、まずは配列の基本を確認していきましょう。
配列
配列とは、オブジェクトと同様に、かんたんに言えばデータの集合体のことです。
一つの配列の中に複数の値を保持することができ、それらを操作していくことができます。
オブジェクトは、キーと値を持つプロパティで構成されています。
一方配列は、プロパティを持たず、値に順序を付けて格納することができます。
もう少し詳しく見ていきましょう。
要素
配列に格納されている値のことを要素と呼びます。
オブジェクトとは違い、キーと値を持っていないため、要素そのものが格納されています。
例えば、「fruits」という名前の箱に、「orange」「apple」「banana」という要素が格納されていることをイメージできます。
インデックス
配列に格納されているそれぞれの要素の位置のことをインデックスと呼びます。
インデックスは、先頭の要素から、0、1、2、3…のように、連番で管理しています。
| インデックス | 要素 |
|---|---|
| 0 | orange |
| 1 | apple |
| 2 | banana |
冒頭でも述べたように、値に順序を付けることができるのが配列の特徴です。
1番目の要素、2番目の要素などと、要素の位置を把握することができ、これによって、先頭の要素に変更を加えたり、要素の間に新しい要素を追加することができます。
値に順序を付けてデータを管理する場合には、オブジェクトは向いていません。
オブジェクトのプロパティは、順序付けされていないため、既存のプロパティの間に新しいプロパティを挿入するような、値の順序を管理するためのメソッドが用意されていないためです。
配列の作成
配列は、以下の2つの構文を使って作成することができます。
const arr = new Array(); // 配列コンストラクタ
const arr = []; // 配列リテラル
ほとんどの場合、配列リテラルが使われているため、この記事でも配列リテラルを使って解説していきます。
配列リテラルの中に、初期値となる要素を指定することができます。
要素をカンマ,で区切って記述すると、複数の要素を格納することが可能です。
const fruits = ['orange', 'apple', 'banana'];
配列には、文字列、数値、オブジェクトなど、任意の型の要素を入れることができます。
const str = ['a', 'b', 'c']; // 文字列を格納
const num = [1, 2, 3]; // 数値を格納
const obj = [{a: 1, b: 2, c: 3}]; // オブジェクトを格納
また、配列の中に配列を入れたり、複数の型の要素を入れることもできます。
const arr = [
[1, 2, 3],
[4, 5, 6]
]; // 配列の中に配列を格納
const random = ['a', 2, {c: 3}]; // 複数の型の要素を格納
配列の中を要素ですべて埋める必要はありません。
例えば、1番目と3番目のみ要素を格納し、2番目の要素は空白にすることもできます。
その際、カンマとカンマの間に空白を入れます。
const fruits = ['orange', , 'banana']; // 2番目の要素は存在しない
配列へのアクセス
配列名[インデックス]のように、インデックスを指定することで、特定の要素を取得することができます。
const fruits = ['orange', 'apple', 'banana'];
console.log(fruits[0]); // "orange"
console.log(fruits[1]); // "apple"
console.log(fruits[2]); // "banana"
インデックスは、0から始まることに注意してください。
インデックスを1と指定し要素にアクセスした場合、実際には2番目の要素が取得されます。
const num = [1, 2, 3];
console.log(num[1]); // 2
存在しない要素へアクセスした場合には、undefinedが返ります。
const fruits = ['orange', , 'banana'];
console.log(fruits[1]); // undefined
また、配列名.lengthと記述することで、配列内の要素数を確認することができます。
const fruits = ['orange', 'apple', 'banana'];
console.log(fruits.length); // 3
まとめ
今回は、配列の基本について解説しました。
// ポイント
* 配列は、順序付けされた要素を格納できる
* インデックスは、要素の位置を表し、0から連番で管理している
* 配列の作成には、主に配列リテラルを使い、初期値を設定できる
* 配列名[インデックス]や、配列名.lengthで、特定の要素にアクセスしたり要素数を取得できる
配列は、JavaScriptの中でも用意されているメソッドの種類が多く、細かい操作を行うことができます。
以下の記事では、配列のさまざまな操作方法を紹介しています。
ぜひ参考にしてみてください。
JavaScriptでは、複数の値からなるデータを管理するために配列が良く使われます。 オブジェクトと混同してしまいがちですが、用意されているメソッドも多く、配列の操作に慣れておくと便利です。 今回は、配列の操作方法に焦点を当てて解説していきます。 配列の作成と要素へのアクセス 配列を作成す...
コメント