JavaScript .(ドット)つなぎのキー文字列でオブジェクトの値にアクセスする
どうも、今後はサドルごと自転車がなくなった高橋です。
まだ弊社では導入されておりませんが、15時のビール休憩があればなぁ。と思う日々を過ごしております。
さっそく本題に入ります。
いきなりですが、こんなオブジェクトがあったとします。
var obj = {
world: {
japan: {
greeting: 'ウィッス！',
prefecturesCount: 47
},
america: {
greeting: 'What\'s up?'
}
},
noworld: 'ウェーイ！！'
}
obj['world.japan.greeting'] で「ウィッス！」できたらなぁ。。。
と思う場面があったので近いノリのアクセサメソッドを作ってみました。
function getValueByDsvKey (key, obj, dsv) {
key = key || '';
obj = obj || {};
dsv = dsv || '.';
var keys = key.split('.');
var value = obj;
for (var layer = 0, recursive = keys.length; layer <= recursive - 1; layer++) {
value = value[keys[layer]];
}
return value;
}
alert(getValueByDsvKey('world.japan.greeting', obj)); // ウィッス！
やった！ウィッス！出来ましたね(^_^)
大したコードではないですが、配列に持たせれば階層を意識せずに処理できて便利です。
var accessKeys = [
'world.japan.greeting',
'world.america.greeting',
'world.japan.prefecturesCount',
'noworld'
];
accessKeys.forEach(function (key) {
alert(getValueByDsvKey(key, obj)) // 順番にアラートされる
});
ただ、どうすれば obj['world.japan.greeting'] でウィッス！出来るのかが分かりませんでした。
プロパティへのアクセスについてカスタマイズする方法をご存知の方がいたら教えてもらえると嬉しいです(・ω<)
それでは！ウェーイ！！
※ソースコードをまとめました。ChromeのDevTools等にコピペすれば動作確認できます。
>>JS
var obj = {
world: {
japan: {
greeting: 'ウィッス！',
prefecturesCount: 47
},
america: {
greeting: 'What\'s up?'
}
},
noworld: 'ウェーイ！！'
}
var accessKeys = [
'world.japan.greeting',
'world.america.greeting',
'world.japan.prefecturesCount',
'noworld'
];
accessKeys.forEach(function (key) {
alert(getValueByDsvKey(key, obj)) // 順番にアラートされる
});
function getValueByDsvKey (key, obj, dsv) {
key = key || '';
obj = obj || {};
dsv = dsv || '.';
var keys = key.split('.');
var value = obj;
for (var layer = 0, recursive = keys.length; layer <= recursive - 1; layer++) {
value = value[keys[layer]];
}
return value;
}
