動的な名前を使用してオブジェクトのプロパティにアクセスしようとしています。これは可能ですか?
const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
オブジェクトのプロパティ にアクセスする方法は2つあります。
something.bar
something['bar']
大括弧の間の値は任意の式にすることができます。したがって、プロパティ名が変数に格納されている場合は、角括弧表記を使用する必要があります。
var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected
これが私の解決策です:
function resolve(path, obj) {
return path.split('.').reduce(function(prev, curr) {
return prev ? prev[curr] : null
}, obj || self)
}
使用例
resolve("document.body.style.width")
// or
resolve("style.width", document.body)
// or even use array indexes
// (someObject has been defined in the question)
resolve("part.0.size", someObject)
// returns null when intermediate properties are not defined:
resolve('properties.that.do.not.exist', {hello:'world'})
Javascriptでは、次のものにアクセスできます。
foo.bar
foo[someVar]
またはfoo["string"]
しかし、2番目のケースだけがプロパティに動的にアクセスすることを可能にします:
var foo = { pName1 : 1, pName2 : [1, {foo : bar }, 3] , ...}
var name = "pName"
var num = 1;
foo[name + num]; // 1
// --
var a = 2;
var b = 1;
var c = "foo";
foo[name + a][b][c]; // bar
以下は、2つの文字列を連結して動的に生成されたプロパティ名を使用してオブジェクトのプロパティにアクセスする方法のES6の例です。
var suffix = " name";
var person = {
["first" + suffix]: "Nicholas",
["last" + suffix]: "Zakas"
};
console.log(person["first name"]); // "Nicholas"
console.log(person["last name"]); // "Zakas"
これは/と呼ばれます 計算されたプロパティ名
これを実現するには、いくつかの方法があります。
let foo = {
bar: 'Hello World'
};
foo.bar;
foo['bar'];
角かっこ表記は、変数に基づいてプロパティにアクセスできるため、特に強力です。
let foo = {
bar: 'Hello World'
};
let prop = 'bar';
foo[prop];
これは、オブジェクトのすべてのプロパティをループするように拡張することができます。 for ... of ...などの新しいJavaScript構成要素のため、これは冗長に思えるかもしれませんが、ユースケースを説明するのに役立ちます。
let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};
for (let prop in foo.getOwnPropertyNames()) {
console.log(foo[prop]);
}
ドット表記と括弧表記の両方とも、入れ子になったオブジェクトに対しても期待どおりに機能します。
let foo = {
bar: {
baz: 'Hello World'
}
};
foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;
オブジェクトの破壊
オブジェクト内のプロパティにアクセスする手段として、オブジェクトの構造化を検討することもできますが、次のようになります。
let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};
let prop = 'last';
let { bar, baz, [prop]: customName } = foo;
// bar = 'Hello World'
// baz = 'How are you doing?'
// customName = 'Quite alright'
私は以下のコメントを考慮に入れて同意しました。評価は避けるべきです。
オブジェクトのルートプロパティにアクセスすることはobj[variable]
で容易に達成されます、しかし入れ子になることは事を複雑にします。 lodash.get
を使うことをお勧めします。
例
// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);
// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);
Lodash getはさまざまな方法で使用できます。これはドキュメントへのリンクです lodash.get
Lodash getを使ってこれを行うことができます
_.get(object, 'a[0].b.c');
動的にプロパティにアクセスする必要があるときはいつでも、プロパティにアクセスするには角括弧を使用する必要があります。オペレーター
構文:object [propery}
const something = { bar: "Foobar!" };
const foo = 'bar';
// something.foo; -- not correct way at it is expecting foo as proprty in something={ foo: "value"};
// correct way is something[foo]
alert( something[foo])
この関数にもパラメータを渡さなければならないときはおもしろいでしょう。
コード jsfiddle
var obj = {method:function(p1,p2,p3){console.log("method:",arguments)}}
var str = "method('p1', 'p2', 'p3');"
var match = str.match(/^\s*(\S+)\((.*)\);\s*$/);
var func = match[1]
var parameters = match[2].split(',');
for(var i = 0; i < parameters.length; ++i) {
// clean up param begninning
parameters[i] = parameters[i].replace(/^\s*['"]?/,'');
// clean up param end
parameters[i] = parameters[i].replace(/['"]?\s*$/,'');
}
obj[func](parameters); // sends parameters as array
obj[func].apply(this, parameters); // sends parameters as individual values
例えば :
a = [ {b:[{a:1,b:[{c:1,d:2}]}]} ]
の代わりに :
if(a && a[0] && a[0].b && a[0].b[0] && a[0].b[0].b && a[0].b[0].b[0] && a[0].b[0].b[0].d && a[0].b[0].b[0].d == 2 ) // true
私たちは今できる:
if( getValue('a[0].b[0].b[0].d') == 2 ) // true
ここにコードがあります
/**
* @method getValue
* @description simplifies checking for existance and getting a deeply nested value within a ceratin context
* @argument {string} s string representation of the full path to the requested property
* @argument {object} context optional - the context to check defaults to window
* @returns the value if valid and set, returns undefined if invalid / not available etc.
*/
var getValue = function( s, context ){
var fn = function(){
try{
return eval(s);
}catch(e){
return undefined;
}
}
return fn.call(context||window,s);
}