JavaScript 配列ハンドブック – JS 配列メソッドがどのように機能するかを例とチートシートで学びます

プログラミングにおいて、配列は要素のコレクションを含むデータ構造です。配列は、複数の要素を 1 つの配列に保存、アクセス、操作できるため便利です。

このマニュアルでは、JavaScript で配列を使用する方法を学習します。配列を作成するときに従う必要がある特定のルールと、必要に応じて配列メソッドを使用して配列を操作および変換する方法について説明します。

JavaScript での配列の仕組み

JavaScriptにおける配列の仕組み

JavaScript では、配列は、項目、要素、または値のセットを順序付けられたコレクションとして保持するオブジェクトとして実装されます。これは、コレクション内の位置を使用して配列内の要素にアクセスできることを意味します。これがなぜ重要なのかについては、次のセクションで説明します。

配列はさまざまなデータ型の要素を保持できますが、配列のサイズは固定されていません。これは、必要な数の要素を配列に追加できることを意味します。

JavaScriptで配列を作成する方法

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

角括弧を使用する[]
Array()コンストラクターを使用する

角括弧は、[]配列を作成するためのリテラル表記です。配列要素は角かっこ内で定義され、各要素はカンマで区切られます,。

次の例は、数値、文字列、ブール値という 3 つの異なるタイプの要素を含むという名前の配列を作成する方法を示していますmyArray。

let myArray = [29, 'Nathan', true];

3 つの数値要素を含む配列を作成する方法は次のとおりです。

let myNumbers = [5, 10, 15];

角括弧内に任意の数の要素を指定できます。

配列を作成するもう 1 つの方法は、Array()角括弧のように機能するコンストラクターを使用することです。

let myArray = Array(29, 'Nathan', true);

// or
let myNumbers = new Array(5, 10, 15);

newコンストラクターは演算子の有無にかかわらず呼び出すことができることに注意してください。どちらも配列オブジェクトを問題なく作成します。

ほとんどのコードサンプルとコードライブラリでは、開発者がコンストラクターの代わりに角括弧を使用して配列を作成しているのを目にすることがあります。これは、を[]入力するよりも入力の方が速いためですArray()。

配列の要素にアクセスする方法

前に述べたように、配列は順序付けられたコレクションであるため、配列内の位置 (インデックス番号とも呼ばれます) から要素にアクセスできます。

配列の要素にアクセスするには、配列名を指定し、その後に角括弧を続ける必要があります。角括弧内に、アクセスする要素のインデックスを指定します。

たとえば、最初の要素にアクセスする方法は次のとおりですmyArray。

let myArray = [29, 'Nathan', true];

console.log(myArray[0]); // 29
console.log(myArray[1]); // Nathan
console.log(myArray[2]); // true

配列のインデックス番号は 0 から始まり、要素が配列に追加されるたびにインデックス番号は 1 ずつ増加します。

undefinedまだ値が割り当てられていないインデックス番号にアクセスしようとすると、JavaScript は次のような値を返します。

let myArray = [29, 'Nathan', true];

console.log(myArray[3]); // undefined
console.log(myArray[4]); // undefined
console.log(myArray[100]); // undefined

代入演算子を使用して、インデックス番号の要素を新しい要素に置き換えることもできます=。

次の例は、3 番目の要素 (ブール値) を文字列に置き換える方法を示しています。

let myArray = [29, 'Nathan', true];

// Replace the third element
myArray[2] = 'Sebhastian';

console.log(myArray); // [ 29, 'Nathan', 'Sebhastian' ]

true上の例では、ブール値が文字列「Sebhstian」に置き換えられていることがわかります。次に、不動産について見てみましょうlength。

配列の`length`プロパティ

このlengthプロパティは、配列に含まれる要素の数を示します。.次のようにドット表記を使用してこのプロパティにアクセスできます。

let myArray = [29, 'Nathan', true];

console.log(myArray.length); // 3

let animals = ['Dog', 'Cat'];

console.log(animals.length); // 2

lengthこのプロパティは、要素が配列に追加または配列から削除されるたびに更新されます。

配列に要素を追加する方法

1 つ以上の要素を配列に追加するには、配列push()とunshift()メソッドを使用できます。

このpush()メソッドは新しい要素を配列の末尾に追加しますが、このunshift()メソッドは新しい要素を配列の先頭に挿入します。

let animals = ['Dog', 'Cat'];

animals.push('Horse', 'Fish');

