こんにちは。
野中やすおです。
今回の記事では、JavaScriptにおいてオブジェクトの配列を扱うときに役立つ便利な配列メソッドの紹介をしていきます。
mapメソッド
mapメソッドは、配列の各要素に対して与えられた関数を適用し、新しい配列を作成します。
オブジェクト配列に対してmapメソッドを使用すると、各オブジェクトを変換または変更することができます。
例えば、「配列内のオブジェクトの特定のプロパティの値を抽出する」場合に便利です。
|
1 2 3 4 5 6 7 8 9 |
const Profile = [ { id: 1, name: 'Yasuo', hobby: 'shogi' }, { id: 2, name: 'Shingi', hobby: 'ski' }, ]; const hobbies = Profile.map(object => object.hobby); console.log(hobbies); // ['shogi', 'ski'] |
上記の例では、Profileというオブジェクト配列からmapメソッドによってProfile配列の各要素に与えられた関数を適用し、新しい配列を作成しています。
hobbiesの結果は、 [‘shogi’, ‘ski’] という配列になります。
map() は Array インスタンスのメソッドで、与えられた関数を配列のすべての要素に対して呼び出し、その結果からな…
filterメソッド
filterメソッドは、与えられた関数の条件を満たす全ての要素からなる新しい配列を作成します。全ての要素っていうのが肝ですね。
オブジェクトの配列に対してfilterメソッドを使用すると、特定の条件に基づいてオブジェクトを抽出できます。
例えば、特定のプロパティの値がある範囲にあるオブジェクトを抽出することができます。
|
1 2 3 4 5 |
const Profile = [ { id: 1, name: 'Yasuo', hobby: 'shogi' }, { id: 2, name: 'Shingi', hobby: 'ski' }, ]; const hobbies = Profile.filter(object => object.hobby === 'shogi'); console.log(hobbies); // [{ id: 1, name: "Yasuo", hobby: "shogi" }] |
上記の例では、Profileというオブジェクト配列からfileterメソッドによってProfile配列の要素から与えられた条件を満たすものだけを抽出して新しい配列を作成しています。Profile.filter() メソッドの結果は、新しい配列としてhobbiesに代入されています。
hobbiesの結果は、 [{ id: 1, name: “Yasuo”, hobby: “shogi” }] というオブジェクトの配列となります。
filter() は Array インスタンスのメソッドで、指定された配列の中から指定された関数で実装されているテストに…
findメソッド
findメソッドは、与えられた関数の条件を満たす最初の要素を返します。
オブジェクト配列に対してfindメソッドを使用すると、条件に一致する最初のオブジェクトを取得することできます。
例えば、特定のプロパティの値に基づいてオブジェクトを検索する場合に使用できます。
|
1 2 3 4 5 |
const Profile = [ { id: 1, name: 'Yasuo', hobby: 'shogi' }, { id: 2, name: 'Shingi', hobby: 'ski' }, ]; const hobbies = Profile.find(object => object.id === 2); console.log(hobbies); // { id: 2, name: "Shingi", hobby: "ski" } |
上記の例では、Profileというオブジェクト配列からfindメソッドによってProfile配列の要素から与えられた条件を満たす最初の要素を返しています。Profile.find() メソッドの結果は、与えられた条件を満たす最初のオブジェクトとなります。
hobbiesの結果は、{ id: 2, name: “Shingi”, hobby: “ski” } というオブジェクトとなります。
find() は Array インスタンスのメソッドで、提供されたテスト関数を満たす配列内の最初の要素を返します。 …
findIndexメソッド
findIndexメソッドは、与えられた条件を満たす最初の要素のインデックスを返します。
配列内の要素を順番に調べていき、最初に条件を満たす要素が見つかった場合、その要素のインデックスが返されます。
条件を満たす要素が見つからなかった場合は、-1が返されます。
|
1 2 3 4 5 6 7 8 9 |
const Profile = [ { id: 1, name: 'Yasuo', hobby: 'shogi' }, { id: 2, name: 'Shingi', hobby: 'ski' }, ]; const hobbies_true = Profile.findIndex(object => object.id === 2); console.log(hobbies_true); // 1 const hobbies_false = Profile.findIndex(object => object.id === 3); console.log(hobbies_false); // -1 |
上記の最初の例では、アロー関数 object => object.id === 2 を使用して、Profile配列内の各要素のidプロパティが2と等しいかどうかをチェックしています。上記の例では、id が 2 と等しい要素はProfile 配列のインデックス 1 の要素であるため、結果として1が返されます。
2番目の例では、アロー関数 object => object.id === 3 を使用して、Profile 配列内の各要素の idプロパティが3と等しいかどうかをチェックしています。 id が 3 と等しい要素は見つからないため、findIndex() メソッドは -1 を返しています。
findIndex() は Array インスタンスのメソッドで、配列内の指定されたテスト関数に合格する最初の要素のイン…
sortメソッド
sortメソッドは、配列の要素をソートします。
オブジェクト配列に対してsortメソッドを使用すると、特定のプロパティの値に基づいてオブジェクトをソートできます。
例えば、数値のプロパティに基づいてオブジェクトを昇順または降順にソートする場合に便利です。
|
1 2 3 4 5 6 7 8 9 |
const Profile = [ { id: 1, name: 'Yasuo', hobby: 'shogi' }, { id: 2, name: 'Shingi', hobby: 'ski' },{ id: 3, name: 'Aki', hobby: 'game' } ]; Profile.sort((a, b) => { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; }); console.log(Profile); // [{ id: 3, name: "Aki", hobby: "game" }, Object { id: 2, name: "Shingi", hobby: "ski" }, Object { id: 1, name: "Yasuo", hobby: "shogi" }] |
上記の例では、Profileというオブジェクト配列からsortメソッドによってソート関数内の条件式は、a.name と b.name を比較してソート順を決定しています。
if (a.name < b.name) return -1; は、a.name が b.name よりも小さい場合 には、-1 を返して a を b よりも前にソートします。if (a.name > b.name) return 1; は、a.name が b.name よりも大きい場合、1 を返して a を b よりも後ろにソートします。 return 0; は、a.name と b.name が等しい場合、ソート順に変更を加えずにそのままの順序を保持します。
結果的に各オブジェクトの順序が並び変わります。
Profile.sort() メソッドは、ソート結果を元の Profile配列に上書きします。
hobbiesの結果は、[{ id: 3, name: “Aki”, hobby: “game” }, Object { id: 2, name: “Shingi”, hobby: “ski” }, Object { id: 1, name: “Yasuo”, hobby: “shogi” }] というオブジェクトの配列となります。
sort() は Array のメソッドで、配列の要素をその場 (in-place) でソートし、ソートされた同じ配列の…
reduceメソッド
reduceメソッドは、配列の各要素に対して与えられた関数を適用し、単一の値にまとめます。
|
1 2 3 4 5 |
const Profile = [ { id: 1, name: 'Yasuo', quantity: 5}, { id: 2, name: 'Shingi', quantity: 6}, ]; const counts = Profile.reduce((sum, object) => sum + object.quantity, 0); console.log(counts); // 11 |
上記の例では、Profileというオブジェクト配列からreduceメソッドによってProfile配列の要素から与えられた条件を満たす最初の要素を返しています。reduceメソッドのアロー関数の引数であるsumは、reduce関数によって累積される値を表しています。初期値として 0 が指定されています。
Profile.reduce() メソッドの結果は累積された値となります。countsには Profile 配列内のオブジェクトの quantity プロパティの値が合計された結果である11が格納されています。
ということでcountsの結果は、11 という数値となります。
reduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」…
最後に
以上、今回の記事では、JavaScriptにおいてオブジェクトの配列を扱うときに役立つ便利な配列メソッドの紹介をしました。ここで紹介したメソッドは、JavaScriptを使ってフロントエンドで開発する際には必須のメソッドばかりなのでぜひ活用できるようしていきましょう！
