Question Accès dynamique à la propriété d'un objet à l'aide d'une variable


J'essaie d'accéder à une propriété d'un objet en utilisant un nom dynamique. Est-ce possible?

const something = { bar: "Foobar!" };
const foo = 'bar';
something.foo; // The idea is to access something.bar, getting "Foobar!"

493
2017-11-22 11:23


origine


Réponses:


Il y a deux façons d'accéder aux propriétés d'un objet:

  • Notation par points: something.bar
  • Notation de parenthèse: something['bar']

La valeur entre les parenthèses peut être n'importe quelle expression. Par conséquent, si le nom de la propriété est stocké dans une variable, vous devez utiliser la notation entre crochets:

var foo = 'bar';
something[foo];
// both x = something[foo] and something[foo] = x work as expected

644
2017-11-22 11:25



C'est ma solution:

function resolve(path, obj) {
    return path.split('.').reduce(function(prev, curr) {
        return prev ? prev[curr] : null
    }, obj || self)
}

Exemples d'utilisation:

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'})

35
2017-07-26 08:57



En javascript on peut accéder avec:

  • notation par points - foo.bar 
  • crochets - foo[someVar] ou foo["string"]

Mais seul le second cas permet d'accéder dynamiquement aux propriétés:

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

26
2017-07-01 15:40



Vous trouverez ci-après un exemple ES6 expliquant comment accéder à la propriété d'un objet à l'aide d'un nom de propriété généré dynamiquement en concaténant deux chaînes.

var suffix = " name";

var person = {
    ["first" + suffix]: "Nicholas",
    ["last" + suffix]: "Zakas"
};

console.log(person["first name"]);      // "Nicholas"
console.log(person["last name"]);       // "Zakas"

C'est appelé noms de propriété calculés


14
2017-08-02 19:46



Vous pouvez y parvenir de plusieurs manières différentes.

let foo = {
    bar: 'Hello World'
};

foo.bar;
foo['bar'];

La notation entre crochets est particulièrement puissante car elle vous permet d’accéder à une propriété basée sur une variable:

let foo = {
    bar: 'Hello World'
};

let prop = 'bar';

foo[prop];

Cela peut être étendu à la boucle sur toutes les propriétés d'un objet. Cela peut sembler redondant en raison de constructions JavaScript plus récentes telles que for ... of ..., mais aide à illustrer un cas d'utilisation:

let foo = {
    bar: 'Hello World',
    baz: 'How are you doing?',
    last: 'Quite alright'
};

for (let prop in foo.getOwnPropertyNames()) {
    console.log(foo[prop]);
}

La notation des points et des parenthèses fonctionne également comme prévu pour les objets imbriqués:

let foo = {
    bar: {
        baz: 'Hello World'
    }
};

foo.bar.baz;
foo['bar']['baz'];
foo.bar['baz'];
foo['bar'].baz;

Déstructuration d'objets

Nous pourrions également considérer la déstructuration d'objets comme un moyen d'accéder à une propriété dans un objet, mais comme suit:

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'

12
2018-03-08 11:30



ACTUALISÉ

J'ai pris en considération les commentaires ci-dessous et suis d'accord. Eval doit être évité.

L'accès aux propriétés de racine dans l'objet est facilement réalisé avec obj[variable], mais se faire emboîter complique la chose. Ne pas écrire du code déjà écrit, je suggère d'utiliser lodash.get.

Exemple

// Accessing root property
var rootProp = 'rootPropert';
_.get(object, rootProp, defaultValue);

// Accessing nested property
var listOfNestedProperties = [var1, var2];
_.get(object, listOfNestedProperties);

Lodash get peut être utilisé de différentes manières, voici le lien vers la documentation lodash.get


3
2018-06-22 08:10



Cela devient intéressant lorsque vous devez également passer des paramètres à cette fonction.

Code  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

1
2017-11-13 17:37



Chaque fois que vous avez besoin d'accéder à la propriété dynamiquement, vous devez utiliser des crochets pour accéder à la propriété non "." opérateur
  Syntaxe: objet [propriété]

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])


1
2017-07-31 08:24



Tu devrais utiliser JSON.parse, jeter un coup d'œil à 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)

-2
2018-06-14 21:42



const something = { bar: "Foobar!" };
const foo = 'bar';

something[\`${foo}\`];

-4
2017-07-02 19:04