console.log(animals);
// [ 'Dog', 'Cat', 'Horse', 'Fish' ]

animals.unshift('Bird');

console.log(animals);
// [ 'Bird', 'Dog', 'Cat', 'Horse', 'Fish' ]

ここで、配列に追加する要素をカンマを使用して区切ることができることに注意してください。

次に、配列から要素を削除する方法を見てみましょう。

配列から要素を削除する方法

配列から要素を削除するには、削除する要素の位置に応じてメソッドshift()とメソッドを使用できます。pop()

このshift()メソッドを使用して配列の最初の要素を削除し、このメソッドを使用してpop()配列の最後の要素を削除します。

let animals = ['Dog', 'Cat', 'Horse', 'Fish'];

animals.shift();

console.log(animals);
// [ 'Cat', 'Horse', 'Fish' ]

animals.pop();

console.log(animals);
// [ 'Cat', 'Horse' ]

また、一度に削除できる要素は 1 つだけですshift()。pop()配列の途中にある要素を削除したい場合は、このsplice()メソッドを使用する必要があります。

を使用して`splice()`要素を削除または追加する方法

配列splice()メソッドは、特定の位置の要素を削除または追加するために使用されます。pushこの方法は、pop、shift、、がunshiftジョブを完了できない場合に使用できます。

このメソッドを使用して要素を削除するにはsplice()、配列操作を開始するインデックス番号と削除する要素の数の 2 つのパラメーターを指定する必要があります。

たとえば、animals配列内のインデックス 1 と 2 にある 2 つの要素を削除するとします。その方法は次のとおりです。

let animals = ['Dog', 'Cat', 'Horse', 'Fish'];

animals.splice(1, 2);

console.log(animals);
// [ 'Dog', 'Fish' ]

これは、splice(1, 2)インデックス 1 から配列操作を開始し、そこから 2 つの要素を削除することを意味します。

add 要素を使用するには、splice()2 番目の引数の後に追加する要素を指定する必要があります。

たとえば、ここでは文字列値「Bird」と「Squid」をインデックス 1 に追加します。

let animals = ['Dog', 'Cat'];

animals.splice(1, 0, 'Bird', 'Squid');

console.log(animals);
// [ 'Dog', 'Bird', 'Squid', 'Cat' ]

要素を削除したくない場合は、要素0を 2 番目のパラメーターとしてsplice()メソッドに渡すことができます。次に、追加する要素を指定します。

splice()この方法を初めて見ると戸惑うかもしれませんが、心配しないでください。もっと練習すれば、その仕組みを覚えられるでしょう。

変数が配列かどうかを確認する方法

変数が配列であるかどうかを確認するには、メソッドを使用して、Array.isArray()メソッドに指定された引数が配列であるかどうかをテストできます。

trueこのメソッドに配列を渡すと、false他のメソッドと同様に、このメソッドは次の値を返します。

let myArray = [1, 2, 3];
let notAnArray = 'Hello!';

console.log(Array.isArray(myArray)); // true
console.log(Array.isArray(notAnArray)); // false

Arrayメソッドを呼び出すときにクラスを指定する必要があることに注意してくださいisArray()。

これはisArray()静的メソッドであるため、メソッドが定義されているクラスからのみ直接呼び出すことができます。

配列を反復またはループする方法

JavaScript では、使用するメソッドに応じて、配列を反復処理する 4 つの方法があります。

forループを使用する
whileループを使用する
for...inループを使用する
for...ofループを使用する
使用forEach()方法

例を通してこれら 4 つのメソッドの使用方法を学びましょう。

1.forループの使い方

ループを使用して配列を反復処理するにはfor、配列をlength条件式として使用する必要があります。

次の例では、for変数が配列の長さより小さい限り、iループは実行され続けます。

let animals = ['dog', 'bird', 'cat', 'horse'];

for (let i = 0; i < animals.length; i++) {
  console.log(animals[i]);
}

forループの本体内で配列の要素を操作できます。

2. whileループの使い方

配列を反復処理するもう 1 つの方法は、ループを使用することですwhile。for前のループと同様に、変数と配列の長さを使用して、反復を停止するタイミングを制御する必要があります。

let animals = ['dog', 'bird', 'cat', 'horse'];

let i = 0;

while (i < animals.length) {
  console.log(animals[i]);
  i++;
}

i無限ループを避けるために、while ループ内で変数を 1 つインクリメントする必要があります。

3. for...in ループの使い方

