初心者プログラマーからコーディングの専門家まで、あらゆるスキルレベルのWeb開発者が、最新のWebサイト開発におけるJavaScriptの重要性を認識しています。 JavaScriptは、アプリケーションを作成するかどうかを知ることが重要なスキルであるほどの優位性を持っているのです。

JavaScript言語に組み込まれている最も強力なビルディングブロックの1つが配列です。配列は多くのプログラミング言語で一般的に見られ、データを保存するために使用されます。

JavaScriptでは配列を使用しますが、配列メソッドという便利な機能を追加しています。開発者として、スキルアップに役立つ5つの方法をご紹介します。

配列の方法は何ですか？

配列メソッドは、JavaScriptの組み込み関数で、配列に適用することができます。各メソッドには、配列の変更や計算を行うユニークな関数が用意されているので、汎用的な関数を一から書く必要はない。

JavaScriptの配列メソッドは、配列変数に付けられたドット表現を使って実行されます。これらは単なるJavaScriptの関数であるため、常に括弧で終わっており、オプションの引数を保持することができます。ここでは、myArrayという単純な配列に付属するメソッドを紹介します。

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

このコードでは、配列にpopというメソッドを適用します。

配列の例

それぞれの例で、これらのメソッドを実行するために、myArrayを呼び出すサンプル配列を使用しましょう。自由にコンソールを立ち上げて、コードを書きながら進めてください。

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

これらの例は、あなたがJavaScriptとは何か、どのように動作するかの基本を知っていることを前提としています。知らなくても大丈夫。私たちは皆、学び、成長するためにここにいるのです。

それでは、5つの強力な方法をご紹介しましょう。

1Array.push()

内容：push()は、配列を受け取り、配列の末尾に1つ以上の要素を追加し、配列の新しい長さを返します。このメソッドは、既存の配列を変更します。

20を引数としてpush()を実行して、配列に20という数字を追加してみましょう。

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

動作確認をしてみましょう

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

myArrayに対してpush()メソッドを実行し、引数で与えられた値を配列に追加します。この場合、20です。コンソールでmyArrayを確認すると、配列の末尾に値が追加されたことがわかります。

2Array.concat()

concat() は、2 つ以上の配列を結合して新しい配列を作成します。既存の配列は変更せず、新規に作成します。

myArrayを使い、newArrayという配列をマージしてみましょう。

var myArray = [2,4,5,7,9,12,14];var newArray = [1,2,3];var result = myArray.concat(newArray); c***ole.log(result); [2,4,5,7,9,12,14,1,2,3]

この方法は、複数の配列や値を組み合わせる必要がある場合に非常に有効で、変数を使用する場合は非常に単純な1つのステップしか必要としません。

iii. array.join()

その内容は、次のとおりです。join()は、配列を受け取り、カンマで区切られた配列の内容を結合します。結果は、文字列に格納される。カンマの代わりにセパレータを指定することも可能です。

myArrayの使い方を見てみましょう。まず、デリミタ引数なしでデフォルトのメソッドを使用すると、カンマが使用されます。

var 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つ目の例では、（'and'）を使用していますが、ここでは2つのことを知っておく必要があります。

まず、値を区切るのに「and」という言葉を使っています。第二に、"and "の両側にスペースがあること。JavaScriptは引数を文字通りに読むので、このスペースが空くとすべてが詰め込まれてしまい (例えば "2and4and5..." など)、とても読みやすい出力にはなりません!

4Array.foreach()の場合

内容：forEach() (大文字・小文字を区別します！)配列の各項目に対して関数を実行します。この関数は、あなたが作成した任意の関数で、"for "ループを使って配列に関数を適用するのと似ていますが、コードの手間ははるかに少なくて済みます。

forEach()にはまだ何かあるので、構文を見てから、簡単な関数を実行して実証してみましょう。

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

myArrayを使用しており、forEach()はドット表現で適用しています。パラメータブラケット内に使用する関数（例では関数（項目））を配置します。

機能（項目）について説明します。forEach()の内部で実行される関数で、独自の引数を持つ。引数項目を呼び出しています。この議論には、2つのポイントがある。

• forEach()が配列をループするとき、この引数にコードを適用します。この引数は、現在の要素を保持する一時的な変数と考えることができます。
• パラメータの名前を決めれば、どんな名前にもなります。通常、"item "や "element "など、より分かりやすい名前が付けられます。

この2つを念頭に置いて、簡単な例を見てみましょう。各値に15を足して、コンソールに結果を表示させてみましょう。

myArray.forEach(function(item){ c***ole.log(item + 15);});

この例ではitemを変数として使っているので、itemを介して各値に15を足す関数を書き、コンソールに結果を表示します。Google Chromeのコンソールで見ると、こんな感じです。

結果は、配列のすべての数値に15を足したものになります。

5Array.map()の場合

内容：map()は、配列の各要素に対して関数を実行し、その結果を新しい配列に格納します。

各要素に対して関数を実行するのは、forEach()のように聞こえます。ここでの違いは、map()は実行時に新しい配列を作成しますが、forEach()は自動的に新しい配列を作成せず、特定の関数を記述する必要がある点です。

map()を使ってmyArrayの各要素の値を倍にして新しい配列に入れましょう。同じ関数（項目）の構文が表示されるので、さらに練習ができます。

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

コンソールで結果を確認してみましょう。

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

myArrayは変更されない。

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

javascriptの次のステップ

配列はJavaScript言語の強力な部分です。そのため、開発者としての生活を容易にするために非常に多くの組み込みメソッドが用意されています。この5つの方法を使いこなすには、実践することが一番です。

MDNは、JavaScriptを学び続ける上で、詳細なドキュメントを提供してくれる素晴らしいリソースです。あるいは、学ぶべきJavaScriptのフレームワークを紹介します。コンソールに慣れてきたら、プログラマーのための最高のJavaScriptエディタで、あなたのスキルをワンランクアップさせましょう。ハッピーコーディング!