entries【プロパティ配列取得 (キー・値)】
keys【プロパティ配列取得 (キー)】
values【プロパティ配列取得 (値)】
fromEntries【オブジェクト生成 (イテラブル)】
groupBy【グループ分け】

Object.entries【プロパティ配列取得 (キー・値)】
Object.keys【プロパティ配列取得 (キー)】
Object.values【プロパティ配列取得 (値)】

メモ

概要

  • プロパティ配列を取得

関連

外部リンク

構文

Object.entries( O ) 

プロパティ配列 (キー・値)
Oオブジェクト (オブジェクト以外はオブジェクト変換)

TypeError Oがオブジェクト変換不可

Object.keys( O ) 

プロパティ配列 (キー)
Oオブジェクト (オブジェクト以外はオブジェクト変換  )

TypeError 
O (オブジェクト)がオブジェクト以外 
O (オブジェクト)がオブジェクト変換不可 

Object.values( O ) 

プロパティ配列得 (値)
Oオブジェクト (オブジェクト以外はオブジェクト変換)

TypeError O (オブジェクト)がオブジェクト変換不可

例

const obj = {
  'Key1': 'Value1',
  'Key2': 'Value2',
  'Key3': 'Value3',
};

// Object.entries【プロパティ配列取得 (キー・値)】
console.log(Object.entries(obj));
// 出力：
// Array(3) [ (2) […], (2) […], (2) […] ]
//   0: Array [ "Key1", "Value1" ]
// ​  1: Array [ "Key2", "Value2" ]
// ​  2: Array [ "Key3", "Value3" ]
// ​  length: 3

for (let [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
// 出力：
// Key1 Value1
// Key2 Value2
// Key3 Value3

// Object.keys【プロパティ配列取得 (キー)】
console.log(Object.keys(obj));
// 出力：Array(3) [ "Key1", "Key2", "Key3" ]

for (let key of Object.keys(obj)) {
  console.log(key);
}
// 出力：
// Key1
// Key2
// Key3

// Object.values【プロパティ配列取得 (値)】
console.log(Object.values(obj));
// 出力：Array(3) [ "Value1", "Value2", "Value3" ]

for (let value of Object.values(obj)) {
  console.log(value);
}
// 出力：
// Value1
// Value2
// Value3

Object.fromEntries【オブジェクト生成 (イテラブル)】

メモ

概要

  • イテラブル オブジェクトをプロパティ(キー・値)としてオブジェクト生成

関連

外部リンク

構文

Object.fromEntries( iterable ) 

オブジェクト
iterableイテラブル オブジェクト

TypeError iterableがイテラブル オブジェクト以外

例

const array = [
  ['Key1', 'Value1'],
  ['Key2', 'Value2'],
  ['Key3', 'Value3'],
];
let obj1 = Object.fromEntries(array);
console.log(obj1);
// 出力：Object { Key1: "Value1", Key2: "Value2", Key3: "Value3" }

const array2 = [
  ['KeyA', 'ValueA'],
  ['KeyB', 'ValueB'],
  ['KeyC', 'ValueC'],
];
const map = new Map(array2);
let obj2 = Object.fromEntries(map);
console.log(obj2);
// 出力：Object { KeyA: "ValueA", KeyB: "ValueB", KeyC: "ValueC" }

Object.groupBy【グループ分け】

メモ

概要

関連

外部リンク

  • ECMA-262 (英語)
    Object.groupBy ( items, callbackfn )
    ES2024 (15) ES2023 (14) ES2022 (13)

構文

Object.groupBy( items, callbackfn ) 

グループ分けした新規オブジェクト (%Object.prototype% の継承なし)
各グループはグループ識別キー(callbackfnの戻り値) で参照
各要素は元要素の参照
itemsイテラブル オブジェクト
callbackfnグループ分けコールバック関数 (詳細は下記参照)

TypeError 
callbackfnが呼出し不可
要素数が 253 以上
callbackfn (グループ分けコールバック関数) 引数名 (例)備考
element処理要素
index処理要素のインデックス
戻り値型備考
String【文字列】 (空文字列可)
Symbol【シンボル】
その他：String【文字列】に強制変換 		グループ識別キー

例 - グループ識別：文字列 (通常関数 使用)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];


// point でグループ分け (グループ識別：文字列)
const KEY_HIGH = 'GroupHight';
const KEY_MIDDLE = 'GroupMIddle';
const KEY_LOW = 'GroupLow';
function callbackPoint(element, index) {
  let group;
  if (80 <= element.point) {
    group = KEY_HIGH;
  } else if (50 <= element.point) {
    group = KEY_MIDDLE;
  } else {
    group = KEY_LOW;
  }
  console.log('callbackPoint()', element, index, group);
  return group;
}


const resultPoint = Object.groupBy(items, callbackPoint);
// 出力：
// callbackPoint() {id: 1001, type: 'A', point: 100} 0 GroupHight
// callbackPoint() {id: 1002, type: 'B', point: 70} 1 GroupMIddle
// callbackPoint() {id: 1003, type: 'C', point: 40} 2 GroupLow
// callbackPoint() {id: 1004, type: 'B', point: 90} 3 GroupHight
// callbackPoint() {id: 1005, type: 'C', point: 60} 4 GroupMIddle
// callbackPoint() {id: 1006, type: 'A', point: 30} 5 GroupLow
// callbackPoint() {id: 1007, type: 'C', point: 80} 6 GroupHight
// callbackPoint() {id: 1008, type: 'A', point: 50} 7 GroupMIddle
// callbackPoint() {id: 1009, type: 'B', point: 20} 8 GroupLow

// 元要素変更
items[0]['id'] = 9999;

console.log(resultPoint);
// 出力：
// {GroupHight: Array(3), GroupMIddle: Array(3), GroupLow: Array(3)}
//   GroupHight: Array(3)
//     0: {id: 9999, type: 'A', point: 100}
//     1: {id: 1004, type: 'B', point: 90}
//     2: {id: 1007, type: 'C', point: 80}
//     length: 3
//     [[Prototype]]: Array(0)
//   GroupLow: Array(3)
//     0: {id: 1003, type: 'C', point: 40}
//     1: {id: 1006, type: 'A', point: 30}
//     2: {id: 1009, type: 'B', point: 20}
//     length: 3
//     [[Prototype]]: Array(0)
//   GroupMIddle: Array(3)
//     0: {id: 1002, type: 'B', point: 70}
//     1: {id: 1005, type: 'C', point: 60}
//     2: {id: 1008, type: 'A', point: 50}
//     length: 3
//     [[Prototype]]: Array(0)

console.log(resultPoint[KEY_HIGH]);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 9999, type: 'A', point: 100}
//   1: {id: 1004, type: 'B', point: 90}
//   2: {id: 1007, type: 'C', point: 80}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultPoint[KEY_MIDDLE]);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1002, type: 'B', point: 70}
//   1: {id: 1005, type: 'C', point: 60}
//   2: {id: 1008, type: 'A', point: 50}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultPoint[KEY_LOW]);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1003, type: 'C', point: 40}
//   1: {id: 1006, type: 'A', point: 30}
//   2: {id: 1009, type: 'B', point: 20}
//   length: 3
//   [[Prototype]]: Array(0)