ループは、for...in配列を反復処理するために使用できる別の構文です。このループは配列のインデックス位置を返すので、次のように使用できます。

let animals = ['dog', 'bird', 'cat', 'horse'];

for (i in animals) {
  console.log(animals[i]);
}

for...inforこのループは or ループよりも簡潔ですが、配列を反復処理する場合はループを使用することをお勧めしますwhile。for...of

4. for...of ループの使い方

このfor...ofループは、配列を反復処理するために使用できます。各反復で配列の要素を返します。

let animals = ['dog', 'bird', 'cat', 'horse'];

for (element of animals) {
  console.log(element);
}

for...inインデックス位置にループバックする場合、for...ofループは要素を直接返します。

5.使用`forEach()`方法

JavaScript 配列オブジェクト自体には、位置 0 から最後の位置まで配列を反復処理するために使用できるメソッドが含まれていますforEach()。

このメソッドは、反復ごとに実行されるコールバック関数を受け入れます。反復ごとに、メソッドには配列の要素とインデックス位置も渡されます。このメソッドの使用例を次に示します。

let animals = ['dog', 'bird', 'cat', 'horse'];

animals.forEach(function (element, index) {
  console.log(`${index}: ${element}`);
});

出力は次のようになります。

0: dog
1: bird
2: cat
3: horse

このメソッドを使用して配列を反復処理する方法は次のとおりですforEach()。好きな方法を使用できます。

配列を文字列に変換する方法

配列を文字列に変換するには、toString()orjoin()メソッドを使用できます。

このtoString()メソッドは、指定された配列を、要素がカンマで区切られた文字列に変換します。

const animals = ['cat', 'bird', 'fish'];

console.log(animals.toString()); // "cat,bird,fish"

このjoin()メソッドも配列を文字列に変換しますが、引数として特定の文字列区切り文字を渡すことができます。

次の例は、文字列区切り文字としてスラッシュと空の文字列を使用する方法を示しています/。

const animals = ['cat', 'bird', 'fish'];

console.log(animals.join()); // "cat,bird,fish"

console.log(animals.join('/')); // "cat/bird/fish"

console.log(animals.join('')); // "catbirdfish"

toString()このメソッドはバックグラウンドで、join()文字列を作成するメソッドを実際に呼び出します。

2 つの配列を比較する方法

JavaScript 配列はオブジェクトとして扱われます。したがって、2 つの配列を比較する場合、比較では実際の値ではなく、参照 (つまり、配列が格納されているメモリ位置のアドレス) が参照されます。

false2 つの配列に同じ要素が含まれている場合でも、それらの比較では次の結果が返されます。

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

console.log(arrayOne === arrayTwo); // false

arrayOneこれは、とがarrayTwo異なるメモリ場所に格納されている異なるオブジェクトであるためです。

配列比較で返される唯一の方法は、true両方の変数が同じ配列オブジェクトを参照している場合です。次の例では、arrayTwo変数はへの参照ですarrayOne。

let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne;

console.log(arrayOne === arrayTwo); // true

ただし、異なる参照からの 2 つの配列を比較する必要がある場合、これは機能しません。配列を比較する 1 つの方法は、配列を JSON オブジェクトに変換することです。

配列を JSON オブジェクトに変換して比較します。

2 つの異なる配列を比較する前に、JSON.stringify()このメソッドを呼び出して配列を JSON オブジェクトに変換する必要があります。

次に、次のように 2 つのシリアル化された文字列を比較できます。

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

console.log(JSON.stringify(arrayOne) === JSON.stringify(arrayTwo)); // true

falseただし、このソリューションは配列を間接的に比較するため、代わりに同じ値が異なる順序で返されますtrue。

2 つの配列の要素をプログラムで比較するには、別のソリューションを使用する必要があります。

メソッドを使用して`every()`配列を比較する方法

length2 つの配列を比較するもう 1 つの方法は、プロパティとメソッドの組み合わせを使用することですevery()。

trueまず、配列の長さを比較して、2 番目の配列に最初の配列より多くの要素が含まれている場合に比較が戻らないようにします。

その後、最初の配列の要素が 2 番目の配列の同じインデックスにある要素と等しいかどうかをテストします。以下に示すように、演算子を使用して&&比較を結合します。

let arrayOne = [7, 8, 9];
let arrayTwo = [7, 8, 9];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element, index) {
    // compare if the element matches in the same index
    return element === arrayTwo[index];
  });

console.log(result); // true

このようにして、特定のインデックスの要素が実際に等しいかどうかを比較できます。

