Estoy intentando acceder a una propiedad de un objeto usando un nombre dinámico. ¿Es posible?
const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"
13 respuestas
Solución ES5 para navegadores antiguos (solo cliente)
Eval (en el lado del cliente) no es mala!
Por ejemplo:
a = [ {b:[{a:1,b:[{c:1,d:2}]}]} ]
En lugar de :
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
Nosotras podemos ahora:
if( getValue('a[0].b[0].b[0].d') == 2 ) // true
Aquí está el código
/**
* @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);
}
const something = { bar: "Foobar!" };
const foo = 'bar';
something[\`${foo}\`];
Puede lograr esto de muchas maneras diferentes.
let foo = {
bar: 'Hello World'
};
foo.bar;
foo['bar'];
La notación de corchetes es especialmente poderosa ya que le permite acceder a una propiedad basada en una variable:
let foo = {
bar: 'Hello World'
};
let prop = 'bar';
foo[prop];
Esto se puede extender al bucle sobre cada propiedad de un objeto. Esto puede parecer redundante debido a las nuevas construcciones de JavaScript, como para ... de ..., pero ayuda a ilustrar un caso de uso:
let foo = {
bar: 'Hello World',
baz: 'How are you doing?',
last: 'Quite alright'
};
for (let prop in foo.getOwnPropertyNames()) {
console.log(foo[prop]);
}
La notación de punto y paréntesis también funciona como se espera para los objetos anidados:
let foo = {
bar: {
baz: 'Hello World'
}
};
foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;
Desestructuración de objetos
También podríamos considerar la desestructuración de objetos como un medio para acceder a una propiedad en un objeto, pero de la siguiente manera:
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'
Debe usar JSON.parse
, eche un vistazo a 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)
Hay dos formas de acceder a las propiedades de un objeto:
- Notación de puntos:
something.bar
- Notación de paréntesis:
something['bar']
El valor entre paréntesis puede ser cualquier expresión. Por lo tanto, si el nombre de la propiedad se almacena en una variable, debe usar la notación de paréntesis:
var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected
Actualizado
He tenido en cuenta los comentarios a continuación y acepto. Eval debe ser evitado.
Acceder a las propiedades raíz en el objeto se logra fácilmente con obj[variable]
, pero anidarse complica las cosas. Para no escribir código ya escrito, sugiero usar lodash.get
.
Ejemplo
// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);
// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);
Lodash get se puede usar de diferentes maneras, aquí hay un enlace a la documentación lodash.get
Siempre que necesite acceder a la propiedad dinámicamente, debe usar un corchete para acceder a la propiedad no "." operador
Sintaxis: objeto [propiedad}
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])
Puedes hacerlo así usando Lodash get
_.get(object, 'a[0].b.c');
En javascript podemos acceder con:
- notación de punto -
foo.bar
- corchetes:
foo[someVar]
ofoo["string"]
Pero solo el segundo caso permite acceder a las propiedades dinámicamente:
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
Esta es mi solución:
function resolve(path, obj) {
return path.split('.').reduce(function(prev, curr) {
return prev ? prev[curr] : null
}, obj || self)
}
Ejemplos de uso:
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'})
Hay algunas posibilidades:
const test = {
prop1: {
prop2: {
prop3: "I'm very nested"
}
}
const test1 = test.prop1.prop2.prop3
const test2 = test['prop1']['prop2']['prop3']
const test3 = test['prop1.prop2.prop3'] //will return undefined
const test4 = _.get(test, 'prop1.prop2.prop3') //use lodash
Si desea obtener un valor anidado dinámicamente (por ejemplo, por variable), su mejor opción será usar lodash
.
Se pone interesante cuando tienes que pasar parámetros a esta función también.
Código 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
El siguiente es un ejemplo de ES6 de cómo puede acceder a la propiedad de un objeto utilizando un nombre de propiedad que se ha generado dinámicamente mediante la concatenación de dos cadenas.
var suffix = " name";
var person = {
["first" + suffix]: "Nicholas",
["last" + suffix]: "Zakas"
};
console.log(person["first name"]); // "Nicholas"
console.log(person["last name"]); // "Zakas"
Esto se llama nombres de propiedades calculados
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.