TOC

JavaScriptの配列について

前書き

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

配列は、単一の変数に複数の値を格納するので非常に便利です。配列はコードを圧縮および整理し、読みやすく保守しやすくします。 配列には、numbers、strings、objectsなどの任意のdata typeを含めることができます。

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

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

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

インデックス配列

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

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

配列をループする

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

Related