今日習得すべき15のJavaScript配列メソッド

今日習得すべき15のJavaScript配列メソッド

ルーキープログラマーからコーディングの専門家まで、あらゆるスキルレベルのWeb開発者は、最新のWebサイトの開発におけるJavaScriptの重要性を理解するようになります。 JavaScriptは非常に支配的であるため、Webアプリを作成するかどうかを知ることは不可欠なスキルです。





JavaScript言語に組み込まれている最も強力な構成要素の1つは、配列です。配列は多くのプログラミング言語で一般的に見られ、データを格納するのに役立ちます。



JavaScriptには、配列メソッドと呼ばれる便利な機能も含まれています。開発者としてのスキルを伸ばすために、よく見ておくべき15のことをここに示します。





配列メソッドとは何ですか？

配列メソッド 配列に適用できるJavaScriptに組み込まれた関数です。各メソッドには、配列の変更または計算を実行する固有の関数があり、一般的な関数を最初からコーディングする必要がありません。

JavaScriptの配列メソッドは、配列変数に付加されたドット表記を使用して実行されます。これらは単なるJavaScript関数であるため、オプションの引数を保持できる括弧で常に終了します。これは、という単純な配列にアタッチされたメソッドです。 myArray 。



let myArray = [1,2,3]; myArray.pop();

このコードは、と呼ばれるメソッドを適用します ポップ アレイに。

配列の例

各例では、これから呼び出すサンプル配列を使用します myArray 、でメソッドを実行します。コンソールとコードを自由に引き上げてください。



let myArray = [2,4,5,7,9,12,14];

これらの例は、あなたがの基礎を知っていることを前提としています JavaScriptとは何かとその仕組み 。そうでなければ、私たちは皆、学び成長するためにここにいます。

これらの15の強力な配列メソッドを掘り下げてください！



1. Array.push（）

内容： 押す（） 配列を取得し、配列の最後に1つ以上の要素を追加してから、配列の新しい長さを返します。このメソッドは、既存の配列を変更します。

を実行して、配列に数値20を追加します。 押す（） 、引数として20を使用します。

let myArray = [2,4,5,7,9,12,14];
myArray.push(20);

それが機能したかどうかを確認します。

console.log(myArray); [2,4,5,7,9,12,14,20]

の実行 押す（） myArrayのメソッドは、引数で指定された値を配列に追加しました。この場合、20です。コンソールでmyArrayをチェックすると、値が配列の最後に追加されていることがわかります。

2. Array.concat（）

内容： concat（） 2つ以上のアレイを新しいアレイにマージできます。既存のアレイを変更するのではなく、新しいアレイを作成します。

取る myArray と呼ばれる配列をマージします newArray それに。

let myArray = [2,4,5,7,9,12,14];
let newArray = [1,2,3];
let result = myArray.concat(newArray); console.log(result); [2,4,5,7,9,12,14,1,2,3]

この方法は、結合する必要のある複数の配列または値を処理するときに、変数を使用するときにすべて1つの非常に簡単なステップで不思議に機能します。

3. Array.join（）

内容： 加入（） 配列を受け取り、配列の内容をコンマで区切って連結します。結果は文字列に配置されます。カンマの代わりに使用する場合は、区切り文字を指定できます。

myArrayを使用してこれがどのように機能するかを見てください。最初に、区切り引数のないデフォルトのメソッドを使用します。これはコンマを使用します。

let myArray = [2,4,5,7,9,12,14];
myArray.join(); '2,4,5,7,9,12,14'

JavaScriptは文字列を出力し、配列内の各値はコンマで区切られます。関数で引数を使用して、区切り文字を変更できます。単一のスペースと文字列の2つの引数でそれを観察します。

myArray.join(' ');
'2 4 5 7 9 12 14' myArray.join(' and ');
'2 and 4 and 5 and 7 and 9 and 12 and 14'

最初の例はスペースで、読みやすい文字列を作成します。

2番目の例では （' と '） 、ここで知っておくべきことが2つあります。

