前書き

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

配列は、単一の変数に複数の値を格納するので非常に便利です。配列はコードを圧縮および整理し、読みやすく保守しやすくします。 配列には、https://www.digitalocean.com/community/tutorials/understanding-dataを含む、https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript [data type]を含めることができます。 -types-in-javascript#numbers [numbers]、https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript#strings [strings]、およびhttps://www.digitalocean。 com / community / tutorials / understanding-data-types-in-javascript#objects [objects]。

配列がどのように役立つかを示すために、世界の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];
OutputPacific

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

配列を作成する

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

  • 角かっこを使用する配列リテラル。

  • `+ new +`キーワードを使用する配列コンストラクター。

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

sharks.js

// Initialize array of shark species with array literal
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",
   ],
];

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

インデックス配列

JavaScriptでの文字列のインデックス付けと操作について知っている場合は、おなじみかもしれません。文字列は配列に似ているため、配列のインデックス付けの概念が既にあります。

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

海の生き物.js

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

以下に、 `+ seaCreatures +`配列内の各アイテムがどのようにインデックス付けされるかを示します。

octopus squid shark seahorse starfish

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()+`を使用して、結果を新しい変数に割り当てます。

let newArray = slice(7, 1);

`+ 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 +`にプッシュしました。

配列をループする

+ 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]);
}
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の他のデータ型の詳細については、チュートリアル「https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[JavaScriptのデータ型について]」を参照してください。