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

Question

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

В коде:

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

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

// vs. 
var x = foo.bar;

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

Answer 1

(Источник здесь .)

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

window['parent']['func']

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

window.['parent.func']

. Мы можем использовать:получить к нему доступ

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

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
   

Answer 9

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

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

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

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

Answer 10

Случай, когда [] примечание полезно:

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

var a = { 1 : 3 };

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