まず、「」と「」という単語を使用して値を区切ります。次に、「」と「」という単語の両側にスペースがあります。これは、使用するときに覚えておくべき重要なことです 加入（） 。 JavaScriptは引数を文字通り読み取ります。したがって、このスペースを省略すると、すべてが一緒に圧縮されます（つまり、「2and4and5 ...」など）。あまり読みにくい出力です。

4. Array.forEach（）

内容： forEach（） （大文字と小文字を区別します！）配列内の各項目に対して関数を実行します。この関数は、「for」ループを使用して関数を配列に適用するのと同様に作成する関数ですが、コーディングの作業がはるかに少なくて済みます。

にもう少しあります forEach（） ;構文を見てから、簡単な関数を実行してデモンストレーションします。


myArray.forEach(function(item){
//code
});

使用しています myArray 、 forEach（） ドット表記で適用されます。使用する関数を引数の括弧内に配置します。 関数（アイテム） 例では。

を見てみましょう 関数（アイテム） 。これはforEach（）内で実行される関数であり、独自の引数があります。私たちは議論を呼んでいます アイテム 。この議論について知っておくべきことが2つあります。

  • forEach（）が配列をループすると、この引数にコードが適用されます。現在の要素を保持する一時変数と考えてください。
  • 引数の名前を選択します。任意の名前を付けることができます。通常、これは「item」や「element」など、理解しやすい名前になります。

これら2つのことを念頭に置いて、この簡単な例を確認してください。すべての値に15を追加し、コンソールに結果を表示させます。


myArray.forEach(function(item){
console.log(item + 15);
});

使用しています アイテム この例では変数として使用されているため、関数は次の方法で各値に15を加算するように記述されています。 アイテム 。次に、コンソールは結果を出力します。 GoogleChromeコンソールでの表示は次のとおりです。

結果は配列内のすべての数値ですが、15が追加されています！

5. Array.map（）

内容： 地図（） 配列内のすべての要素に対して関数を実行し、結果を新しい配列に配置します。

すべての要素で関数を実行すると、forEach（）のように聞こえます。ここでの違いは 地図（） 実行時に新しい配列を作成します。 forEach（）は新しい配列を自動的に作成しません。そのためには、特定の関数をコーディングする必要があります。

map（）を使用して、myArray内のすべての要素の値を2倍にし、それらを新しい配列に配置します。あなたは同じを見るでしょう 関数（アイテム） もう少し練習するための構文。

let myArray = [2,4,5,7,9,12,14]; let doubleArray = myArray.map(function(item){
return item * 2;
});

コンソールで結果を確認してください。

console.log(doubleArray); [4,8,10,14,18,24,28]

myArray 変更されていません：

console.log(myArray); [2,4,5,7,9,12,14]

6. Array.unshift（）

機能：push（）メソッドの動作と同様に、 unshift（） メソッドは配列を受け取り、配列の終わりではなく最初に1つ以上の要素を追加し、配列の新しい長さを返します。このメソッドは、既存の配列を変更します。

let myArray = [2,4,5,7,9,12,14];
myArray.unshift(0);

アレイをコンソールに記録すると、アレイの先頭に数字の0が表示されます。

console.log(myArray); [0, 2,4,5,7,9,12,14]

7. Array.sort（）

機能：並べ替えは、配列に対して実行される最も一般的な操作の1つであり、非常に便利です。 JavaScriptの 選別（） arrayメソッドを使用すると、1行のコードで数値の配列や文字列を並べ替えることができます。この操作は実行され、初期配列を変更することによってソートされた配列を返します。のための異なる番号のセットを取る myArray この時。

let myArray = [12, 55, 34, 65, 10];
myArray.sort((a,b) => a - b);

並べ替えは適切に行われるため、並べ替えられた配列に対して個別の変数を宣言する必要はありません。

console.log(myArray); [10, 12, 34, 55, 65]

デフォルトでは、配列は昇順で並べ替えられますが、オプションでカスタム関数をに渡すことができます 選別（） 配列を希望の方法でソートするメソッド。この場合、私はカスタムを渡しました 矢印機能 配列を昇順で数値的にソートします。

