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

前書き

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

このチュートリアルを最大限に活用するには、配列の作成、インデックス付け、変更、およびループ処理にある程度精通している必要があります。これについては、チュートリアルhttps://www.digitalocean.com/community/tutorials/understandingで確認できます。 -arrays-in-javascript [JavaScriptの配列について]。

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

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()

`+ 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()+`はhttps://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methods#splice()[と混同しないでくださいミューテーターメソッド `+ 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()+`メソッドは、要素の最後のインスタンスのインデックス番号を返します。

`+ barracuda `を2回含む ` indexOf()+`の同じ例でテストできます。

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

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

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

結論

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

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

配列の基本を確認するには、https://www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript [JavaScriptの配列について]をお読みください。 すべての配列メソッドの完全なリストを表示するには、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array [Mozilla Developer Networkの配列リファレンス]を参照してください。