Доступ к свойству JavaScript: точечные обозначения или скобки?

Кроме очевидного факта, что первая форма может использовать переменную, а не просто строковый литерал, есть ли причина использовать одну над другой, и если да, то в каких случаях?

В коде:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

Контекст: я написал генератор кода, который производит эти выражения, и мне интересно, что предпочтительнее.

(Источник отсюда .)

Обозначение в квадратных скобках позволяет использовать символы, которые нельзя использовать с точечными обозначениями:

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

включая не ASCII (UTF-8) символы, как в myForm["ダ"]( больше примеров ).

Во-вторых, нотация в квадратных скобках полезна при работе с именами свойств, которые изменяются предсказуемым образом:

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

Округлять:

• Точечные обозначения быстрее пишутся и понятнее для чтения.
• Обозначение в квадратных скобках позволяет получить доступ к свойствам, содержащим специальные символы, и выбрать свойства с помощью переменных

Другим примером символов, которые нельзя использовать с точечной нотацией, являются имена свойств, которые сами содержат точку .

Например, ответ json может содержать свойство с именем bar.Baz.

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

Обозначение в скобках позволяет получить доступ к свойствам по имени, хранящемуся в переменной:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x не будет работать в этом случае.

Два наиболее распространенных способа доступа к свойствам в JavaScript - это точка и квадратные скобки. Оба имеют value.x and value[x]доступ к свойству по значению, но не обязательно к одному и тому же свойству. Разница в том, как х интерпретируется. При использовании точки, часть после точки должна быть допустимым именем переменной, и она прямо называет свойство. При использовании квадратных скобок выражение между скобками вычисляется для получения имени свойства. В то время как value.x извлекает свойство значения с именем «x», value [x] пытается вычислить выражение x и использует результат в качестве имени свойства.

Поэтому, если вы знаете, что интересующее вас свойство называется «длина», вы говорите value.length. Если вы хотите извлечь свойство, названное значением, содержащимся в переменной i, вы говорите value[i]. И потому , что имена свойств может быть любой строкой, если вы хотите получить доступ к свойству с именем “2”или “John Doe”, вы должны использовать квадратные скобки: value[2] or value["John Doe"]. Это так, даже если вы заранее знаете точное имя свойства, потому что ни одно из них не “2” nor “John Doe”является допустимым именем переменной и поэтому недоступно через точечную запись.

В случае массивов

Элементы в массиве хранятся в свойствах. Поскольку имена этих свойств являются числами, и нам часто нужно получать их имя из переменной, мы должны использовать синтаксис скобок для доступа к ним. Свойство length массива сообщает нам, сколько элементов в нем содержится. Это имя свойства является допустимым именем переменной, и мы знаем его имя заранее, поэтому, чтобы найти длину массива, вы обычно пишете, array.lengthпотому что это легче написать, чем array["length"].

Точка нотации не работает с некоторыми ключевыми словами (например, newи class) в Internet Explorer 8.

У меня был этот код:

//app.users is a hash
app.users.new = {
  // some code
}

И это вызывает страшный «ожидаемый идентификатор» (по крайней мере, в IE8 на Windows XP, я не пробовал другие среды). Простым решением для этого является переключение на обозначение в скобках:

app.users['new'] = {
  // some code
}

Будьте осторожны при использовании этих обозначений: например. если мы хотим получить доступ к функции, присутствующей в родительском окне. В IE:

window['parent']['func']

не эквивалентно

window.['parent.func']

Мы можем использовать:

window['parent']['func'] 

или

window.parent.func 

чтобы получить к нему доступ

Вообще говоря, они делают ту же работу.
Тем не менее, обозначение в скобках дает вам возможность делать то, что вы не можете делать с точечным обозначением, например

var x = elem["foo[]"]; // can't do elem.foo[];

Это может быть распространено на любое свойство, содержащее специальные символы.

Вам необходимо использовать скобки, если в именах свойств есть специальные символы:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

Кроме этого, я полагаю, это просто вопрос вкуса. ИМХО, точечная запись короче, и это делает более очевидным, что это свойство, а не элемент массива (хотя, конечно, JavaScript в любом случае не имеет ассоциативных массивов).

Вы должны использовать обозначение в квадратных скобках, когда -

1. Имя свойства номер.

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"

2. Имя свойства носит специальный характер.

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1

3. Имя свойства присваивается переменной, и вы хотите получить доступ к значению свойства по этой переменной.

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7

В скобочных обозначениях могут использоваться переменные, поэтому это полезно в двух случаях, когда точечные обозначения не будут работать:

1) Когда имена свойств определяются динамически (когда точные имена не известны до времени выполнения).

2) При использовании цикла for..in для просмотра всех свойств объекта.

источник: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Случай где [] обозначения полезны:

Если объект является динамическим и там могут быть некоторые случайные значения в ключах , как numberи []или любой другой специальный символ, например -

var a = { 1 : 3 };

Теперь, если вы попытаетесь получить доступ, как a.1это будет с ошибкой, потому что он ожидает строку там.

Точечная запись всегда предпочтительнее. Если вы используете более «умную» IDE или текстовый редактор, он покажет неопределенные имена из этого объекта. Используйте обозначения в скобках только в том случае, если у вас есть имя с похожими черточками или чем-то подобным недействительным. А также, если имя хранится в переменной.

Позвольте мне добавить еще один вариант использования записи в квадратных скобках. Если вы хотите получить доступ к свойству, скажем, x-proxyв объекте, то оно -будет интерпретировано неправильно. Это и другие случаи, такие как пробел, точка и т. Д., Где операция с точками не поможет вам. Также, если у вас есть ключ в переменной, то единственный способ получить доступ к значению ключа в объекте - это использовать скобки. Надеюсь, вы получите больше контекста.

Пример, когда точечная запись не работает

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

Имена свойств не должны мешать правилам синтаксиса javascript, чтобы вы могли иметь к ним доступ как json.property_name