追加・削除
| メソッド | 意味 | どこに追加/削除？ | 戻り値 |
|---|---|---|---|
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 は「元の配列の数だけ」処理をします。
そして、必ず新しい配列を作成します。