ただし、この解決策では、両方の配列が返されるために、あるインデックスに同じ要素が含まれている必要がありますtrue。

順序を気にせず、2 つの配列に同じ要素を持たせたいだけの場合は、includes()等価演算子の代わりにこのメソッドを使用する必要があります===。

メソッドを使用して`includes()`配列を比較する方法

every()順序付けされていない配列要素を比較するには、メソッドとメソッドを組み合わせて使用できますincludes()。

このincludes()メソッドは、引数として指定した特定の要素が配列にあるかどうかをテストします。

let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.includes(element);
  });

console.log(result); // true

このメソッドの代わりに、指定された要素のインデックスを返すincludes()このメソッドを使用することもできます。indexOf()

indexOf()このメソッドは、要素が見つからない場合に戻ります-1。これは、次の場合に商品を返品する必要があることを意味しますevery()。trueindexOf(element) !== -1

let arrayOne = [7, 8, 9];
let arrayTwo = [9, 7, 8];

let result =
  arrayOne.length === arrayTwo.length &&
  arrayOne.every(function (element) {
    return arrayTwo.indexOf(element) !== -1;
  });

console.log(result); // true

ご覧のとおり、配列の比較は簡単ではありません。配列オブジェクトによって提供されるメソッドを創造的に使用する必要があります。

でも心配しないでください。ほとんどの場合、Web アプリケーションを開発するときに配列オブジェクトを比較する必要はありません。次に、配列をコピーする方法を学びましょう。

配列をコピーする方法

配列をコピーする 1 つの方法は、slice()配列のコピー専用に提供されているメソッドを使用することです。

次のようにメソッドを呼び出して、返された配列を新しい変数に割り当てるだけです。

let arrayOne = [7, 8, 9];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ 7, 8, 9 ]
console.log(arrayTwo); // [ 7, 8, 9 ]

ただし、このslice()メソッドは浅いコピーを返します。これは、コピーの値が元の配列への参照であることを意味します。

配列に文字列、数値、ブール値などのプリミティブ値が含まれている場合、浅いコピーは問題を引き起こしません。ただし、オブジェクトの配列をコピーする場合、これが問題になる可能性があります。

私が何を言いたいのかを示すために、以下の例を見てください。

let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = arrayOne.slice();

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[0].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Nathan', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

何かが間違っていることに気づきましたか? 上記のコードはnameのプロパティのみを変更しますarrayTwoが、両方の配列も変更します。

これはarrayTwo浅いコピーが原因ですarrayOne。この動作を防ぐには、ディープコピーを実行して、arrayTwo値が元の配列から切り離されるようにする必要があります。

配列のディープコピーを作成する方法

配列のディープコピーを作成するには、メソッドを使用して配列をコピーする代わりに、JSON.parse()andメソッドを使用する必要があります。JSON.stringify()slice()

配列を JSON 文字列に変換しJSON.stringify()、JSON.parse()その文字列を配列に戻します。

コピーは JSON 文字列から作成されるため、元の配列への接続はなくなります。

let arrayOne = [{ name: 'Jack', age: 25 }];
let arrayTwo = JSON.parse(JSON.stringify(arrayOne));

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Jack', age: 25 } ]

arrayTwo[0].name = 'Nathan';

console.log(arrayOne); // [ { name: 'Jack', age: 25 } ]
console.log(arrayTwo); // [ { name: 'Nathan', age: 25 } ]

ここで、プロパティを変更しても、arrayTwoの同じプロパティは変更されないことがわかりますarrayOne。どうぞ！

2 つの配列を 1 つにマージする方法

JavaScript は、concat()2 つ以上の配列を 1 つに結合するために使用できるメソッドを提供します。cats次の例は、とのbirds配列をという名前の単一の配列に結合する方法を示していますanimals。

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = cats.concat(birds);

console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]
console.log(cats); // [ 'tiger', 'cat' ]
console.log(birds); // [ 'owl', 'eagle' ]

一見すると、このメソッドの構文は配列を配列にマージするconcat()ものであるように見えます。ただし、コンソールログからわかるように、配列は実際には変更されていません。birdscatscats

コードをより直感的にするには、配列concat()ではなく空の配列からcatsメソッドを呼び出すことができます。

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [].concat(cats, birds);

cats.concat(birds)この構文はより直感的ですが、多くの JavaScript ソースコードでこの構文に遭遇する可能性があります。どの構文を使用すればよいでしょうか? それを決めるのはあなたとあなたのチームです。

