如何访问 javascript 中的 object 中的值？

Question

I have an object like this which I console log like this:

console.log(node.data.target.fields);

file:
en-US: {url: "//images.ctfassets.net/qkwv5aiilkmk/4YsaPFrSxMPKuMVnO/efb6b59a369e4f30105aaea54fb9f62f/aaa.jpeg", details: {…}, fileName: "aaa.jpeg", contentType: "image/jpeg"}

I want to access the url value but It throws an error:

const url = node.data.target.fields.file.['en-US'].url;

How can I access the en-Us variable properly?

Answer 1

Since en-US cannot be used as a variable name ( - is an operator, cannot be used as a part of a variable), you cannot use the dot notation. So the only way you can access is using the [] notation.

const url = node.data.target.fields.file['en-US'].url;

The above is the right way of accessing it, else, you can also access this way:

const lang = 'en-US';
const url = node.data.target.fields.file[lang].url;

Two cases example:

 const node = { data: { target: { fields: { file: { "en-US": { url: "//images.ctfassets.net/qkwv5aiilkmk/" } } } } } }; (() => { console.log("Using direct access..."); const url = node.data.target.fields.file['en-US'].url; console.log(url); })(); (() => { console.log("Using a variable..."); const lang = 'en-US'; const url = node.data.target.fields.file[lang].url; console.log(url); })();

Answer 2

To add from the given answer just a few guidelines for accessing Object Properties here are some tips that would help you in the future.

1. Dot property accessor

This common way to access the property of an object is the dot property accessor syntax: expression.identifier

const hero = {
  name: 'Batman'
};

// Dot property accessor
hero.name; // => 'Batman'

1.1 Dot property accessor requires identifiers

-The dot property accessor works correctly when the property name is a valid identifier. An identifier in JavaScript contains Unicode letters, $, _, and digits 0..9, but cannot start with a digit.

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};

weirdObject.prop-3; // => NaN
weirdObject.3;     // throws SyntaxError: Unexpected number

• To access the properties with these special names, use the square brackets property accessor (which is described in the next section):

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};

weirdObject['prop-3']; // => 'three'
weirdObject[3];        // => 'three'

2. Square brackets property accessor:

-expression[expression]

const property = 'name';
const hero = {
  name: 'Batman'
};

// Square brackets property accessor:
hero['name'];   // => 'Batman'
hero[property]; // => 'Batman'

3. Object destructuring:

• const { identifier } = expression;

const hero = {
  name: 'Batman'
};

// Object destructuring:
const { name } = hero;name; // => 'Batman'

Note that you can extract as many properties as you'd like: const { identifier1, identifier2, .., identifierN } = expression;