web-dev-qa-db-fra.com

Objet JavaScript: propriété de la variable d'accès par son nom sous forme de chaîne

Si j'ai un objet javascript qui ressemble à ci-dessous

var columns = {
  left: true,
  center : false,
  right : false
}

et j'ai une fonction qui passe l'objet, et un nom de propriété comme si

//should return false
var side = read_prop(columns, 'right');

à quoi ressemblerait le corps de read_prop(object, property)?

javascriptobject
356
Hailwood

Vous n'avez pas besoin d'une fonction pour cela - utilisez simplement la notation entre crochets :

var side = columns['right'];

Ceci est égal à notation par points , var side = columns.right;, sauf le fait que right pourrait aussi venir depuis une variable, une valeur de retour de fonction, etc., lors de l’utilisation de la notation entre crochets.

Si vous avez besoin d’une fonction pour cela, la voici:

function read_prop(obj, prop) {
    return obj[prop];
}

Pour répondre à certains des commentaires ci-dessous qui ne sont pas directement liés à la question d'origine, les objets imbriqués peuvent être référencés entre plusieurs crochets. Si vous avez un objet imbriqué comme ceci:

var foo = { a: 1, b: 2, c: {x: 999, y:998, z: 997}};

vous pouvez accéder à la propriété x de c comme suit:

var cx = foo['c']['x']

Si une propriété est indéfinie, une tentative de référence la retournera: undefined (et non null ou false):

foo['c']['q'] === null
// returns false

foo['c']['q'] === false
// returns false

foo['c']['q'] === undefined
// returns true
672
ThiefMaster

La réponse de ThiefMaster est correcte à 100%, bien que je sois tombé sur un problème similaire dans lequel je devais extraire une propriété d'un objet imbriqué (objet dans un objet). Vous pouvez donc créer une solution récursive qui vous permettra définir une nomenclature pour saisir n'importe quelle propriété, quelle que soit sa profondeur:

function fetchFromObject(obj, prop) {

    if(typeof obj === 'undefined') {
        return false;
    }

    var _index = prop.indexOf('.')
    if(_index > -1) {
        return fetchFromObject(obj[prop.substring(0, _index)], prop.substr(_index + 1));
    }

    return obj[prop];
}

Où votre référence de chaîne à une propriété donnée ressemble à property1.property2

Code et commentaires dans JsFiddle .

72
Prusprus

Étant donné que la réponse ci-dessus m'a aidé dans mon projet (j'ai posé une question en double et j'ai été renvoyé ici), je soumets une réponse (mon code de test) pour la notation entre crochets lors de l'imbrication dans la variable:

<html>
<head>
  <script type="text/javascript">
    function displayFile(whatOption, whatColor) {
      var Test01 = {
        rectangle: {
          red: "RectangleRedFile",
          blue: "RectangleBlueFile"
        },
        square: {
          red: "SquareRedFile",
          blue: "SquareBlueFile"
        }
      };
      var filename = Test01[whatOption][whatColor];
      alert(filename);
    }
  </script>
</head>
<body>
  <p onclick="displayFile('rectangle', 'red')">[ Rec Red ]</p>
  <br/>
  <p onclick="displayFile('square', 'blue')">[ Sq Blue ]</p>
  <br/>
  <p onclick="displayFile('square', 'red')">[ Sq Red ]</p>
</body>
</html>
8
Junco