このconcat()方法を使用すると、必要な数の配列を結合できます。次の例では、3 つの配列を 1 つに結合します。

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];
let dogs = ['wolf', 'dog'];

let animals = [].concat(cats, birds, dogs);
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle', 'wolf', 'dog' ]

concat()この方法を使用して配列を結合する方法がわかりました。次に、スプレッド演算子を使用して配列を結合する方法を見てみましょう。

スプレッド演算子を使用して配列を結合する方法

スプレッド演算子...を使用して、マージする配列の要素を拡張できます。次のように、展開された要素を新しい配列に配置する必要があります。

let cats = ['tiger', 'cat'];
let birds = ['owl', 'eagle'];

let animals = [...cats, ...birds];
console.log(animals); // [ 'tiger', 'cat', 'owl', 'eagle' ]

catsここでは、および配列内の要素がbirds別の配列に展開され、その配列が変数の値として割り当てられていることがわかりますanimals。

このconcat()メソッドとスプレッド演算子の両方を使用して、複数の配列を結合できます。

配列を検索する方法

達成したい結果に応じて、次の 3 つの方法で配列を検索できます。

配列内に要素が存在するかどうかを調べる
配列内の要素のインデックス位置を検索します。
特定の基準を満たす配列内の値を検索します

配列を検索する 3 つの方法を学びましょう。心配しないでください。簡単です。

1. 配列に要素が存在するかどうかを確認する方法

このメソッドは、要素が配列内に存在するかどうかだけを知りたい場合に使用できますincludes()。次の例では、文字列の配列内で文字列値「e」を検索します。

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.include('e')); // false

includes()このメソッドは、要素が見つかった場合、または見つからなかった場合に戻ります。truefalse

2. 配列内の要素のインデックス位置を見つける方法

また、要素のインデックス位置を取得したい場合もあります。indexOf()この場合、次の方法を使用する必要があります。

let letters = ['a', 'b', 'c', 'd'];

console.log(letters.indexOf('c')); // 2

ここでは、値「c」のインデックスを検索するために配列indexOf()に対してメソッドが呼び出されます。このメソッドは要素が見つからない場合に戻りますが、この場合は2 番目のインデックスで文字 c を返します (JS ではゼロベースのインデックスが使用されることに注意してください。つまり、カウントは 1 ではなく 0 から始まります)。letters-12

3. 配列内で特定の条件を満たす要素を見つける方法

特定の条件を満たす要素を検索するには、このメソッドを使用する必要がありますfilter()。

このfilter()メソッドは、JavaScript 配列オブジェクトで使用できる組み込みメソッドで、配列のフィルター処理に役立ちます。このメソッドの構文は次のとおりです。

arrayObject.filter(callback, thisContext);

このメソッドには 2 つのパラメータがあります。

callback(必須) – 各配列値に対して実行されるフィルター関数
thisContext(オプションthis) - のキーワードの値callback

このthisContextパラメータはオプションであり、通常は必須ではありません。必要なのはcallback、3 つのパラメーターを受け入れる関数を定義することだけです。

currentElementメソッドに処理されています
indexで始まる要素の0
そしてarrayあなたが呼び出すオブジェクトfilter()

filterCallback(currentElement, index, array){
  // ...
}

trueコールバック関数には、またはを返す検証パターンが含まれている必要がありますfalse。

フィルター方法の例

実際の例を見てみましょうfilter()。次の名前の配列があるとしますstockPrices。

let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];

5 を超える価格のみが含まれるように価格をフィルターしたいとします。

filter()このメソッドの使用方法は次のとおりです。

let stockPrices = [3, 7, 2, 15, 4, 9, 21, 14];

let filteredPrices = stockPrices.filter(function (currentElement) {
  return currentElement > 5;
});

console.log(filteredPrices); // [7, 15, 9, 21, 14]

このfilter()メソッドはORを計算しcurrentElementて返します。truefalse

コールバック関数がを返した場合true、currentElement結果の配列に追加されます。

最初の反復中に、コールバックcurrentElementは戻ります。3false
2 回目の反復中に、コールバックが戻り、currentElement値を結果配列にプッシュします。7true
反復は最後の要素まで継続されます
結果の配列はfilteredPrices変数に代入されます

これがこの方法の仕組みです。filter()次に、このメソッドを使用してオブジェクトの配列をフィルターする方法を見てみましょう。

オブジェクトの配列をフィルタリングする方法

