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

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

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

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

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

window['parent']['func']

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

window.['parent.func']

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

window['parent']['func'] 

или

window.parent.func 

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

Два наиболее распространенных способа доступа к свойствам в 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"].

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

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

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

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

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

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

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

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

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

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

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

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
   

Случай, когда нотация [] полезна:

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

var a = { 1 : 3 };

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

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

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

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

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

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

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

Запись через точку всегда предпочтительна. При использовании некоторого "более умного" IDE или текстового редактора он покажет неопределенные имена от того объекта. Используйте нотацию скобок только, когда у Вас будет имя с подобными тире или чем-то недопустимым подобным. И также если имя хранится в переменной.

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

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "