🥌
【JavaScript】オブジェクト操作メソッドを理解する Object.entries Object.fromEntriesなど
概要
この記事では JavaScriptのオブジェクト操作で使用されるObject.keys、Object.values、Object.entries、Object.fromEntriesの使い方について書いています。
-
Object.keys: オブジェクトのキー一覧を取得 -
Object.values: オブジェクトの値一覧を取得 -
Object.entries: オブジェクトをキーと値のタプル配列に変換 -
Object.fromEntries: 配列からオブジェクトを生成
Object.entries、Object.fromEntriesはたまにしか使わず、毎回挙動を忘れてしまうので備忘です。
Object.keys
指定したオブジェクトのkey-valueのkeyのみを抽出し、keyの配列を返すのがObject.keysです。
const centralLeagueTeams = {
"BayStars": { wins: 79, losses: 56, draw: 1 },
"Dragons": { wins: 75, losses: 60, draw: 1 },
"Giants": { wins: 73, losses: 62, draw: 0 },
"Swallows": { wins: 66, losses: 69, draw: 0 },
"Carp": { wins: 60, losses: 75, draw: 0 },
"Tigers": { wins: 52, losses: 83, draw: 0 },
};
const teamNames = Object.keys(centralLeagueTeams)
// [ 'BayStars', 'Dragons', 'Giants', 'Swallows', 'Carp', 'Tigers' ]
teamNames.forEach((teamName) => console.log(teamName))
// BayStars
// Dragons
// Giants
// Swallows
// Carp
// Tigers
Object.values
指定したオブジェクトのkey-valueのvalueのみを抽出し、valueの配列を返すのがObject.valuesです。
例を見てみます。
const values = Object.values(centralLeagueTeams)
// [
// { wins: 79, losses: 56, draw: 1 },
// { wins: 75, losses: 60, draw: 1 },
// { wins: 73, losses: 62, draw: 0 },
// { wins: 66, losses: 69, draw: 0 },
// { wins: 60, losses: 75, draw: 0 },
// { wins: 52, losses: 83, draw: 0 }
// ]
Object.valuesを使って値を抽出し、その後に必要な処理を加えるのはよくあるパターンだと思います。
const totalGameCounts = Object.values(centralLeagueTeams).reduce((sum, results) => {
return sum + results.wins + results.losses + results.draw;
}, 0);
console.log(`1998年の年間試合数: ${totalGameCounts / 2}`);
Object.fromEntries
Object.fromEntriesは、配列の配列をオブジェクトに変換するメソッドです。
実例を見た方が早いので、シンプルな例を示します。
const centralLeagueTeams = [
["BayStars", 79],
["Dragons", 75],
["Giants", 73],
["Swallows", 66],
["Carp", 60],
["Tigers", 52],
];
// 配列をオブジェクトに変換
console.log(Object.fromEntries(centralLeagueTeams));
// {
// BayStars: 79,
// Dragons: 75,
// Giants: 73,
// Swallows: 66,
// Carp: 60,
// Tigers: 52
// }
以下の例では、mapやfilterで必要なデータを抽出＆配列を作成して、その後にObject.fromEntriesで再オブジェクト化しています。このような使い方は、非常に実用的です。
const allBaseballTeams = [
{ name: "BayStars", wins: 79, league: "Central" },
{ name: "Dragons", wins: 75, league: "Central" },
{ name: "Giants", wins: 73, league: "Central" },
{ name: "Swallows", wins: 66, league: "Central" },
{ name: "Carp", wins: 60, league: "Central" },
{ name: "Tigers", wins: 52, league: "Central" },
{ name: "Lions", wins: 80, league: "Pacific" },
{ name: "Hawks", wins: 78, league: "Pacific" },
{ name: "Buffaloes", wins: 76, league: "Pacific" },
{ name: "Eagles", wins: 70, league: "Pacific" },
{ name: "Fighters", wins: 65, league: "Pacific" },
{ name: "Marines", wins:60, league: "Pacific" },
];
const centralLeagueTeamNameToWins = Object.fromEntries(
allBaseballTeams.filter(team => team.league === "Central")
.map(team => [team.name, team.wins])
);
console.log(centralLeagueTeamNameToWins);
// {
// BayStars: 79,
// Dragons: 75,
// Giants: 73,
// Swallows: 66,
// Carp: 60,
// Tigers: 52
// }
Object.entries
Object.entriesはObject.fromEntriesの反対です。オブジェクト内のkey-valueペアを[key, value]形式のタプル(配列)に変換し、それらタプルを含む配列を返します。
簡単な例を示します。
const teamWins = {
BayStars: 79,
Dragons: 75,
Giants: 73,
Swallows: 66,
Carp: 60,
Tigers: 52
};
console.log(Object.entries(teamWins));
// [
// [ 'BayStars', 79 ],
// [ 'Dragons', 75 ],
// [ 'Giants', 73 ],
// [ 'Swallows', 66 ],
// [ 'Carp', 60 ],
// [ 'Tigers', 52 ]
// ]
オブジェクトをObject.entriesにより配列化すると、mapやfilterなどの配列メソッドが使えるので、加工しやすくなります。
const teamWins = {
BayStars: 79,
Dragons: 75,
Giants: 73,
Swallows: 66,
Carp: 60,
Tigers: 52
};
// 75勝以上のチーム名を抽出
const filteredTeams = Object.entries(teamWins)
.filter(([team, wins]) => wins >= 75)
.map(([team]) => team);
console.log(filteredTeams); // [ 'BayStars', 'Dragons' ]
Object.fromEntriesと合わせて使うことで、以下の流れで簡単にオブジェクトの各要素を特定の条件で絞り込み、新しいオブジェクトを作成できます。
-
Object.entriesにより元のオブジェクトを配列化します -
mapやfilterで条件に応じて、加工・絞り込みをします -
Object.fromEntriesで加工後の配列をオブジェクトに戻します
const teamWins = {
BayStars: 79,
Dragons: 75,
Giants: 73,
Swallows: 66,
Carp: 60,
Tigers: 52
};
// 75勝以上のチーム名を抽出し、再度オブジェクト化
const filteredTeams = Object.entries(teamWins)
.filter(([team, wins]) => wins >= 75);
console.log(filteredTeams); // [ [ 'BayStars', 79 ], [ 'Dragons', 75 ] ]
const newTeamWins = Object.fromEntries(filteredTeams);
console.log(newTeamWins); // { BayStars: 79, Dragons: 75 }
Discussion