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

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

В коде:

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

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

// vs. 
var x = foo.bar;

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

Ответ 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]);
}

Roundup:

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

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

И это вызывает опасный "ожидаемый indentifier" (по крайней мере, на IE8 на windows xp, я не пробовал другие среды). Простое исправление заключается в том, чтобы переключиться на запись в скобках:

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

Ответ 4

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

Ответ 5

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

window['parent']['func']

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

window.['parent.func']

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

window['parent']['func'] 

или

window.parent.func 

для доступа к ней

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

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

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

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

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

Ответ 9

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

  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
    

Ответ 10

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

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

var a = { 1 : 3 };

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

Ответ 11

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

Ответ 12

Пример сбоя точечной записи

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

Ответ 13

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