連想配列から変数で値を抜き出したい

Question

前提・実現したいこと

連想配列の変数から値を抜き出すときに、変数を使ってvalueを抜き出したいのですが、
ネストになっているキーを変数で指定する方法がわからず困っております。

教えていただけると幸いです。

該当のソースコード

const player = { "name": "Ronaldo", "team": "Juventus" , "detail": { "age":23, "height":180 }} 
const key = 'name'
console.log(player[key]) // Ronaldo

このとき、detail配下のageを一つの変数で指定して取得したいです。

試したこと

player['detail']['age'] //  変数(key)によるキー指定で取得できるようにしたい

// NG例
const key = 'detail.age'
player[key] // undefined
player.key // undefined

この方法で取得はできるのですが美しくなく、もっと良い方法がある気がしております。

let key = 'detail.age'
let player = { "name": "Ronaldo", "team": "Juventus" , "detail": { "age":23, "height":180 }} 
temp = key.split('.')
if (temp.length >1) {
  player[temp[0]][temp[1]] 
}
else {
  player[temp[0]]
}

宜しくおねがいします。

Answer 1

たとえばこんなかんじでどうでしょう。

function get_data(player, key) {
    if (typeof key == "string") return player[key]
    let [key1,key2] = key
    return player[key1][key2]
}

let player = { "name": "Ronaldo", "team": "Juventus" , "detail": { "age":23, "height":180 }}

console.log(get_data(player,"name"))
console.log(get_data(player,["detail","age"]))

--- 追記 ---
もしご質問のような書式を使いたいなら

function get_data(player, key) {
    let [key1,key2] = key.split('.')
    if (typeof key2 == "undefined") return player[key]
    return player[key1][key2]
}

let player = { "name": "Ronaldo", "team": "Juventus" , "detail": { "age":23, "height":180 }}

console.log(get_data(player,"name"))
console.log(get_data(player,"detail.age"))

Comments

[BTB]

コメントありがとうございます。確かにタイプで判別する方法もありですね。参考にさせていただきます。

Answer 2

. で区切って順次アクセスするのはどうでしょうか。

let result = player
key.split('.').forEach((key) => {
    result = result[key]
})

Comments

[yh1224]

Array.reduce() を使うと以下のようにも書けます。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

key.split('.').reduce((v, k) => v[k], player)

[BTB]

コメントありがとうございます。
非常にスッキリした式ですね。階層がさらに深くなっても対応できる内容で汎用性が高いため、こちらをベストアンサーにさせていただきました。

以下自分の理解用に出力したものを貼ります

```js
let nums = ['detail','age'];
let player = { "name": "Ronaldo", "team": "Juventus" , "detail": { "age":23, "height":180 }}

let result1 = nums.reduce((prev, current, index, array) => {
console.log('prev:',prev, 'current:',current, 'index:',index, 'array:',array,'v[k]:',prev[current]);
return prev[current];
}, player);
console.log(result1);

// prev: {name: "Ronaldo", team: "Juventus", detail: {…}} current: detail index: 0 array: (2) ["detail", "age"] v[k]: {age: 23, height: 180}
// prev: {age: 23, height: 180} current: age index: 1 array: (2) ["detail", "age"] v[k]: 23
// 23
```