JavaScript配列メソッド

追加・削除

メソッド	意味	どこに追加/削除？	戻り値
push()	後ろに追加	配列の最後	新しい配列の長さ
pop()	後ろを削除	配列の最後	削除された値
unshift()	前に追加	配列の先頭	新しい配列の長さ
shift()	前を削除	配列の先頭	削除された値

forEach

配列の中の要素を1つずつ取り出して、全ての要素に繰り返し同じ処理を行うメソッドです。
引数は2つ受け取ることができます。

• 要素：配列の要素一つ
  ["りんご", "みかん", "バナナ"]という配列の各要素一つずつがこの要素に格納されます。
• インデックス：取り出した要素のインデックス

配列.forEach((要素, インデックス) => {...})

記載例もチェックしておきましょう。

const fruits = ["りんご", "みかん", "バナナ"];

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}番目のフルーツは ${fruit} です`);
});
/*表示結果
1番目のフルーツは りんご です  
2番目のフルーツは みかん です  
3番目のフルーツは バナナ です
*/

find

• 条件式に合う1つ目の要素を配列の中から取り出すメソッドです。
• findメソッドは条件に合う要素が見つかった時に終了するので、条件に合う最初の1つの要素しか取り出せません。
  • なければ undefined を返します。
• 配列の要素がオブジェクトの場合もfindメソッドを使うことができます。

const 結果の値 = 配列.find(function(要素, インデックス, 配列全体) {
  // 条件（true を返したときに見つかったと判断）
});

findメソッドではreturnは必須です。
しかし、コールバック関数が単一の式で記述されているアロー関数（中括弧 {} を含まない）の場合、記載しなくても実質的にはreturnされていることになります。

splice

配列から 要素を削除したり、追加したりできるメソッドです。
削除の場合は、戻り値は配列となります。

配列.splice(開始位置, 削除する数, 追加する要素1, 追加する要素2, ...);

例を見て動きを確認しましょう。

const scores = [70, 90, 80, 85];

scores.splice(2, 0, 77, 88);
// 値追加・削除0[70, 90, 77, 88, 80, 85]

const deleted = scores.splice(3, 1);
// 値削除0[70, 90, 77, 80, 85]
// deletedには削除した値で作成された配列[88]が入る

const deleted2 = scores.splice(2, 2, 30);
// 値削除する・30も追加する[70, 90, 30, 85]
// deleted2には削除した値で作成された配列[ 77, 80 ]が入る

console.log(deleted);
// [ 88 ]

console.log(deleted2);
// [ 77, 80 ]

console.log(scores);
// [ 70, 90, 30, 85 ]

join

配列のすべての要素を、1つの文字列に結合するメソッドです。

• 区切り文字を指定しない場合はカンマ,区切りとなります。
• 区切り文字なしの場合は空文字''を指定します。

配列.join(区切り文字);

例を見て動きを確認しましょう。

const names = ['Taro', 'Jiro', 'Saburo'];

console.log(names.join('|'));
// 表示結果　Taro|Jiro|Saburo

split

文字列を指定した区切り文字で区切って、配列にするメソッドです。

文字列.split(区切り文字);

例を見ていきましょう。
1: 区切り文字で分割する場合

const names = 'Taro|Jiro|Sabro';
console.log(names.split('|'));
// [ 'Taro', 'Jiro', 'Sabro' ]

2: 文字ごとに分割する場合

const name = "さくら";
const chars = name.split("");

console.log(chars); // → ["さ", "く", "ら"]

filter

記述した条件に合う要素のみを取り出して、新しい配列を作成するメソッドです。
findメソッドと同様に、配列の要素がオブジェクトの場合もfilterメソッドを使うことができます。

const fruits = ["りんご", "バナナ", "もも", "ぶどう"];

const filtered = fruits.filter(fruit => fruit.length === 3);

console.log(filtered); 
// → ["りんご", "もも", "ぶどう"]

map

配列内のすべての要素に処理を行い、その戻り値から新しい配列を作成するメソッドです。
mapメソッドもこれまでのメソッドと同様に、配列のオブジェクト要素に対しても使うことができます。

// 数字を2倍にする例
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);

console.log(doubled);
// → [2, 4, 6, 8, 10]

map は「元の配列の数だけ」処理をします。
そして、必ず新しい配列を作成します。