配列操作でよく使うメソッドまとめ01
仕事で配列を扱うことが多くなったので配列の操作方法をまとめました。
現場ではAPIで取得したデータをフロント側で扱いやすいようにJSONにパースしたり加工することが多いと思うので、今回は基本的な計算処理についてまとめます。
今回は実際にNBAの複数のチーム全体の平均年齢を算出、各チームの平均年齢を算出の2点を実際に行います。
ページ下部に今回使っているJSONデータを載せておきます。
JSONをインポートさせて実際にソース書いていきます。
import data from '../EasternConference.json'
複数のチーム全体の平均年齢を算出
let ageArry = data.map((v) => v["menbers"]).reduce((a, b) => a.concat(b), []) let result = Math.round(ageArry.map((v) => v["age"]).reduce((a,b) => a + b, 0) / ageArry.length) return result // 26
まずmapでmenberのみの配列を作って（二次元配列になるので注意）、扱いやすいようにreduceで二次元配列を一次元配列に戻します。
一次元配列に戻した配列を今度はageのみの配列にして、reduceで足しあげて平均を出せば完了です。
各チームの平均年齢を算出
let ageArry = data.map(v => v["menbers"])
let perAgeArry = []
for(let i = 0; i < ageArry.length; i++ ) {
perAgeArry.push({...data[i], "ageAverage": Math.round(ageArry[i].map(v => v["age"]).reduce((a, b) => a + b, 0) / ageArry[i].length)})
}
return perAgeArry // // 元のJSONに"ageAverage": n を追加した配列
全体の平均を求めるときと違うのは、スプレッド構文を使って元のJSONデータに「チームごとの平均年齢」を追加していることです。
そのために新しい配列をひとつ準備しておき、for文で回す際にその配列にチームの平均年齢をpushしていきます。
最後にその配列を返せば完了です。
一番下にJSON載せておきます。（今回これを用意するのに一番時間かかりました...国コードも載せてあるので出身地ごとに割合出したりとか後でやれたらと思います）
参考資料
Array.prototype.map()
Array.prototype.reduce()
[
{
"id": 1,
"team": "Boston Celtics",
"menbers": [
{
"name": "Kadeem Allen",
"age": 25,
"from": "US"
},
{
"name": "Aron Baynes",
"age": 32,
"from": "AU"
},
{
"name": "Jabari Bird",
"age": 24,
"from": "US"
},
{
"name": "Jaylen Brown",
"age": 22,
"from": "US"
},
{
"name": "Jonathan Gibson",
"age": 31,
"from": "US"
},
{
"name": "Gordon Hayward",
"age": 28,
"from": "US"
},
{
"name": "Al Horford",
"age": 32,
"from": "DM"
},
{
"name": "Kyrie Irving",
"age": 26,
"from": "US"
},
{
"name": "Shane Larkin",
"age": 26,
"from": "US"
},
{
"name": "Marcus Morris",
"age": 29,
"from": "US"
},
{
"name": "Semi Ojeleye",
"age": 24,
"from": "US"
},
{
"name": "Terry Rozier",
"age": 24,
"from": "US"
},
{
"name": "Xavier Silas",
"age": 30,
"from": "US"
},
{
"name": "Marcus Smart",
"age": 24,
"from": "US"
},
{
"name": "Jayson Tatum",
"age": 20,
"from": "US"
},
{
"name": "Daniel Theis",
"age": 26,
"from": "DE"
},
{
"name": "Guerschon Yabusele",
"age": 23,
"from": "FR"
}
]
},
{
"id": 2,
"team": "Brooklyn Nets",
"menbers": [
{
"name": "Quincy Acy",
"age": 28,
"from": "US"
},
{
"name": "Jarrett Allen",
"age": 20,
"from": "US"
},
{
"name": "DeMarre Carroll",
"age": 32,
"from": "US"
},
{
"name": "Allen Crabbe",
"age": 26,
"from": "US"
},
{
"name": "Spencer Dinwiddie",
"age": 25,
"from": "US"
},
{
"name": "Milton Doyle",
"age": 25,
"from": "GH"
},
{
"name": "Jared Dudley",
"age": 33,
"from": "US"
},
{
"name": "Kenneth Faried",
"age": 29,
"from": "US"
},
{
"name": "Joe Harris",
"age": 27,
"from": "US"
},
{
"name": "Rondae Hollis-Jefferson",
"age": 23,
"from": "US"
},
{
"name": "Caris LeVert",
"age": 24,
"from": "US"
},
{
"name": "Timofey Mozgov",
"age": 32,
"from": "RU"
},
{
"name": "Jahlil Okafor",
"age": 23,
"from": "US"
},
{
"name": "D'Angelo Russell",
"age": 22,
"from": "US"
},
{
"name": "Nik Stauskas",
"age": 25,
"from": "CA"
},
{
"name": "James Webb III",
"age": 25,
"from": "US"
},
{
"name": "Isaiah Whitehead",
"age": 23,
"from": "US"
}
]
},
{
"id": 3,
"team": "New York Knicks",
"menbers": [
{
"name": "Ron Baker",
"age": 25,
"from": "US"
},
{
"name": "Trey Burke",
"age": 26,
"from": "US"
},
{
"name": "Damyean Dotson",
"age": 24,
"from": "US"
},
{
"name": "Tim Hardaway, Jr.",
"age": 26,
"from": "US"
},
{
"name": "Isaiah Hicks",
"age": 24,
"from": "US"
},
{
"name": "Jarrett Jack",
"age": 35,
"from": "US"
},
{
"name": "Enes Kanter",
"age": 26,
"from": "TR"
},
{
"name": "Luke Kornet",
"age": 23,
"from": "US"
},
{
"name": "Courtney Lee",
"age": 33,
"from": "US"
},
{
"name": "Emmanuel Mudiay",
"age": 22,
"from": "CD"
},
{
"name": "Frank Ntilikina",
"age": 20,
"from": "FR"
},
{
"name": "Kyle O'Quinn",
"age": 28,
"from": "US"
},
{
"name": "Kristaps Porziņģis",
"age": 23,
"from": "LV"
},
{
"name": "D'Angelo Russell",
"age": 22,
"from": "US"
},
{
"name": "Lance Thomas",
"age": 30,
"from": "US"
},
{
"name": "Noah Vonleh",
"age": 23,
"from": "US"
},
{
"name": "Troy Willams",
"age": 24,
"from": "US"
}
]
},
{
"id": 4,
"team": "Philadelphia 76ers",
"menbers": [
{
"name": "Jimmy Butler",
"age": 29,
"from": "US"
},
{
"name": "Wilson Chandler",
"age": 31,
"from": "US"
},
{
"name": "Joel Embiid",
"age": 24,
"from": "CM"
},
{
"name": "Markelle Fultz",
"age": 20,
"from": "US"
},
{
"name": "Amir Johnson",
"age": 31,
"from": "US"
},
{
"name": "Furkan Korkmaz",
"age": 21,
"from": "TR"
},
{
"name": "Mike Muscala",
"age": 27,
"from": "US"
},
{
"name": "T. J. McConnell",
"age": 26,
"from": "US"
},
{
"name": "Justin Patton",
"age": 21,
"from": "US"
},
{
"name": "Jacob Pullen",
"age": 29,
"from": "US"
},
{
"name": "J. J. Redick",
"age": 34,
"from": "US"
},
{
"name": "Ben Simmons",
"age": 22,
"from": "AU"
}
]
},
{
"id": 5,
"team": "Toronto Raptors",
"menbers": [
{
"name": "OG Anunoby",
"age": 21,
"from": "GB"
},
{
"name": "Lorenzo Brown",
"age": 28,
"from": "US"
},
{
"name": "Danny Green",
"age": 31,
"from": "US"
},
{
"name": "Serge Ibaka",
"age": 29,
"from": "ES"
},
{
"name": "Kawhi Leonard",
"age": 27,
"from": "US"
},
{
"name": "Kyle Lowry",
"age": 32,
"from": "US"
},
{
"name": "Alfonzo McKinnie",
"age": 26,
"from": "US"
},
{
"name": "C. J. Miles",
"age": 31,
"from": "US"
},
{
"name": "Malcolm Miller",
"age": 25,
"from": "US"
},
{
"name": "Greg Monroe",
"age": 28,
"from": "US"
},
{
"name": "Norman Powell",
"age": 25,
"from": "US"
},
{
"name": "Malachi Richardson",
"age": 22,
"from": "US"
},
{
"name": "Pascal Siakam",
"age": 24,
"from": "CM"
},
{
"name": "Jonas Valančiūnas",
"age": 26,
"from": "LT"
},
{
"name": "Fred VanVleet",
"age": 24,
"from": "US"
},
{
"name": "Delon Wright",
"age": 26,
"from": "US"
}
]
}
]
