序章

JavaScript配列は、要素のリストで構成されるデータ型です。 JavaScriptで配列を操作するための便利な組み込みメソッドがたくさんあります。 元の配列を変更するメソッドはミューテーターメソッドと呼ばれ、新しい値または表現を返すメソッドはアクセサーメソッドと呼ばれます。 このチュートリアルでは、アクセサメソッドに焦点を当てます。

このチュートリアルを最大限に活用するには、配列の作成、インデックス作成、変更、およびループにある程度精通している必要があります。これは、チュートリアルJavaScriptでの配列の理解で確認できます。

このチュートリアルでは、配列を連結し、配列を文字列に変換し、配列の一部を新しい配列にコピーし、配列のインデックスを見つけるメソッドについて説明します。

注:配列メソッドは次のように正しく記述されます Array.prototype.method()、 なので Array.prototype を参照 Array オブジェクト自体。 簡単にするために、名前を次のようにリストします。 method().

concat()

The concat() メソッドは、2つ以上の配列をマージして、新しい配列を形成します。

以下の例では、貝の種類の2つの配列を作成し、それらを1つの新しい配列に結合します。

// Create arrays of monovalves and bivalves
let monovalves = [ "abalone", "conch" ];
let bivalves = [ "oyster", "mussel", "clam" ];

// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves);

新しい配列を呼び出すと、2つの元の配列の組み合わせで構成されていることがわかります。

shellfish;
Output
[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]

The concat() メソッドは複数の引数を取ることができるため、1つのメソッドで多くの配列を効果的に連結できます。

加入()

The join() メソッドは、配列のすべての要素を新しい文字列に変換します。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

引数が指定されていない場合、 join() 余分な空白のないコンマ区切りの文字列になります。

// Join the elements of an array into a string
let fishString = fish.join();

fishString;
Output
'piranha,barracuda,koi,eel'

空白または別の区切り文字を含めるために、区切り文字の文字列をパラメーターとして join() 方法。 このパラメーターには、各配列要素間に必要なセパレーターが含まれます。

// Join the elements of an array into a string
let fishString = fish.join(', ');

fishString;
Output
'piranha, barracuda, koi, eel'

上記の例では、 ', ' 空白を使用すると、配列項目が読みやすく分離されます。 引数として指定された空の文字列は、デフォルトのコンマを完全に削除します。

スライス()

The slice() メソッドは、配列の一部を新しい配列にコピーします。

let fish = [ "piranha", "barracuda", "koi", "eel" ];

配列の最後の2つの項目を新しい配列にコピーするとします。 まず、必要な最初の要素のインデックス番号から始めます。 2 為に koi. 最後に必要な要素のインデックス番号followingで終わります。 最後の要素なので、 eel、のインデックス番号があります 3、置く 4.

// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 4);

fishWithShortNames;
Output
[ 'koi', 'eel' ]

この特定のケースでは、 eel は配列の最後の項目であり、2番目の引数は実際には不要です。 slice() 最初のインデックスで開始し、2番目の引数が指定されていない場合は配列の最後で停止します。

// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2);

fishWithShortNames;
Output
[ 'koi', 'eel' ]

slice() ミューテイタメソッドsplice()と混同しないでください。このメソッドは、元の配列にアイテムを追加または削除できます。

の指標()

The indexOf() メソッドは、要素の最初のインスタンスのインデックス番号を返します。

次の例では、次のような文字列があります。 barracuda 2回記載されています。

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

我々は使用するだろう indexOf() 最初のインスタンスを見つけるために。

// Find the first instance of an element
fish.indexOf("barracuda");
Output
1

指定された引数が配列に存在しない値である場合、コンソールは -1.

fish.indexOf("shark");
Output
-1

The indexOf() メソッドは、多くのアイテムを含む配列で特に役立ちます。

lastIndexOf()

The lastIndexOf() メソッドは、要素の最後のインスタンスのインデックス番号を返します。

同じ例でテストできます indexOf()、これには barracuda 2回。

let fish = [ "piranha", "barracuda", "koi", "barracuda" ];

// Find the last instance of an element
fish.lastIndexOf("barracuda");
Output
3

lastIndexOf() 配列を最後から検索し、最初に見つかったインデックス番号を返します。

結論

このチュートリアルでは、JavaScriptの主要な組み込みアクセサー配列メソッドを確認しました。 アクセサメソッドは、元の配列を変更または変更するのではなく、配列の新しいコピーまたは表現を作成します。

配列をエンドツーエンドで結合する配列を連結する方法と、配列をコンマ区切りの文字列に変換する方法を学びました。 また、配列の一部を新しい配列にコピーし、配列内の特定の要素の最初と最後のインデックスを見つける方法も学びました。

配列の基本を確認するには、JavaScriptでの配列についてをお読みください。 すべての配列メソッドの完全なリストを表示するには、Mozilla DeveloperNetwork配列リファレンスを参照してください。