目次
配列を使用する理由
アイテムのリスト (車の名前のリストなど) がある場合、車を単一の変数に格納すると、次のようになります。
let car1 = "Saab";
let car2 = "Volvo";
let car3 = "BMW";
let car2 = "Volvo";
let car3 = "BMW";
しかし、車をループして特定の車を見つけたい場合はどうすればよいでしょうか?車が 3 台ではなく 300 台だったらどうでしょうか。
解決策は配列です!
配列は 1 つの名前で多くの値を保持でき、インデックス番号を参照して値にアクセスできます。
配列の作成
JavaScript 配列を作成する最も簡単な方法は、配列リテラルを使用することです。
構文:const array_name = [item1, item2, ...];
配列を文字列に変換する:
JavaScript メソッド toString() は、配列を (カンマ区切りの) 配列値の文字列に変換します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
document.getElementById("demo").innerHTML = fruits.toString();
結果:Banana,Orange,Apple,Mango
ポッピングとプッシュ
配列を操作する場合、要素を削除して新しい要素を追加するのは簡単です。
ポッピングとプッシュとは次のとおりです。
配列からアイテムをポップするか、配列にアイテムをプッシュします。
pop() メソッドは、配列から最後の要素を削除します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits.pop();
結果:Banana,Orange,Apple
push() メソッドは、新しい要素を配列に (最後に) 追加します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
fruits.push("Kiwi");
結果:Banana,Orange,Apple,Mango,Kiwi
shift() メソッドは、最初の配列要素を削除し、他のすべての要素をより低いインデックスに「シフト」します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();
fruits.shift();
結果:Orange,Apple,Mango
unshift() メソッドは、新しい要素を配列に (最初に) 追加し、古い要素を「シフト解除」します。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");
fruits.unshift("Lemon");
結果:Lemon,Banana,Orange,Apple,Mango
concat() メソッドは、既存の配列をマージ (連結) して新しい配列を作成します。
const myGirls = ["Cecilie", "Lone"];
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
const myBoys = ["Emil", "Tobias", "Linus"];
const myChildren = myGirls.concat(myBoys);
結果:Cecilie,Lone,Emil,Tobias,Linus
splice() メソッドを使用して、新しい項目を配列に追加できます。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
fruits.splice(2, 0, "Lemon", "Kiwi");
結果:Banana,Orange,Lemon,Kiwi,Apple,Mango
slice() メソッドは、配列の一部をスライスして新しい配列にします。
この例では、配列要素 1 ("Orange") から始まる配列の一部をスライスします。
const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
const citrus = fruits.slice(1);
const citrus = fruits.slice(1);
結果:Banana,Orange,Lemon,Kiwi,Apple,Mango
さまざまな種類の配列メソッドを使用して楽しみましょう