8. Array.reverse（）

内容：名前が示すように、 逆行する（） メソッドは、配列内の要素の順序を逆にするために使用されます。これは配列の内容を逆にするのではなく、順序自体を逆にするだけであることに注意してください。この方法をよりよく理解するための例を次に示します。

let myArray = [2,4,5,7,9,12,14];
myArray.reverse()

出力をコンソールに記録して、動作を確認します。

console.log(myArray); [14, 12, 9, 7, 5, 4, 2]

ご覧のとおり、要素の順序が逆になっています。以前は、最後のインデックスの要素（インデックス6の要素14）は、0番目のインデックスの要素になりました。

9. Array.slice（）

内容： スライス（） 配列の一部の浅いコピーを取得するために使用されます。簡単に言うと、このメソッドを使用すると、配列から特定の要素をインデックスで選択できます。取得する要素と要素の開始インデックス、およびオプションで終了インデックスを渡すこともできます。

終了インデックスを指定しない場合、開始インデックスから配列の最後までのすべての要素が取得されます。このメソッドは新しい配列を返し、既存の配列を変更しません。

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(2);

上記のコードでは、終了インデックスパラメータが渡されていないため、2番目のインデックスから最後のインデックスまでのすべての要素が取得されます。両方のアレイをコンソールに記録します。

console.log(myArray);
console.log(slicedArray); [2, 4, 5, 7, 9, 12, 14]
[5, 7, 9, 12, 14]

明らかに、最初の配列はslice（）メソッドによって変更されず、代わりに、に格納されている新しい配列を返します。 スライスされた配列 変数。これは、終了インデックスパラメータもに渡される例です。 スライス（） 方法。

let myArray = [2,4,5,7,9,12,14];
let slicedArray = myArray.slice(1, 3);
console.log(slicedArray); [4, 5]

10. Array.splice（）

内容： スプライス（） は、配列内の要素を所定の位置で削除または置換するために使用される便利な配列メソッドです。削除する要素のインデックスと数を指定することにより、配列を変更します。

let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3);
console.log(myArray);

上記の例では、 myArray 配列はインデックス2からスプライスされ、3つの要素がインデックスから削除されます。アレイは次のもので構成されます。

[2, 4, 12, 14]

要素を削除するだけでなく、要素を置き換えるには、次のように、置換する要素に任意の数のオプションのパラメーターを渡すことができます。

あなたの情熱テストを見つける方法
let myArray = [2,4,5,7,9,12,14];
myArray.splice(2, 3, 1, 2, 3);
console.log(myArray); [2, 4, 1, 2, 3, 12, 14]

11. Array.filter（）

内容： フィルター（） methodは、テストを含む関数を受け取り、そのテストに合格したすべての要素を含む新しい配列を返す便利な配列メソッドです。その名の通り、このメソッドは、必要な要素を他の要素からフィルタリングするために使用されます。フィルタリングは、ブール値を返す関数を使用して行われます。

これがの例です フィルター（） 2で割り切れる配列から要素のみを取得するために使用されるメソッド。

let myArray = [2,4,5,7,9,12,14];
let divisibleByTwo = myArray.filter((number) => number % 2 === 0);
console.log(divisibleByTwo);

上記の例では、矢印関数がパラメーターとして渡されます。このパラメーターは、元の配列から各数値を取得し、モジュロ（（ ％ ） と 平等 （（ === ）演算子。出力は次のようになります。

[2, 4, 12, 14]

12. Array.reduce（）

内容： 減らす（） は、reducer関数を受け取り、それを各配列要素で実行して、戻り時に単一の値を出力する配列メソッドです。アキュムレータ変数と現在の要素変数を必要なパラメータとして持つレデューサー関数を取ります。アキュムレータの値はすべての反復にわたって記憶され、最終的には最後の反復後に返されます。

この方法の一般的な使用例は、配列内のすべての要素の合計を計算することです。この機能の実装は次のとおりです。

