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

J'ai posé une question qui faisait en quelque sorte double emploi sur ce sujet il y a quelque temps, et après des recherches approfondies, et après avoir constaté qu'il manquait beaucoup d'informations qui devraient se trouver ici, je pense que j'ai quelque chose de précieux à ajouter à ce post plus ancien.

• Tout d'abord, je tiens à préciser qu'il existe plusieurs façons d'obtenir la valeur d'une propriété et de la stocker dans une variable dynamique. La première méthode, la plus populaire et la plus simple selon moi, est la suivante :

  let properyValue = element.style['enter-a-property'];

Cependant, j'utilise rarement cette méthode car elle ne fonctionne pas avec les valeurs de propriété attribuées par les feuilles de style. Pour vous donner un exemple, je vais vous montrer un peu de pseudo-code.

 let elem = document.getElementById('someDiv');
 let cssProp = elem.style['width'];

En reprenant l'exemple de code ci-dessus, si la propriété width de l'élément div stockée dans la variable "elem" a été stylisée dans une feuille de style CSS, et non stylisée à l'intérieur de sa balise HTML, vous obtiendrez sans aucun doute une valeur de retour indéfinie stockée dans la variable cssProp. La valeur indéfinie est due au fait que pour obtenir la valeur correcte, le code écrit dans une feuille de style CSS doit être calculé afin d'obtenir la valeur. Vous devez donc utiliser une méthode qui calculera la valeur de la propriété dont la valeur se trouve dans la feuille de style.

• Désormais la méthode getComputedStyle() !

  function getCssProp(){ let ele = document.getElementById("test"); let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width"); }

W3Schools getComputedValue Doc Ce lien donne un bon exemple et vous permet de jouer avec. Mozilla CSS getComputedValue doc traite en détail de la fonction getComputedValue et devrait être lu par tout développeur en herbe qui n'est pas totalement au clair sur ce sujet.

• Par ailleurs, la méthode getComputedValue ne fait qu'obtenir, elle ne définit pas. C'est évidemment un inconvénient majeur, mais il existe une méthode qui permet d'obtenir des feuilles de style CSS et de définir des valeurs, bien qu'il ne s'agisse pas d'une méthode standard en Javascript. La méthode JQuery...

  $(selector).css(property,value)

...s'obtient et se fixe. C'est ce que j'utilise, le seul inconvénient est que vous devez connaître JQuery, mais c'est honnêtement l'une des très nombreuses bonnes raisons pour lesquelles tout développeur Javascript devrait apprendre JQuery, il rend la vie facile, et offre des méthodes, comme celle-ci, qui ne sont pas disponibles avec le Javascript standard. J'espère que cela aidera quelqu'un !

Answer 2

Pour tous ceux qui souhaitent définir la valeur d'une variable imbriquée, voici comment procéder :

const _ = require('lodash'); //import lodash module

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);
console.log(object.a[0].b.c);
// => 4

Documentation : https://lodash.com/docs/4.17.15#set

De même, la documentation si vous voulez obtenir une valeur : https://lodash.com/docs/4.17.15#get

Answer 3

Vous pouvez accéder dynamiquement à la propriété d'un objet en utilisant la notation entre crochets. Voici ce que cela donnerait obj[yourKey] Cependant, les objets JavaScript ne sont pas conçus pour être mis à jour ou lus dynamiquement. . Ils sont destinés à être défini lors de l'initialisation .

Si vous souhaitez assigner et accéder de manière dynamique aux key value vous devriez plutôt utiliser une carte.

const yourKey = 'yourKey';

// initialise it with the value
const map1 = new Map([
  ['yourKey', 'yourValue']
]);

// initialise empty then dynamically assign
const map2 = new Map();
map2.set(yourKey, 'yourValue');

console.log(map1.get(yourKey));
console.log(map2.get(yourKey));

Answer 4

Recherche d'un objet par référence sans, chaînes de caractères, Note : assurez-vous que l'objet que vous passez est cloné, j'utilise cloneDeep de lodash pour cela.

si l'objet ressemble à

const obj = {data: ['an Object',{person: {name: {first:'nick', last:'gray'} }]

Le chemin d'accès ressemble à

const objectPath = ['data',1,'person',name','last']

puis appeler la méthode ci-dessous qui renverra le sous-objet par le chemin d'accès donné

const child = findObjectByPath(obj, objectPath)
alert( child) // alerts "last"

const findObjectByPath = (objectIn: any, path: any[]) => {
    let obj = objectIn
    for (let i = 0; i <= path.length - 1; i++) {
        const item = path[i]
        // keep going up to the next parent
        obj = obj[item] // this is by reference
    }
    return obj
}

Answer 5

Vous pouvez utiliser getter en Javascript

getter Docs

Vérifier à l'intérieur de l'objet si la propriété en question existe, Si elle n'existe pas, le prendre par la fenêtre

const something = {
    get: (n) => this.n || something.n || window[n]
};