JavaScriptの配列を理解する
序章
JavaScriptのarrayは、データを格納するために使用されるグローバルオブジェクトの一種です。 配列は、0個以上のデータ型を含む順序付けられたコレクションまたはリストで構成され、0
で始まる番号付きのインデックスを使用して特定のアイテムにアクセスします。
配列は、複数の値を1つの変数に格納するため、非常に便利です。これにより、コードを凝縮して整理し、コードをより読みやすく、保守しやすくすることができます。 配列には、数値、文字列、オブジェクトなど、任意のデータ型を含めることができます。
配列がどのように役立つかを示すために、世界の5つの海を独自の変数に割り当てることを検討してください。
// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";
この方法は非常に冗長であり、保守と追跡がすぐに困難になる可能性があります。
配列を使用すると、データを単純化できます。
// 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];
OutputPacific
このチュートリアルでは、配列を作成する方法を学習します。 それらがどのように索引付けされるか。 配列内のアイテムを追加、変更、削除、またはアクセスする方法。 配列をループする方法。
配列の作成
JavaScriptで配列を作成する方法は2つあります。
- 角かっこを使用する配列リテラル。
new
キーワードを使用する配列コンストラクター。
[]
で初期化される配列リテラルを使用してサメ種の配列を作成する方法を示しましょう。
// Initialize array of shark species with array literal
[label sharks.js]
let sharks = [
"Hammerhead",
"Great White",
"Tiger",
];
これが、new Array()
で初期化された配列コンストラクターで作成されたものと同じデータです。
// 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
に割り当てられた配列の例を次に示します。
let seaCreatures = [
"octopus",
"squid",
"shark",
"seahorse",
"starfish",
];
seaCreatures
配列の各アイテムのインデックス作成方法の内訳は次のとおりです。
たこ | いか | 鮫 | タツノオトシゴ | ヒトデ |
---|---|---|---|---|
0 | 1 | 2 | 3 | 4 |
配列の最初の項目はoctopus
で、0
でインデックスが付けられます。 最後のアイテムはstarfish
で、4
でインデックスが作成されます。 カウントはインデックスの0
で始まります。これは、1からカウントを開始するという私たちの自然な直感に反するため、自然になるまでこれを覚えておく必要があります。
length
プロパティを使用して、配列に含まれるアイテムの数を確認できます。
seaCreatures.length;
Output5
seaCreatures
のインデックスは0
から4
で構成されますが、length
プロパティは、1から始まる配列内の実際のアイテム数を出力します。
seahorse
など、配列内の特定のアイテムのインデックス番号を確認する場合は、indexOf()
メソッドを使用できます。
seaCreatures.indexOf("seahorse");
Output3
存在しない値など、インデックス番号が見つからない場合、コンソールは-1
を返します。
seaCreatures.indexOf("cuttlefish");
Output-1
配列内のアイテムに対応するインデックス番号を使用すると、各アイテムに個別にアクセスして、それらのアイテムを操作できます。
配列内のアイテムへのアクセス
JavaScript配列内のアイテムは、角括弧内のアイテムのインデックス番号を参照することによってアクセスされます。
seaCreatures[1];
Outputsquid
0
は常に配列の最初の項目を出力することがわかっています。 length
プロパティで操作を実行し、それを新しいインデックス番号として適用することで、配列の最後の項目を見つけることもできます。
const lastIndex = seaCreatures.length - 1;
seaCreatures[lastIndex];
Outputstarfish
存在しないアイテムにアクセスしようとすると、undefined
が返されます。
seaCreatures[10];
Outputundefined
ネストされた配列内のアイテムにアクセスするには、内部配列に対応する別のインデックス番号を追加します。
let nestedArray = [
[
"salmon",
"halibut",
],
[
"coral",
"reef",
]
];
nestedArray[1][0];
Outputcoral
上記の例では、nestedArray
変数の位置1
にある配列にアクセスし、次に内部配列の位置0
にあるアイテムにアクセスしました。
配列へのアイテムの追加
seaCreatures
変数には、0
から4
までのインデックスで構成される5つの項目がありました。 配列に新しいアイテムを追加する場合は、次のインデックスに値を割り当てることができます。
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]
Outputundefined
このような問題は、配列の最後に項目を追加する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つのアイテムのみが削除されることを意味します。
splice()
メソッドは、元の変数を変更します。 元の変数を変更しない場合は、slice()
を使用して、結果を新しい変数に割り当てます。 ここでは、2つの変数を割り当てます。1つはslice()
を使用して最初の要素からwhale
までのseaCreatures
配列を格納し、もう1つは要素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' ]
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()
メソッドを新しいパラメーターで使用することです。 インデックス3
のアイテムであるseahorse
の値を変更したい場合は、それを削除して、代わりに新しいアイテムを追加できます。
// 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
にプッシュしました。
配列をループする
length
プロパティを利用して、for
キーワードを使用して配列全体をループできます。 この例では、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]);
}
Output0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'
JavaScriptの新機能であるfor...of
ループを使用することもできます。
// Create an array of aquatic mammals
let mammals = [
"dolphin",
"whale",
"manatee",
];
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal);
}
Outputdolphin
whale
manatee
for...of
ループは、配列内の要素のインデックス番号を取得しませんが、通常、配列をループするためのより簡単で簡潔な方法です。
ループの使用は、Webサイトのデータベースからアイテムを表示する場合など、配列の値全体を出力する場合に非常に役立ちます。
結論
配列は、JavaScriptでのプログラミングの非常に用途が広く基本的な部分です。 このチュートリアルでは、配列の作成方法、配列のインデックス作成方法、およびアイテムの作成、削除、変更など、配列での作業で最も一般的なタスクのいくつかを学習しました。 また、データを表示するための一般的な方法として使用される、配列をループする2つの方法を学びました。
JavaScriptの他のデータ型について詳しくは、チュートリアル「JavaScriptのデータ型について」をご覧ください。