このfilter()メソッドはオブジェクトの配列でも使用できます。

以下に示すように、架空の株価とそのシンボルを含むオブジェクトの配列があるとします。

let stocks = [
  {
    code: 'GOOGL',
    price: 1700,
  },
  {
    code: 'AAPL',
    price: 130,
  },
  {
    code: 'MSFT',
    price: 219,
  },
  {
    code: 'TSLA',
    price: 880,
  },
  {
    code: 'FB',
    price: 267,
  },
  {
    code: 'AMZN',
    price: 3182,
  },
];

price次に、値が 1000 未満の株式のみを含めるように配列をフィルターする必要があります。具体的な操作方法は以下の通りです。

let filteredStocks = stocks.filter(function (currentElement) {
  return currentElement.price < 1000;
});

値はfilteredStocks次のとおりです。

0: {code: "AAPL", price: 130}
1: {code: "MSFT", price: 219}
2: {code: "TSLA", price: 880}
3: {code: "FB", price: 267}

最後に、以下に示すように、アロー関数構文を使用してコールバック関数を記述することもできます。

let filteredStocks = stocks.filter(
  currentElement => currentElement.price < 1000
);

単純なフィルター条件がある場合、アロー関数構文を使用すると、よりクリーンなコードを作成できます。

配列をソートする方法

配列を並べ替えるには、提供されているメソッドを使用できますsort()。このメソッドは、デフォルトで配列を昇順に並べ替えます。

let numbers = [5, 2, 4, 1];

numbers.sort();

console.log(numbers); // [ 1, 2, 4, 5 ]

配列を降順に並べ替える場合は、次のようにこのメソッドreverse()の後にこのメソッドを呼び出すことができます。sort()

let numbers = [5, 2, 4, 1];

numbers.sort().reverse();

console.log(numbers); // [ 5, 4, 2, 1 ]

このreverse()メソッドは配列を反転して、最初の配列要素が最後になり、最後の要素が最初になるというようになります。

多次元配列の作成方法

多次元配列は、別の配列を含む配列です。作成するには、配列リテラル (角括弧) の中に配列を記述する必要があります。

次の例は、2 次元配列を作成する方法を示しています。

let numbers = [[5, 6, 7]];

配列にアクセスするには、2 つの配列インデックスを使用して変数を呼び出すだけです。最初のインデックスは外側の配列用で、2 番目のインデックスは内側の配列用です。

let numbers = [[5, 6, 7]];
console.log(numbers[0][0]); // 5
console.log(numbers[0][1]); // 6
console.log(numbers[0][2]); // 7

上の例からわかるように、配列は外側の配列のインデックス内に[5, 6, 7]格納されます。次のように配列に要素を追加できます。0[]

let numbers = [[5, 6, 7], [10], [20]];
console.log(numbers[1][0]); // 10
console.log(numbers[2][0]); // 20

上に示したように、多次元配列は同じ配列長である必要はありません。3 次元または 4 次元の配列も作成できますが、混乱を招く可能性があるため、2 次元を超える配列を作成することはお勧めできません。

[23]以下の 3 次元配列内の値を読み取ってアクセスすることがいかに難しいかに注意してください。

let numbers = [[5, 6, 7, [23]]];
console.log(numbers[0][3][0]); // 23

最後に、、、ArrayなどのJavaScript オブジェクトメソッドを引き続き使用して、多次元配列を操作できます。push()shift()unshift()

let numbers = [[5, 6, 7, [23]]];
numbers.push([50]);
console.log(numbers); // [[5, 6, 7, [23]], [50]]

numbers.shift();
console.log(numbers); // [[50]]

numbers.unshift('13');
console.log(numbers); // ["13", [50]]

多次元配列には、1 次元配列と比較して固有のメソッドがありません。通常、関連するデータのセットを配列として保存するために使用されます。

次の例は、name多次元配列で値をグループ化する方法を示しています。age

let users = [
  ['Nathan', 28],
  ['Jack', 23],
  ['Alex', 30],
];

配列を使用する必要がない限り、オブジェクトの配列を使用して関連データのセットを保存することをお勧めします。

let users = [
  { name: 'Nathan', age: 28 },
  { name: 'Jack', age: 23 },
  { name: 'Alex', age: 30 },
];

理想的には、プロジェクトでは 1 次元配列のみを使用する必要があります。本当に必要な場合は 2D 構造を使用しますが、範囲外に出さないようにしてください。範囲外に出ないと、後で配列を操作するのに問題が生じます。