1. はじめに
ドットインストールの
JavaScript入門 データ構造応用編 を学習したので内容を整理しました。
この記事では 配列の操作に関するメソッド をまとめています。
今回整理するメソッドは次の5つです。
- splice()
- join()
- split()
- map()
- filter()
JavaScriptで配列を扱うときによく使われるメソッドのようなので、
出力結果を確認しながら理解を整理していきたいと思います。
2. splice()
splice() は 配列の要素を削除したり追加したりできるメソッド です。
今回は削除の例を確認します。
const nums = [10, 20, 30, 40];
nums.splice(1, 2);
console.log(nums);
出力
[10, 40]
解説
splice(1, 2) は次のような意味になります。
| 値 | 意味 |
|---|---|
| 1 | 削除を開始する位置 |
| 2 | 削除する要素数 |
元の配列は次のようになっています。
[10, 20, 30, 40]
splice(1,2) を実行すると、
20
30
の 2つの要素が削除されます。
その結果、配列は
[10, 40]
になります。
splice() は 元の配列を直接変更するメソッド のようなので、
配列の状態が変わる点にも注意が必要だと理解しました。
3. join()
join() は 配列を文字列に変換するメソッド です。
const words = ["red", "blue", "green"];
const result = words.join(",");
console.log(result);
出力
red,blue,green
解説
join(",") は
「,」で要素をつないで1つの文字列にする
という意味になります。
元の配列
["red","blue","green"]
が
"red,blue,green"
という 1つの文字列 に変換されます。
配列のデータを 表示用の文字列に変換したいとき に使われることが多いようです。
4. split()
split() は 文字列を配列に変換するメソッド です。
const text = "red,blue,green";
const result = text.split(",");
console.log(result);
出力
["red", "blue", "green"]
解説
split(",") は
「,」で区切って配列にする
という意味になります。
元の文字列
"red,blue,green"
が
["red","blue","green"]
という配列になります。
join() と split() は 逆の役割を持つメソッド のように理解しました。
| メソッド | 役割 |
|---|---|
| join() | 配列 → 文字列 |
| split() | 文字列 → 配列 |
5. map()
map() は 配列の要素を加工して新しい配列を作るメソッド です。
const nums = [1, 2, 3];
const result = nums.map(n => n * 2);
console.log(result);
出力
[2, 4, 6]
解説
元の配列
[1,2,3]
のそれぞれの要素に対して
n * 2
という処理を行っています。
処理の流れは次のようになります。
1 → 2
2 → 4
3 → 6
この結果をまとめて
[2,4,6]
という 新しい配列 が作られます。
ここでのポイントは
元の配列 nums は変更されない
という点です。
map() は 配列を加工した新しいデータを作りたいとき によく使われるメソッドのようです。
6. filter()
filter() は 条件に合う要素だけを取り出すメソッド です。
const nums = [1, 2, 3, 4];
const result = nums.filter(n => n % 2 === 0);
console.log(result);
出力
[2, 4]
解説
条件は次の部分です。
n % 2 === 0
これは
2で割った余りが0
という意味になります。
つまり 偶数を取り出す条件 になっています。
それぞれの判定は次のようになります。
1 → false
2 → true
3 → false
4 → true
filter() は 条件が true になった要素だけを残す メソッドです。
そのため結果は
[2,4]
という配列になります。
filter() も map() と同じように 新しい配列を作るメソッド のようです。
7. まとめ
今回整理した配列メソッドは次の5つです。
| メソッド | 役割 |
|---|---|
| splice() | 配列の要素を削除・追加 |
| join() | 配列を文字列に変換 |
| split() | 文字列を配列に変換 |
| map() | 配列を加工して新しい配列を作る |
| filter() | 条件に合う要素を取り出す |
配列操作はJavaScriptでよく使われる処理のようなので、
今回整理したメソッドは実際にコードを書きながら少しずつ慣れていきたいと思います。