【イラスト付き】JavaScript配列【丁寧に解説】
はじめに
皆さんこんにちは。
今回はJavaScriptの配列の使い方についてご紹介します。
JavaScriptでも他の言語と同じように配列を活用できます。また配列には要素を操作するのに便利なメソッドがいくつも用意されています。
今回は配列の基本構文と代表的なメソッドをご紹介します。
こんな人にオススメ
- 初めてJavaScriptに触れる方
- JavaScriptの配列の関する基本的な文法を把握したい
初めて学習する方にも分かるように、丁寧に解説していきます。
プログラミングに慣れてきた方も、是非一度目を通していただけると嬉しいです。
😋 JavaScriptは配列自体にも様々な機能があります♪
配列の基本構文
まずポイントをチェック
- 角カッコで配列を宣言
- 配列[添字]で要素を取得
JavaScriptでは配列を値として宣言します。変数や関数の引数に通常の値と同じように渡すことができます。
配列の書き方
- 角カッコで配列を宣言
- 要素は角カッコ内にカンマ区切りで配置
const 変数名 = [要素, 要素, 要素];
要素を参照する際は、配列名に角カッコで添字を指定します。存在しない添字を指定した場合は、エラーにならず、undefinedになります。また取得した要素に値を代入することで更新することができます。
// 配列宣言
const items = ['pen', 'book', 'ball'];
// 要素の参照
items[0]; // pen
items[1]; // book
items[2]; // ball
items[3]; // undefined
// 要素の更新
items[0] = 'pencil';
😋 配列は角カッコを使って宣言と参照をします♪
lengthプロパティ
まずポイントをチェック
- lengthプロパティで要素数を取得
- lenght-1 で末尾の要素を参照
配列内の要素数を取得するにはlengthプロパティを指定します。末尾の要素はlengthマイナス１で取得できます。
| 🍕 例えば、３つの要素が入っている配列のlengthプロパティは数値の3です。 |
|---|
// 要素数を取得
items.length; // 3
// 末尾の要素を取得
items[length - 1]; // ball
😋 lengthで要素の有無も判断できます♪
配列とfor-of
まずポイントをチェック
- for-of文で配列を繰り返し処理ができる
- 全ての要素をループで処理する
配列はfor-of文とよく一緒に使われます。for-of文を使うことで配列内の全ての要素を確実に処理することができるため、バグが混入しやすい通常のfor文よりも安全に処理ができます。
// 繰り返し処理
for (const item of items) {
console.log(item);
}
😋 for-of文と配列は相性バッチリです♪
pushメソッド
まずポイントをチェック
- 末尾に要素を追加するメソッド
- 元の配列を操作している
pushメソッドは、配列の末尾に要素を追加するメソッドです。配列に要素を追加する際に利用します。
// 要素を追加
const list1 = [1, 2];
list1.push(3); // [1, 2 ,3] になる
😋 pushメソッドで要素を追加できます♪
mapメソッド
まずポイントをチェック
- 全ての要素を加工する
- 加工後の新しい配列を生成する
mapメソッドは全ての要素に同一の加工を施します。mapメソッドの引数には、加工方法を関数で渡します。
mapの書き方
- 要素の加工方法を関数で指定
- 関数の第一引数には要素が順次渡される
- 関数の戻り値が加工結果の要素になる
配列.map((要素を受け取る引数)=>{return 加工後の値});
// 要素を加工
const list2 = list1.map(item => item + 10); // 全ての要素にプラス10の加工をする
😋 mapメソッドは全ての要素を変更できます♪
filterメソッド
まずポイントをチェック
- 全ての要素を加工する
- 加工後の新しい配列を生成する
filterメソッドは、配列内から条件に合う要素のみを抽出する際に利用します。filterメソッドの引数には、抽出条件を関数で渡します。
filterの書き方
- 要素の抽出条件を関数で指定
- 関数の第一引数には要素が順次渡される
- 関数の戻り値がtrueの要素のみ抽出される
配列.filter((要素を受け取る引数)=>{return trueかfalse});
// 要素を抽出
const list3 = list1.filter(item => item % 2 === 0); // 偶数のみを取り出す
😋 filterで条件に合うものだけを取り出すことができます♪
おわりに
皆さん、お疲れ様でした。
ここまでご覧いただき、ありがとうございました。
配列の基本構文とメソッドについて確認をしていただきました。配列を使うことでロジックの工夫の幅が増えるので、活用できるようしっかり身につけましょう。
😋 これからもプログラミング学習頑張りましょう♪
Discussion