JavaScriptの配列を理解する

序章

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];

OutputPacific

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

配列の作成

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;

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つは要素[を格納するための変数です。 X176X]および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のデータ型について」をご覧ください。