目次

    配列を使用する理由

    アイテムのリスト (車の名前のリストなど) がある場合、車を単一の変数に格納すると、次のようになります。

    let car1 = "Saab";
    let car2 = "Volvo";
    let car3 = "BMW";

    しかし、車をループして特定の車を見つけたい場合はどうすればよいでしょうか?車が 3 台ではなく 300 台だったらどうでしょうか。

    解決策は配列です!

    配列は 1 つの名前で多くの値を保持でき、インデックス番号を参照して値にアクセスできます。

    配列の作成

    JavaScript 配列を作成する最も簡単な方法は、配列リテラルを使用することです。

    構文:const array_name = [item1item2, ...];   

    配列を文字列に変換する:

    JavaScript メソッド toString() は、配列を (カンマ区切りの) 配列値の文字列に変換します。


    const fruits = ["Banana""Orange""Apple""Mango"];
    document.getElementById("demo").innerHTML = fruits.toString();
    結果:Banana,Orange,Apple,Mango

    ポッピングとプッシュ
    配列を操作する場合、要素を削除して新しい要素を追加するのは簡単です。

    ポッピングとプッシュとは次のとおりです。

    配列からアイテムをポップするか、配列にアイテムをプッシュします。

    pop() メソッドは、配列から最後の要素を削除します。

    const fruits = ["Banana""Orange""Apple""Mango"];
    fruits.pop();
    結果:Banana,Orange,Apple

    push() メソッドは、新しい要素を配列に (最後に) 追加します。

    const fruits = ["Banana""Orange""Apple""Mango"];
    fruits.push("Kiwi");
    結果:Banana,Orange,Apple,Mango,Kiwi

    shift() メソッドは、最初の配列要素を削除し、他のすべての要素をより低いインデックスに「シフト」します。

    const fruits = ["Banana""Orange""Apple""Mango"];
    fruits.shift();
    結果:Orange,Apple,Mango

    unshift() メソッドは、新しい要素を配列に (最初に) 追加し、古い要素を「シフト解除」します。

    const fruits = ["Banana""Orange""Apple""Mango"];
    fruits.unshift("Lemon");
    結果:Lemon,Banana,Orange,Apple,Mango

    concat() メソッドは、既存の配列をマージ (連結) して新しい配列を作成します。

    const myGirls = ["Cecilie""Lone"];
    const myBoys = ["Emil""Tobias""Linus"];

    const myChildren = myGirls.concat(myBoys);
    結果:Cecilie,Lone,Emil,Tobias,Linus


    splice() メソッドを使用して、新しい項目を配列に追加できます。

    const fruits = ["Banana""Orange""Apple""Mango"];
    fruits.splice(20"Lemon""Kiwi");
    結果:Banana,Orange,Lemon,Kiwi,Apple,Mango

    slice() メソッドは、配列の一部をスライスして新しい配列にします。


    この例では、配列要素 1 ("Orange") から始まる配列の一部をスライスします。
    const fruits = ["Banana""Orange""Lemon""Apple""Mango"];
    const citrus = fruits.slice(1);
    結果:Banana,Orange,Lemon,Kiwi,Apple,Mango

    さまざまな種類の配列メソッドを使用して楽しみましょう
    PREV
    2022.11.10
    関数型言語 Haskellの使い方
    NEXT
    2022.11.13
    【UI/UX設計の原理原則】ヤコブの法則とは