例 - グループ識別：シンボル (分割代入使用)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];


// type・point でグループ分け (グループ識別：シンボル / 分割代入使用)
const symbolTop = Symbol('GroupTop');
const symbolEtc = Symbol('GroupTop 以外');
function callbackTypePoint({type, point} /* {分割代入}, index 未使用 */) {
  let group;
  if ((type === 'A') && (80 < point)) {
    group = symbolTop;
  } else {
    group = symbolEtc;
  }
  return group;
}


const resultTypePoint = Object.groupBy(items, callbackTypePoint);
console.log(resultTypePoint);
// 出力：
// {Symbol(GroupTop): Array(1), Symbol(GroupTop 以外): Array(8)}
//   Symbol(GroupTop 以外): (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
//   Symbol(GroupTop): Array(1)
//     0: {id: 1001, type: 'A', point: 100}
//     length: 1
//     [[Prototype]]: Array(0)

console.log(resultTypePoint[symbolTop]);
// 出力：
// [{…}]
//   0: {id: 1001, type: 'A', point: 100}
//   length: 1
//   [[Prototype]]: Array(0)

例 - グループ識別：文字列 (分割代入・アロー関数 使用)

const items = [
  { id: 1001, type: 'A', point: 100 },
  { id: 1002, type: 'B', point: 70 },
  { id: 1003, type: 'C', point: 40 },
  { id: 1004, type: 'B', point: 90 },
  { id: 1005, type: 'C', point: 60 },
  { id: 1006, type: 'A', point: 30 },
  { id: 1007, type: 'C', point: 80 },
  { id: 1008, type: 'A', point: 50 },
  { id: 1009, type: 'B', point: 20 },
];


// type でグループ分け (分割代入・アロー関数 使用)
const resultType = Object.groupBy(items, ({ type } /* index 未使用 */) => type);
console.log(resultType);
// 出力：
// {A: Array(3), B: Array(3), C: Array(3)}
//   A: Array(3)
//     0: {id: 1001, type: 'A', point: 100}
//     1: {id: 1006, type: 'A', point: 30}
//     2: {id: 1008, type: 'A', point: 50}
//     length: 3
//     [[Prototype]]: Array(0)
//   B: Array(3)
//     0: {id: 1002, type: 'B', point: 70}
//     1: {id: 1004, type: 'B', point: 90}
//     2: {id: 1009, type: 'B', point: 20}
//     length: 3
//     [[Prototype]]: Array(0)
//   C: Array(3)
//     0: {id: 1003, type: 'C', point: 40}
//     1: {id: 1005, type: 'C', point: 60}
//     2: {id: 1007, type: 'C', point: 80}
//     length: 3
//     [[Prototype]]: Array(0)

console.log(resultType['A']);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1001, type: 'A', point: 100}
//   1: {id: 1006, type: 'A', point: 30}
//   2: {id: 1008, type: 'A', point: 50}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultType['B']);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1002, type: 'B', point: 70}
//   1: {id: 1004, type: 'B', point: 90}
//   2: {id: 1009, type: 'B', point: 20}
//   length: 3
//   [[Prototype]]: Array(0)

console.log(resultType['C']);
// 出力：
// (3) [{…}, {…}, {…}]
//   0: {id: 1003, type: 'C', point: 40}
//   1: {id: 1005, type: 'C', point: 60}
//   2: {id: 1007, type: 'C', point: 80}
//   length: 3
//   [[Prototype]]: Array(0)