序章

JavaScriptのarrayは、データを格納するために使用されるグローバルオブジェクトの一種です。 配列は、0個以上のデータ型を含む順序付けられたコレクションまたはリストで構成され、 0 特定のアイテムにアクセスします。

配列は、複数の値を1つの変数に格納するため、非常に便利です。これにより、コードを凝縮して整理し、コードをより読みやすく、保守しやすくすることができます。 配列には、数値、文字列、オブジェクトなど、任意のデータ型を含めることができます。

配列がどのように役立つかを示すために、世界の5つの海を独自の変数に割り当てることを検討してください。

oceans.js
// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

この方法は非常に冗長であり、すぐに維持および追跡が困難になる可能性があります。

配列を使用すると、データを単純化できます。

oceans.js
// Assign the five oceans
let oceans = [
	"Pacific",
	"Atlantic",
	"Indian",
	"Arctic",
	"Antarctic",
];

5つの個別の変数を作成する代わりに、5つの要素すべてを含む1つの変数ができました。 角かっこを使用しました— [] —配列を作成します。

特定のアイテムにアクセスするには、そのインデックスを変数に追加します。

// Print out the first item of the oceans array
oceans[0];

Output
Pacific

このチュートリアルでは、配列を作成する方法を学習します。 それらがどのように索引付けされるか。 配列内のアイテムを追加、変更、削除、またはアクセスする方法。 配列をループする方法。

配列の作成

JavaScriptで配列を作成する方法は2つあります。

  • 角かっこを使用する配列リテラル。
  • を使用する配列コンストラクター new キーワード。

で初期化される配列リテラルを使用してサメ種の配列を作成する方法を示しましょう [].

// Initialize array of shark species with array literal
[label sharks.js]
let sharks = [
	"Hammerhead",
	"Great White",
	"Tiger",
];

これが配列コンストラクターで作成されたものと同じデータで、次のように初期化されます。 new Array().

sharks.js
// Initialize array of shark species with array constructor
let sharks = new Array(
	"Hammerhead",
	"Great White",
	"Tiger",
);

どちらの方法でも配列が作成されます。 ただし、配列リテラル（角かっこ）方式の方がはるかに一般的であり、推奨されます。 new Array() コンストラクターメソッドには、不整合や予期しない結果が生じる可能性があります。 後で遭遇した場合に備えて、配列コンストラクターに注意しておくと便利です。

配列全体を印刷できます。これは、入力と同じように表示されます。

// Print out the entire sharks array
sharks;

Output
[ 'Hammerhead', 'Great White', 'Tiger' ]

配列は、類似したデータ型のリストをグループ化するためによく使用されますが、技術的には、他の配列を含め、任意の値または値の組み合わせを含めることができます。

// Initialize array of mixed datatypes
let mixedData = [
	"String",
	null,
	7,
	[
		"another",
		"array",
	],
];

配列を作成した後、さまざまな方法でそれらを操作できますが、最初に、配列がどのようにインデックス付けされるかを理解する必要があります。

注：最後のコンマの有無にかかわらず、配列の最後の項目が表示される場合があります。 これは、末尾のコンマとして知られています。 それらが省略されているのが一般的ですが、バージョン管理の差分がより明確になり、エラーなしでアイテムを追加および削除しやすくなるため、一般的にはコードにそれらを含めることが推奨されます。 JSONファイルでは末尾のコンマは使用できないことに注意してください。

配列のインデックス付け

JavaScript での文字列のインデックス作成と操作について学習した場合、文字列は配列に似ているため、配列のインデックス作成の概念に既に精通している可能性があります。

配列には名前と値のペアがありません。 代わりに、それらはで始まる整数値でインデックス付けされます 0. これは、に割り当てられた配列の例です。 seaCreatures.

seacreatures.js
let seaCreatures = [
	"octopus",
	"squid",
	"shark",
	"seahorse",
	"starfish",
];

の各アイテムの内訳は次のとおりです。 seaCreatures 配列にはインデックスが付けられます。

たこ いか 鮫 タツノオトシゴ ヒトデ
0 1 2 3 4

配列の最初の項目は octopus、でインデックス付けされます 0. 最後のアイテムは starfish、でインデックス付けされます 4. カウントは 0 インデックスでは、1から数え始めるという私たちの自然な直感に反するため、自然になるまでこれを覚えておくように特別な注意を払う必要があります。

配列に含まれるアイテムの数を確認できます。 length 財産。

seaCreatures.length;

Output
5

のインデックスが seaCreatures からなる 0 に 4、 length プロパティは、1から始まる配列内のアイテムの実際の量を出力します。

配列内の特定のアイテムのインデックス番号を知りたい場合（次のように） seahorse、使用できます indexOf() 方法。

seaCreatures.indexOf("seahorse");

Output
3

存在しない値など、インデックス番号が見つからない場合、コンソールは -1.

seaCreatures.indexOf("cuttlefish");

Output
-1

配列内のアイテムに対応するインデックス番号を使用すると、各アイテムに個別にアクセスして、それらのアイテムを操作できます。

配列内のアイテムへのアクセス

JavaScript配列内のアイテムには、角かっこで囲まれたアイテムのインデックス番号を参照してアクセスします。

seaCreatures[1];

Output
squid

