配列とは?
配列は、複数のデータを1つの変数にまとめて保存できるデータ型です。JavaScriptでは、配列は任意のデータ型を格納でき、要素ごとに異なる型を混在させることができます。配列は角括弧([])で囲んで宣言されます。
配列の作成方法
配列は、次のようにして作成できます。
let fruits = ["apple", "banana", "orange"];
let numbers = [1, 2, 3, 4, 5];
この例では、fruitsには文字列の配列、numbersには数値の配列が格納されています。
配列の基本操作
配列にはさまざまな操作が可能です。ここでは、よく使われる基本的な操作方法を紹介します。
配列の長さを取得する
配列の要素数を取得するには、.lengthプロパティを使用します。
let fruits = ["apple", "banana", "orange"];
console.log(fruits.length); // 3
この例では、fruits配列には3つの要素があるため、fruits.lengthは3を返します。
配列に要素を追加する
配列の末尾に要素を追加するには、.push()メソッドを使用します。
let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]
この例では、配列fruitsに"orange"を追加し、3つの要素が含まれる配列になっています。
配列から要素を削除する
配列の末尾の要素を削除するには、.pop()メソッドを使用します。
let fruits = ["apple", "banana", "orange"];
fruits.pop();
console.log(fruits); // ["apple", "banana"]
この例では、配列fruitsから"orange"が削除され、2つの要素が残ります。
配列の要素にアクセスする
配列の要素にアクセスするには、インデックスを指定します。インデックスは0から始まります。
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "orange"
この例では、fruits[0]は"apple"、fruits[2]は"orange"を返します。
配列の要素を変更する
特定のインデックスの要素を変更するには、直接そのインデックスに新しい値を代入します。
let fruits = ["apple", "banana", "orange"];
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "orange"]
この例では、fruits[1]が"banana"から"grape"に変更されています。
配列の基本操作の比較
以下は、配列の基本操作のメソッドを簡単にまとめた表です。
| メソッド | 説明 | 使用例 |
|---|---|---|
length |
配列の要素数を取得する | array.length |
push() |
配列の末尾に要素を追加する | array.push("element") |
pop() |
配列の末尾から要素を削除する | array.pop() |
[index] |
特定のインデックスの要素にアクセスする | array[0] |
[index] = value |
特定のインデックスの要素を変更する | array[1] = "new value" |
プログラムの解説
<script>
// 配列の作成
let fruits = ["apple", "banana", "orange"];
// 配列の長さを取得
console.log(fruits.length); // 3
// 配列に要素を追加
fruits.push("grape");
console.log(fruits); // ["apple", "banana", "orange", "grape"]
// 配列の末尾から要素を削除
fruits.pop();
console.log(fruits); // ["apple", "banana", "orange"]
// 配列の要素にアクセス
console.log(fruits[0]); // "apple"
// 配列の要素を変更
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "orange"]
</script>
このコードでは、配列の作成から基本的な操作(要素の追加、削除、アクセス、変更)を一通り行っています。
まとめ
JavaScriptの配列は、複数のデータを一括で扱える便利なデータ型です。配列の基本操作として、要素の追加や削除、要素へのアクセスや変更などがあり、これらを組み合わせて効率的にデータを処理できます。