JavaScriptで配列メソッドを使用する方法：アクセサメソッド

序章

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

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

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

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

concat（）

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

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

加入（）

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'

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

スライス（）

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

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

配列の最後の2つの項目を新しい配列にコピーするとします。最初に必要な要素のインデックス番号から始めます。これは、koiの場合は2です。最後に必要な要素のインデックス番号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（）と混同しないでください。

の指標（）

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

次の例では、barracudaが2回リストされている文字列があります。

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

indexOf()を使用して最初のインスタンスを検索します。

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

Output1

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

fish.indexOf("shark");

Output-1

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

lastIndexOf（）

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

indexOf()からの同じ例でテストできます。これには、barracudaが2回含まれています。

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

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

Output3

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

結論

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

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

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