Динамический доступ к свойству объекта с помощью переменной
Я пытаюсь получить доступ к свойству объекта с помощью динамического имя. Возможно ли это?
const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
11 ответов
здесь два способа доступа к свойствам объекта:
- точечная нотация:
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"]
но только второй случай позволяет динамически обращаться к свойствам:
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
Ниже приведен пример 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];
Это может быть расширено до цикла над каждым свойством объекта. Это может показаться избыточным из-за новых конструкций JavaScript, таких как for ... из. .., но помогает проиллюстрировать прецедент:
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 можно использовать по-разному, вот ссылка на документацию лодашь.get
всякий раз, когда вам нужно получить доступ к свойству динамически, вы должны использовать квадратную скобку для доступа к свойству не "." оператор
синтаксис: 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
вы должны использовать JSON.parse
, взгляните на https://www.w3schools.com/js/js_json_parse.asp
const obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}')
console.log(obj.name)
console.log(obj.age)