let myArray = [2,4,5,7,9,12,14];
let sumOfNums = myArray.reduce((sum, currentNum) => sum + currentNum, 0);

上記の例では、アキュムレータ変数の初期値として使用される2番目のパラメータとして0が渡されます。 NS sumOfNums 変数には、の戻り値が含まれます 減らす（） 配列内のすべての要素の合計であることが期待されるメソッド。

console.log(sumOfNums); 53

13. Array.includes（）

機能：配列内の要素を検索して存在するかどうかを確認することは非常に頻繁に使用される操作であるため、JavaScriptには次の形式でこのための組み込みメソッドがあります。 include（） 配列メソッド。使用方法は次のとおりです。

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.includes(4));
console.log(myArray.includes(2, 1));
console.log(myArray.includes(12, 2));
console.log(myArray.includes(18));

このメソッドは、必須パラメーター、検索する要素、およびオプションのパラメーター、検索を開始する配列インデックスを取ります。その要素が存在するかどうかに応じて、それは戻ります NS また NS それぞれ。したがって、出力は次のようになります。

true
false
true
false

14. Array.indexOf（）

内容： の指標（） メソッドは、指定された要素の最初の出現が配列内で見つかるインデックスを見つけるために使用されます。 include（）メソッドに似ていますが、このメソッドは数値インデックスを返します。要素が配列に存在しない場合は-1を返します。

let myArray = [2,4,5,7,9,12,14];
console.log(myArray.indexOf(4));
console.log(myArray.indexOf('4'));
console.log(myArray.indexOf(9, 2));

の指標（） メソッドは厳密な等式を使用して要素が存在するかどうかをチェックします。つまり、値とデータ型は同じである必要があります。オプションの2番目のパラメーターは、検索を開始するためのインデックスを取得します。これらの基準に基づくと、出力は次のようになります。

1
-1
4

15. Array.fill（）

機能：多くの場合、配列内のすべての値を0などの静的な値に設定する必要があります。ループを使用する代わりに、 塗りつぶし（） 同じ目的のための方法。このメソッドは、1つの必須パラメーター（配列を埋める値）と2つのオプションパラメーター（間に埋める開始インデックスと終了インデックス）を持つ配列で呼び出すことができます。このメソッドは、既存の配列を変更します。

let myArray = [2,4,5,7,9,12,14];
let array1 = myArray.fill(0);
myArray = [2,4,5,7,9,12,14];
let array2 = myArray.fill(0, 2);
myArray = [2,4,5,7,9,12,14];
let array3 = myArray.fill(0, 1, 3);

出力をコンソールに記録すると、次のように表示されます。

console.log(array1);
console.log(array2);
console.log(array3); [0, 0, 0, 0, 0, 0, 0]
[2, 4, 0, 0, 0, 0, 0]
[2, 0, 0, 7, 9, 12, 14]

JavaScriptジャーニーの次のステップ

配列はJavaScript言語の強力な部分です。そのため、開発者としての生活を楽にするために多くのメソッドが組み込まれています。これらの15の方法を習得する最良の方法は、練習することです。

JavaScriptを学び続けると、 MDNは素晴らしいリソースです 詳細なドキュメントについては。コンソールで快適になり、プログラマー向けの最高のJavaScriptエディターでスキルを一段と高めましょう。 JavaScriptを使用してWebサイトを構築する準備はできましたか？検討できるいくつかのフレームワークを見てみませんか。

共有 共有 つぶやき Eメール 学習する価値のある6つのJavaScriptフレームワーク

開発を支援するJavaScriptフレームワークはたくさんあります。ここにあなたが知っておくべきいくつかがあります。

次を読む 関連トピック
  • プログラミング
  • JavaScript
  • コーディングのヒント
著者について Nitin Ranganath（31の記事が公開されました）

Nitinは、熱心なソフトウェア開発者であり、JavaScriptテクノロジーを使用してWebアプリケーションを開発するコンピューターエンジニアリングの学生です。彼はフリーランスのWeb開発者として働いており、自由な時間にLinuxとプログラミングのために書くのが好きです。

NitinRanganathのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください