配列の基本操作 | オブジェクト型と配列型 | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

配列とは?

配列は、複数のデータを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.length3を返します。

配列に要素を追加する

配列の末尾に要素を追加するには、.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の配列は、複数のデータを一括で扱える便利なデータ型です。配列の基本操作として、要素の追加や削除、要素へのアクセスや変更などがあり、これらを組み合わせて効率的にデータを処理できます。