JavaScript配列：初心者のためのガイド

果物のリストを自分で作成しましょう。このリストを「フルーツ」と呼び、バナナ、メロン、ブドウの値を追加します。ああ、私は果物が大好きです！これはショッピングリストのチュートリアルのように聞こえるかもしれませんが、実際には自分たちで配列を作成したばかりです。

このガイドでは、配列とは何か、配列がどのように機能するか、コードで配列を使用する理由について説明します。 JavaScript配列の忍者になれるように、実際の配列の例をいくつか説明します。

アレイとは何ですか？

配列は、データを格納するオブジェクトです。配列には、順序付けられたアイテムのコレクションが含まれ、0個以上のアイテムを格納できます。配列は、1つの変数に同様の値を格納できるため、プログラミングに役立ちます。

たとえば、お気に入りの果物を一覧表示するために10個の単一変数を記述する必要はありません。配列を使用すると、お気に入りの果物をすべて1つの変数に追加できます。

次の例を考えてみましょう：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

ここでは、「フルーツ」と呼ばれる配列を作成しました。 3つの異なる値が格納され、それぞれが食料品店で購入したい果物を反映しています。配列を宣言するために、アイテムのリストを角かっこで囲みました。

配列の宣言

配列を宣言する方法は2つあります。ほとんどの人がそれを行うのを見る方法は、以前に行ったように、アイテムのリストを角かっこで囲むことです。

let berries = [
	"Strawberry",
	"Blueberry",
	"Gooseberry"
];

この例では、3つの値を持つ配列を宣言しました。 newを使用する配列コンストラクターを使用することもできます 配列を宣言するキーワード：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

let berries = new Array(
	"Strawberry",
	"Blueberry",
	"Gooseberry"
);

これらのコードスニペットは同じ配列を作成しますが、異なるメソッドを使用します。 2番目の例では、配列を宣言するために丸かっこを使用していることに注意してください。また、new Arrayを使用する必要がありました 配列を宣言するコンストラクター。ほとんどの人が最初の方法を好むのはそのためです。角かっこは覚えやすく、入力も高速です。

配列に同じデータ型を含める必要はありません。配列には、さまざまな種類のデータをいくつでも格納できます。

let berries = [
	"Strawberry",
	1.50,
	true
];

この配列には、文字列、数値、ブール値の3種類のデータが格納されます。配列を宣言する方法を理解したので、配列のコンテンツへのアクセスを開始する準備が整いました。

配列の読み取り

配列の値を読み取れなければ、配列はあまり役に立ちません。そのため、インデックスが存在します。インデックス付けは、リストなどの反復可能なオブジェクト内の個々のアイテムにアクセスする方法です。

配列内の配列のすべての要素には、独自のインデックス番号が付けられています。これらの番号は0で始まり、配列内の個々のアイテムにアクセスするために使用できます。 「果物」の配列を覚えていますか？

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

この配列に割り当てられるインデックス値は次のとおりです。

• 0：バナナ
• 1：ブドウ
• 2：メロン

これらの番号を使用することで、リスト内の個々のアイテムにアクセスできます。配列のインデックス位置1にある果物を特定するとします。これを行うには、配列の名前の後に角かっこで囲んだインデックス値を指定します。

fruits[1];

コードは次のようになります：ブドウ。値「ブドウ」を格納するインデックス位置1を参照しています。値0を渡すと、「バナナ」が返されます。存在しないアイテムにアクセスしようとすると、「未定義」が返されます：

fruits[10];

出力：未定義。インデックス作成が特に役立つのは、配列内のアイテムをループする場合です。アレイ内のすべての果物をコンソールに印刷するとします。次のようなforループを使用してこれを行うことができます：

for (var i = 0; i < fruits.length; i++) {
	console.log(fruits[i]);
}

このコードは次を返します：

Banana
Grapes
Melon

コードはリスト内のすべてのアイテムをループし、各アイテムをコンソールに出力します。 lengthを使用したことにも気付くでしょう 財産。これにより、リストの長さが返されます。

配列にアイテムを追加する

ほとんどの場合、最初に配列を宣言した後で、配列に新しい値を追加する必要があります。 push()を使用してこれを行うことができます 配列メソッド。

果物のリストに「ストロベリー」を追加するのを忘れてしまいました。大野！心配しないでください。push()を使用していつでも追加できます。 方法：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

このコードを実行したので、配列は次のようになります。

バナナ	ブドウ	メロン	ストロベリー
	1	2	3

unshift()を使用して、配列の先頭にデータを追加できます 。イチゴはショッピングリストで非常に重要なので、最初に表示してほしいです：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.push("Strawberry");
console.log(fruits);

これにより、元の「果物」リストは次のように表示されます。

ストロベリー	バナナ	ブドウ	メロン
	1	2	3

配列からアイテムを削除する

家にはすでにメロンが入っているので、買う必要はありません。別のメロンを買う意味は何でしょう？メロンはリストの最後にあるため、削除するには2つのオプションがあります。

• splice() ：インデックス番号で要素を削除します。
• pop() ：配列の末尾から要素を削除します。

splice()を使用しましょう 例として：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.splice(3, 1);
console.log(fruits);

コードは次のようになります：

Strawberry
Banana
Grapes

splice() 2つのパラメーターを受け入れます。 1つ目は配列から削除するインデックス番号で、2つ目は削除するアイテムの数です。この場合、インデックス値が3のアイテムを削除したかったので、パラメーターとして「3、1」を指定しました。

pop() パラメータを受け入れません。リストの最後のアイテムを削除するだけです：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.pop();
console.log(fruits);

コードは次のようになります：

Banana
Grapes

shift()を使用することもできます リストの先頭からアイテムを削除するには：

let fruits = [
	"Banana",
	"Grapes",
	"Melon"
];

fruits.shift();
console.log(fruits);

コードは次のようになります：

Grapes
Melon

push() およびunshift() リストにアイテムを追加します。 pop() およびshift() リストからアイテムを削除します。スプライスメソッドを使用して、インデックス値に基づいてリストからアイテムを削除することもできます。

配列内のアイテムの変更

バナナはおいしい果物ですが、大きすぎて少し厄介な気分になったときにおやつとして食べることができないことがよくあります。ベビーバナナは食べやすいです。

ここで、「果物」リストを変更して、通常のバナナではなくベビーバナナを購入するとします。他の変数の場合と同じように、代入演算子を使用してこれを行うことができます：

fruits[0] = "Baby bananas";
console.log(fruits);

コードは次のようになります：

Baby bananas
Grapes
Melon

インデックス位置0のアイテムを変更して、値「Babybananas」を保存しました。この変更を行うために特別な方法を使用する必要はありません。代入演算子は、配列の値を変更するために使用されます。

結論

これが、JavaScript配列について知っておく必要のある基本事項です。学ぶべきことはまだたくさんありますが、それがプログラミングを楽しくする理由です。常に新しい課題に取り組む必要があります。他に何もないとしても、あなたは私のお気に入りの果物について学びました。私はブラックカラントが大好きだと思いますが、このチュートリアルでは触れませんでした。

これで、エキスパートのようにJavaScript配列を操作する準備が整いました。