JavaScriptのObject.keys()とvalues()とentries()メソッド

2021年1月30日JavaScript

JavaScriptのObject.keys()メソッドとObject.values()メソッドとObject.entries()メソッドについてまとめました。

Objectのメソッド

Object.keys()メソッドは、オブジェクトのプロパティを配列で取得します。

Object.values()メソッドは、オブジェクトのプロパティの値を配列で取得します。

Object.entries()メソッドは、オブジェクトのプロパティの組 [key, value]を配列で取得します。

 


const openingHours = {
  wed: {
    open: 12,
    close: 22,
  },
  thu: {
    open: 11,
    close: 23,
  },
  fri: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

//Object.keys()
const properties = Object.keys(openingHours);
console.log(properties); //["wed", "thu", "fri"]という配列

//Object.values()
const values = Object.values(openingHours);
console.log(values);
/*
[
0: {open: 12, close: 22}
1: {open: 11, close: 23}
2: {open: 0, close: 24}
]
*/

//Object.entries()
const entries = Object.entries(openingHours);
console.log(entries);
/*
(3) [Array(2), Array(2), Array(2)]
0: Array(2)
0: "wed"
1: {open: 12, close: 22}
length: 2
__proto__: Array(0)
1: Array(2)
0: "thu"
1: {open: 11, close: 23}
length: 2
__proto__: Array(0)
2: Array(2)
0: "fri"
1: {open: 0, close: 24}
length: 2
__proto__: Array(0)
length: 3
__proto__: Array(0)
*/

このように、

Object.keys()は、オブジェクトのキーを配列で取得し、

Object.values()は、オブジェクトのプロパティを配列で取得し、

Object.entries()は、オブジェクトの[key, value] をセットにした配列を取得することができます。

また、Object.keys()とvalue()はObjectのメソッドであるのに対し、Object.entries()はObject以外でも使えます。

Object.keys()を使い方

Object.keys()メソッドは、指定されたオブジェクトが持つプロパティの 名前の配列を、通常のループで取得するのと同じ順序で返します。

 

{
const openingHours = {
  wed: {
    open: 12,
    close: 22,
  },
  thu: {
    open: 11,
    close: 23,
  },
  fri: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

const properties = Object.keys(openingHours);
console.log(properties); //["wed", "thu", "fri"]という配列

console.log(`今週は${properties.length}営業日です。`); //今週は3営業日です。

for (const item of Object.keys(openingHours)) {
  console.log(item);
  /* コンソールに出力される値
  wed
  thu
  fri
  */
}
let openStr = `今週の営業日: `;
for (const day of properties) {
  openStr += `${day}, `;
}
console.log(openStr);
}

上からわかるように、Object.keys()でオブジェクトのキーを配列のかたちで取得できます。for-ofループと合わせることで、キーをひとつずつ取り出すことができます。

Object.values()を使い方

Object.values() メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for…in ループで提供される場合と同じ順序で配列にして返します。

{
  const openingHours = {
    wed: {
      open: 12,
      close: 22,
    },
    thu: {
      open: 11,
      close: 23,
    },
    fri: {
      open: 0, // Open 24 hours
      close: 24,
    },
  };
const values = Object.values(openingHours);
console.log(values);
/*
[
0: {open: 12, close: 22}
1: {open: 11, close: 23}
2: {open: 0, close: 24}
]
*/
for (const time of values) {
  console.log(time);
  /*
  {open: 12, close: 22}
  {open: 11, close: 23}
  {open: 0, close: 24}
   */
}
}

Object.entries()を使い方

Object.entries()メソッドは、引数に与えたオブジェクトが所有する、文字列をキーとした列挙可能なプロパティの組 [key, value] からなる配列を返します。

{
const openingHours = {
  wed: {
    open: 12,
    close: 22,
  },
  thu: {
    open: 11,
    close: 23,
  },
  fri: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

//Object.entries
const entries = Object.entries(openingHours);
console.log(entries);
/*
(3) [Array(2), Array(2), Array(2)]
0: Array(2)
0: "wed"
1: {open: 12, close: 22}
length: 2
1: Array(2)
0: "thu"
1: {open: 11, close: 23}
length: 2
2: Array(2)
0: "fri"
1: {open: 0, close: 24}
*/

//for-ofループで値を取得し、分割代入する。
for (const [key, {open, close}] of entries) {
  console.log(`${key}: open: ${open} and close: ${close}`);
}
/*
wed: open: 12 and close: 22
thu: open: 11 and close: 23
fri: open: 0 and close: 24
*/
}

entriesの中身は、for-ofループでArray(2)が一つずつまわってきます。
Array(2)の中身は、分割代入[]で値のみにすることができます。
つまり、一つ目なら、"wed"と{open: 12, close: 22}という２つの値が格納されています。
それをさらに分割代入{}とすることで、値である12と22を取り出すことができます。
よって、最初のkeyには、wedが入り、openには12、closeには22が格納されます。

分割代入については、次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso