JavaScript(オブジェクトの反復処理) - 駆け足エンジニアの記録

はじめに

オブジェクトの反復処理の一つにfor...in文がありますが、Airbnb のスタイルガイドでは推奨されていません。その代用手段として、オブジェクト自身が持つメソッドを使っていったん配列を形成する方法が推奨されています。
GitHub - airbnb/javascript: JavaScript Style Guide
今回の記事はオブジェクトから配列に変換するためのメソッド、また例題を以下で紹介します。

三大配列に変換するオブジェクトメソッド

以下、コードで確認しましょう。

const person = {
  name: "Naruto",
  age: 17,
  gender: "male",
};
Object.keys(person);//["name", "age", "gender"]
Object.values(person);//["Naruto", 17, "male"]
Object.entries(person);//(3) [Array(2), Array(2), Array(2)]
//0: (2) ["name", "Naruto"]
//1: (2) ["age", 17]
//2: (2) ["gender", "male"]

keysメソッドはオブジェクトのプロパティ名、valuesメソッドはオブジェクトの値をそれぞれ配列に変換します。3つ目のentriesメソッドはオブジェクトのプロパティとその値のペアを二次元配列に変換します。

また勉強の一つとして、keyメソッドを使ってvalueメソッド、entriesメソッドを実装した例が以下のとおりです。(オブジェクトは上のコードと同じです。)

//valueメソッドの実装
Object.keys(person).map((prop) => {
  return person[prop]
});

//entriesメソッドの実装
Object.keys(person).map((prop) => {
  return [prop, person[prop]];
});

Array.from()メソッド

Array.from() メソッドは、配列風オブジェクトや反復可能オブジェクトから、新しい、浅いコピーの Array インスタンスを生成します。(MDNより引用)
Array.from() - JavaScript | MDN

⚠純粋なオブジェクトをArray.fromメソッドで配列に変換することはできません。

const person = {
  name: "Naruto",
  age: 17,
  gender: "male",
};
const arry = Array.from(person);
console.log(arry);//[]

配列風オブジェクト

配列風オブジェクトとはlengthプロパティを持っており [0], [1], [2], … で要素にアクセスできるオブジェクトを指します。数値のプロパティは0から(index順なので注意して下さい。)
以下、配列風オブジェクトにArray.fromメソッドを利用した例です。

const person = {
  0: "Naruto",
  1: 17,
  2: "male",
  length: 3,
};
const arry = Array.from(person);
console.log(arry);//["Naruto", 17, "male"]

またArray.fromメソッドは第2引数にコールパック関数を取ります。このコールパック関数は配列の便利メソッドmap同様の挙動を取ります。

const person = {
  0: "Naruto",
  1: 17,
  2: "male",
  length: 3,
};
const arry = Array.from(person, (_,i) =>i+1);
console.log(arry);//[1,2,3]

反復可能なオブジェクト

反復可能な(iterables) オブジェクトは配列の汎化です。for...ofで反復処理を実行できるオブジェクトは反復可能なオブジェクトとなります。具体的な例を挙げると、配列、文字列、MapやSetが該当します。
ここではMap(反復可能なオブジェクト)にArray.fromメソッドを利用します。

const map = new Map([
  ["name", "Naruto"],
  ["age", 17],
  ["gender", "male"],
]);
const arry = Array.from(map);
console.log(arry);//[Array(2), Array(2), Array(2)]
//0: (2) ["name", "Naruto"]
//1: (2) ["age", 17]
//2: (2) ["gender", "male"]

このようにオブジェクトメソッドのentriesメソッド同様の結果を返します。

練習問題

最後に以上の内容を踏まえた問題を作りました。(後日追加予定です。)

①1から100まで格納された配列

const arry = [...new Array(101 - 1).keys()].map((n) => n + 1);

//別解
const array = Array.from({ length: 100 }, (_, i) => i + 1);