どうもフロントエンドエンジニアのまさぴょんです！
今回は、JavaScriptのObject.keys()とObject.values()について、解説していきます。
この2つは、セットで覚えておくといいですよ。
目次
Object.keys() の構文
Object.keysメソッドの基本の形を確認しましょう！
Object.keys()・基本の形
const obj = { name: "もも", type: "Cat", age: 5};
const array = Object.keys(obj);
// 実行結果は、objeのkey名の配列を返す！
console.log(array);
// 実行結果： ['name', 'type', 'age']実行結果は、引数として渡したobjのkey名の配列になっています！
Object.values() の構文
Object.valuesメソッドの基本の形を確認しましょう！
Object.values()・基本の形
const obj = { name: "もも", type: "Cat", age: 5};
const array = Object.values(obj);
// 実行結果は、objeのvalueの配列を返す！
console.log(array);
// 実行結果： ['もも', 'Cat', 5]
実行結果は、valueの配列になっています！
Object.keysもObject.valuesもobjectのkey&valueをそれぞれ配列に変換してくれるメソッドだと言うことがわかりました。
実行結果（返り値）が複数形の配列であることを示しているのか、keys も valuesも複数形になっています。
実行結果が配列だということは、そのまま他の配列メソッドとメソッドチェーンなどもしやすいですね。
Object.keys() サンプルコード
const cartItem = {
mikan: 1,
orange: 2,
meat: 4,
apple: 3,
grape: 3,
okasi: 12,
redbul: 12
};
const cartItemNames = Object.keys(cartItem).join(",")
console.log(`Cartの中には、${cartItemNames}があります！`);
// 出力結果：Cartの中には、mikan,orange,meat,apple,grape,okasi,redbulがあります！
Object.values() サンプルコード
const cartItem = {
mikan: 1,
orange: 2,
meat: 4,
apple: 3,
grape: 3,
okasi: 12,
redbul: 12
};
const sumCartItem = Object.values(cartItem).reduce((preV, v) => preV + v);
console.log(`Cartの中身は、合計で、${sumCartItem}個です！`);
// 出力結果：Cartの中身は、合計で、37個です！上記の2つのサンプルコードのようにObjectからArrayの構造に形を変換してから、Array.prototypeのメソッドで処理を繋げていく(メソッドチェーンする)と、そのまま処理ができます。
まとめ
- Object.keys(obj) は、objのkeyの配列を返してくれる。
- Object.values(obj)は、objのvalueの配列を返してくれる。
- 実行結果（返り値）から、メソッドチェーンなどをすると楽に処理が記述できる。
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
参考・引用
3. Object.keys, values, entries
最近の投稿
【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法
JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方)
PythonでCSVをJSONに変換する方法
PythonでCSV・Dataframeを指定の行数まで切り取る方法
JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法
VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法
