【JAVASCRIPT】JavaScriptの配列について

タグ :

JAVASCRIPT

PROGRAMMING

1 配列とは
2 配列の宣言と初期化する方法
3 配列の操作について
4 その他の配列メソッド
5 配列の例
6 配列を利用した実用的な例

配列とは

配列は複数の値を一つの変数に格納できるデータ構造です。配列内のそれぞれの値は「要素」と呼ばれ、インデックス（配列の位置）でアクセスできます。インデックスは0から始まります。

配列の宣言と初期化する方法

空の配列を宣言する



let array = [];

値を含む配列を宣言する



let array = [1, 2, 3, 4, 5];

Arrayコンストラクタを使用して宣言する



let array = new Array();
let arrayWithValues = new Array(1, 2, 3, 4, 5);

Array コンストラクタを使用する場合の注意点

Array コンストラクタは、引数が1つだけの場合、それを配列の長さとして解釈します。そのため、例えば new Array(3) とすると、3つの空の要素を持つ配列が作成されます。
引数が2つ以上の場合、それらは配列の要素として解釈されます。



let singleValueArray = new Array(5);
console.log(singleValueArray); // [ <5 empty items> ]
console.log(singleValueArray.length); // 5

let multipleValuesArray = new Array(5, 10, 15);
console.log(multipleValuesArray); // [5, 10, 15]

配列の操作について

要素のアクセス



let array = [1, 2, 3, 4, 5];
console.log(array[0]); // 1
console.log(array[3]); // 4

要素の変更



let array = [1, 2, 3, 4, 5];
array[2] = 10;
console.log(array); // [1, 2, 10, 4, 5]

要素の追加

末尾に追加：push



let array = [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]

先頭に追加：unshift



let array = [1, 2, 3];
array.unshift(0);
console.log(array); // [0, 1, 2, 3]

要素の削除

末尾から削除：pop



let array = [1, 2, 3];
array.pop();
console.log(array); // [1, 2]

先頭から削除：shift



let array = [1, 2, 3];
array.shift();
console.log(array); // [2, 3]

任意の位置の要素の削除と追加：splice



let array = [1, 2, 3, 4, 5];
array.splice(2, 1); // インデックス2の位置から1つの要素を削除
console.log(array); // [1, 2, 4, 5]

array.splice(2, 0, 3); // インデックス2の位置に値3を追加
console.log(array); // [1, 2, 3, 4, 5]

その他の配列メソッド

lengthプロパティ：配列の要素数を取得



let array = [1, 2, 3, 4, 5];
console.log(array.length); // 5

indexOfメソッド：指定した値の最初のインデックスを取得



let array = [1, 2, 3, 4, 5];
console.log(array.indexOf(3)); // 2
console.log(array.indexOf(6)); // -1（存在しない場合）

forEachメソッド：配列の各要素に対して関数を実行



let array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
    console.log(element);
});
// 1
// 2
// 3
// 4
// 5

mapメソッド：配列の各要素に対して関数を実行し、新しい配列を返す



let array = [1, 2, 3, 4, 5];
let newArray = array.map(function(element) {
    return element * 2;
});
console.log(newArray); // [2, 4, 6, 8, 10]

配列の例



// 配列の宣言と初期化
let fruits = ['Apple', 'Banana', 'Orange'];

// 要素のアクセス
console.log(fruits[1]); // Banana

// 要素の変更
fruits[2] = 'Grape';
console.log(fruits); // ['Apple', 'Banana', 'Grape']

// 要素の追加
fruits.push('Mango');
console.log(fruits); // ['Apple', 'Banana', 'Grape', 'Mango']

// 要素の削除
fruits.pop();
console.log(fruits); // ['Apple', 'Banana', 'Grape']

// 配列の長さ
console.log(fruits.length); // 3

配列を利用した実用的な例

買い物リストの管理プログラム

このプログラムでは、買い物リストにアイテムを追加したり、アイテムを削除したり、リストを表示したりします。



// 初期の買い物リストを宣言
let shoppingList = ['Milk', 'Bread', 'Eggs'];

// リストを表示する関数
function displayList() {
    console.log("Shopping List:");
    shoppingList.forEach(function(item, index) {
        console.log(index + 1 + ": " + item);
    });
}

// アイテムをリストに追加する関数
function addItem(item) {
    shoppingList.push(item);
    console.log(item + " has been added to the list.");
}

// アイテムをリストから削除する関数
function removeItem(index) {
    if (index >= 0 && index < shoppingList.length) {
        let removedItem = shoppingList.splice(index, 1);
        console.log(removedItem + " has been removed from the list.");
    } else {
        console.log("Invalid index. Please enter a valid index.");
    }
}

// プログラムの実行例

// 初期のリストを表示
displayList();

// アイテムを追加
addItem('Butter');
displayList();

// アイテムを削除（インデックスは0から始まることに注意）
removeItem(2); // Eggsを削除
displayList();

// 無効なインデックスで削除を試みる
removeItem(10); // 無効なインデックス

各関数の説明

1.displayList関数

現在の買い物リストを表示します。
forEachメソッドを使って、各アイテムとそのインデックスを出力しています。

2.addItem関数

リストに新しいアイテムを追加します。
pushメソッドを使って、新しいアイテムをリストの末尾に追加しています。

3.removeItem関数

指定したインデックスのアイテムをリストから削除します。
spliceメソッドを使って、指定したインデックスのアイテムを削除しています。
削除するインデックスが有効でない場合、エラーメッセージを表示します。

実行例の説明

初期のリスト（[‘Milk’, ‘Bread’, ‘Eggs’]）を表示します。
‘Butter’をリストに追加し、再度リストを表示します。
インデックス2（3番目）のアイテム（’Eggs’）をリストから削除し、再度リストを表示します。
無効なインデックス（10）で削除を試みると、エラーメッセージが表示されます。

前ページに戻る