私たちは知っています 0 常に配列の最初の項目を出力します。 で操作を実行することにより、配列の最後の項目を見つけることもできます。 length プロパティとそれを新しいインデックス番号として適用します。

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Output
starfish

存在しないアイテムにアクセスしようとすると、 undefined.

seaCreatures[10];

Output
undefined

ネストされた配列内のアイテムにアクセスするには、内部配列に対応する別のインデックス番号を追加します。

let nestedArray = [
	[
		"salmon",
		"halibut",
	],
	[
		"coral",
		"reef",
	]
];

nestedArray[1][0];

Output
coral

上記の例では、位置にある配列にアクセスしました 1 の nestedArray 変数、次に位置のアイテム 0 内側の配列で。

配列へのアイテムの追加

私たちの中で seaCreatures 変数からのインデックスで構成された5つのアイテムがありました 0 に 4. 配列に新しいアイテムを追加する場合は、次のインデックスに値を割り当てることができます。

seaCreatures[5] = "whale";

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale' ]

アイテムを追加して誤ってインデックスをスキップすると、配列に未定義のアイテムが作成されます。

seaCreatures[7] = "pufferfish";

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish' ]

追加の配列アイテムにアクセスしようとすると、 undefined.

seaCreatures[6]

Output
undefined

そのような問題は、を使用することで回避できます push() メソッド。配列の最後に項目を追加します。

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	,
	'whale',
	'pufferfish',
	'lobster' ]

スペクトルの反対側では、 unshift() メソッドは、配列の先頭に項目を追加します。

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish',
	'lobster' ]

間 push() と unshift() 配列の最初と最後にアイテムを追加できるようになります。

配列からのアイテムの削除

配列から特定のアイテムを削除する場合は、 splice() 方法。 の中に seaCreatures 配列、以前に誤って未定義の配列項目を作成したので、今それを削除しましょう。

seaCreatures.splice(7, 1);

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]

の中に splice() メソッドの場合、最初のパラメーターは削除するインデックス番号を表します（この場合、 7）、2番目のパラメータは削除するアイテムの数です。 入れます 1、1つのアイテムのみが削除されることを意味します。

The splice() メソッドは元の変数を変更します。 元の変数を変更しない場合は、次を使用します。 slice() 結果を新しい変数に割り当てます。 ここでは、2つの変数を割り当てます。 slice() 保存する seaCreatures 最初の要素からまでの配列 whale、および要素を格納するための2番目の変数 pufferfish と lobster. 2つのアレイを結合するには、 concat() 新しい配列を返すメソッド。

let firstArray = seaCreatures.slice(0, 7);
let secondArray = seaCreatures.slice(8, 10); 

firstArray.concat(secondArray);

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish',
	'lobster' ]

を呼び出すときに注意してください seaCreatures 変数の場合、配列内の項目は変更されません。

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	,
	'pufferfish',
	'lobster' ]

The pop() メソッドは、配列の最後の項目を削除します。

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

Output
[ 'dragonfish',
	'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

lobster 配列の最後の項目として削除されました。 配列の最初の項目を削除するために、 shift() 方法。

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

Output
[ 'octopus',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

を使用して pop() と shift()、配列の最初と最後からアイテムを削除できます。 使用する pop() 配列内の残りの項目は元のインデックス番号を保持するため、可能な限り推奨されます。

配列内のアイテムの変更

通常の変数の場合と同じように、代入演算子を使用して新しい値を割り当てることにより、配列内の任意の値を上書きできます。

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

Output
[ 'manatee',
	'squid',
	'shark',
	'seahorse',
	'starfish',
	'whale',
	'pufferfish' ]

値を変更する別の方法は、 splice() 新しいパラメータを持つメソッド。 の値を変更したい場合 seahorse、インデックスのアイテムです 3、それを削除して、その場所に新しいアイテムを追加することができます。

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

Output
[ 'manatee',
	'squid',
	'shark',
	'sea lion',
	'starfish',
	'whale',
	'pufferfish' ]

上記の例では、 seahorse 配列から、新しい値をインデックスにプッシュしました 3.

配列をループする

配列全体をループすることができます for キーワード、を利用して length 財産。 この例では、次の配列を作成できます shellfish 各インデックス番号と各値をコンソールに出力します。

// Create an array of shellfish species
let shellfish = [
	"oyster",
	"shrimp",
	"clam",
	"mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

Output
0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

使用することもできます for...of ループ、JavaScriptの新機能。

// Create an array of aquatic mammals
let mammals = [
	"dolphin",
	"whale",
	"manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
	console.log(mammal);
}

Output
dolphin
whale
manatee

The for...of loopは、配列内の要素のインデックス番号を取得しませんが、通常、配列をループするためのより簡単で簡潔な方法です。

ループの使用は、Webサイトのデータベースからアイテムを表示する場合など、配列の値全体を出力する場合に非常に役立ちます。

結論

配列は、JavaScriptでのプログラミングの非常に用途が広く基本的な部分です。 このチュートリアルでは、配列の作成方法、配列のインデックス作成方法、およびアイテムの作成、削除、変更など、配列での作業で最も一般的なタスクのいくつかを学習しました。 また、データを表示するための一般的な方法として使用される、配列をループする2つの方法を学びました。

JavaScriptの他のデータ型について詳しくは、チュートリアル「JavaScriptのデータ型について」をご覧ください。