Accès à une propriété d'objet dont le nom est calculé dynamiquement

Question

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!"

Answer 1

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

• Notation en points : something.bar
• Notation des crochets : something['bar']

La valeur entre les crochets 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 something = {
  bar: 'foo'
};
var foo = 'bar';

// both x = something[foo] and something[foo] = x work as expected
console.log(something[foo]);
console.log(something.bar)

Answer 2

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

Answer 3

En javascript, nous pouvons y accéder avec :

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

Mais seul le deuxième cas permet d'accéder aux propriétés de manière dynamique :

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

Answer 4

Voici un exemple ES6 de la façon dont vous pouvez accéder à la propriété d'un objet en utilisant un nom de propriété qui a été généré dynamiquement en concaténant deux chaînes de caractères.

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 ce qu'on appelle noms de propriétés calculés

Answer 5

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

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é sur la base d'une variable :

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

let prop = 'bar';

foo[prop];

Cette méthode peut être étendue à l'examen en boucle de toutes les propriétés d'un objet. Cela peut sembler redondant en raison des nouvelles constructions JavaScript telles que for ... of ..., mais permet d'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 par points et par crochets 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é d'un objet, mais de la manière suivante :

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'