JavaScript Object <---> Array の操作 Object.keys(), Object.values(), Object.entries(), Object.fromEntries()

Object.keys()

オブジェクトのキー一覧が配列で取れる

const Idols = {
  'cute': ['Ichigo', 'Sakura', 'Akari', 'Madoka', 'Maria'],
  'cool': ['Aoi', 'Yurika', 'Shion', 'Sumire', 'Seira'],
  'sexy': ['Ran', 'Mitsuki', 'Hikari', 'Juri', 'Sora'],
  'pop': ['Otome', 'Kaede', 'Mikuru', 'Hinaki', 'KoKone']
};

Object.keys(Idols)
// => ["cute", "cool", "sexy", "pop"]

Object.values()

オブジェクトの値の一覧が配列で取れる

const Idols = {
  'cute': ['Ichigo', 'Sakura', 'Akari', 'Madoka', 'Maria'],
  'cool': ['Aoi', 'Yurika', 'Shion', 'Sumire', 'Seira'],
  'sexy': ['Ran', 'Mitsuki', 'Hikari', 'Juri', 'Sora'],
  'pop': ['Otome', 'Kaede', 'Mikuru', 'Hinaki', 'KoKone']
};

Object.values(Idols);
/*
[
  ["Ichigo", "Sakura", "Akari", "Madoka", "Maria"],
  ["Aoi", "Yurika", "Shion", "Sumire", "Seira"],
  ["Ran", "Mitsuki", "Hikari", "Juri", "Sora"],
  ["Otome", "Kaede", "Mikuru", "Hinaki", "KoKone"]
]
*/

Object.entries()

Object の {key: value} を [key, value] な配列に変換する。
※ 変換された配列の順番は元のオブジェクトの key の並び順を担保しない
配列の形になるので map や sort で処理したい時に便利かも。

例えば API からこんな感じの JSON データが帰ってきたものを no 順に並べたいとか

// API から取得されたデータ
const Idols = {
  'hash1': { no: 1, name: 'Ichigo' },
  'hash7': { no: 7, name: 'Yurika' },
  'hash6': { no: 6, name: 'Hinaki' },
  'hash4': { no: 4, name: 'Akari' },
  'hash5': { no: 5, name: 'Sumire' },
  'hash9': { no: 9, name: 'Mikuru' },
  'hash8': { no: 8, name: 'Mituki' },
  'hash2': { no: 2, name: 'Aoi' },
  'hash3': { no: 3, name: 'Ran' },
};

const list = Object.entries(Idols);
/*
[
  ['hash1', { no: 1, name: 'Ichigo' }],
  ['hash7', { no: 7, name: 'Yurika' }],
  …
]
*/

// hash を id に変換
const listFormat = (list) => {
  return list.map((item) => ({
    id: item[0],
    ...item[1]
  }));
};
// リスト内のオブジェクトのキーでソート
const sortByKey = (list) => (key) => {
  return list.sort((a, b) => a[key] - b[key]);
};
sortByKey(listFormat(list))('no');
/*
[
  {id: "hash1", no: 1, name: "Ichigo"},
  {id: "hash2", no: 2, name: "Aoi"},
  {id: "hash3", no: 3, name: "Ran"},
  {id: "hash4", no: 4, name: "Akari"},
  {id: "hash5", no: 5, name: "Sumire"},
  {id: "hash6", no: 6, name: "Hinaki"},
  {id: "hash7", no: 7, name: "Yurika"},
  {id: "hash8", no: 8, name: "Mituki"},
  {id: "hash9", no: 9, name: "Mikuru"}
]
*/

₍ ᐢ. ̫ .ᐢ ₎👌

Object.fromEntries()

これはオブジェクトの操作ではないけれど [[key1, value1], [key2, value2], ...] な配列を {key1: value1, key2: value2, ...} なオブジェクト形式に変換する。
Object.entries() で変換したものをもとに戻すイメージ。

// {id: name} なオブジェクトにしたい
const Idols = [
  { id: 1, name: 'Ichigo' },
  { id: 7, name: 'Yurika' },
  { id: 6, name: 'Hinaki' },
  { id: 4, name: 'Akari' },
  { id: 5, name: 'Sumire' },
  { id: 9, name: 'Mikuru' },
  { id: 8, name: 'Mituki' },
  { id: 2, name: 'Aoi' },
  { id: 3, name: 'Ran' },
];

const formatList = Idols.map(({id, name}) => [id, name]);
/*
[
  [1, 'Ichigo'],
  [7, 'Yurika'],
  ...
]
*/
Object.fromEntries(formatList);
/*
{
  1: "Ichigo"
  2: "Aoi"
  3: "Ran"
  4: "Akari"
  5: "Sumire"
  6: "Hinaki"
  7: "Yurika"
  8: "Mituki"
  9: "Mikuru"
}
*/

₍ ᐢ. ̫ .ᐢ ₎👌

配列の3番目以降の要素は切り捨てられる

Object.fromEntries([[1, 2, 3]]);
// => {1: 2}

同じキーがあると配列のインデックスが後ろにある要素が残る

Object.fromEntries([['cute', 'Ichigo'], ['cute', 'Akari']])
// => {cute: "Akari"}

hasOwnProperty はどうなっているか？

`Object.keys()` は `Object.hasOwnProperty` が `true` のものだけが列挙される

const obj = new Object({foo: 1});
const myObj = Object.create(obj);
myObj.bar = 2;
for (key in myObj) { console.log(key, myObj.hasOwnProperty(key)) }
// => bar true
// => foo false
Object.keys(myObj);
// => ["bar"]

`Object.values()` も `Object.hasOwnProperty` が `true` のものだけが列挙される

const obj = new Object({foo: 1});
const myObj = Object.create(obj);
myObj.bar = 2;
for (key in myObj) { console.log(key, myObj.hasOwnProperty(key)) }
// => bar true
// => foo false
Object.values(myObj);
// => [2]

`Object.entries()` も `Object.hasOwnProperty` が `true` のものだけが列挙される

const obj = new Object({foo: 1});
const myObj = Object.create(obj);
myObj.bar = 2;
for (key in myObj) { console.log(key, myObj.hasOwnProperty(key)) }
// => bar true
// => foo false
Object.entries(myObj);
// => [["bar", 2]]