Доступ до властивостей 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", значення [x] намагається оцінити вираз x і використовує результат як ім'я властивості.

Отже, якщо ви знаєте, що майно, яке вас цікавить, називається "довжина", ви кажете value.length. Якщо ви хочете витягти властивість, назване значенням, яке міститься в змінній i, ви говоритеvalue[i] . І тому , що імена властивостей може бути будь-який рядком, якщо ви хочете отримати доступ до властивості з ім'ям “2”або “John Doe”, ви повинні використовувати квадратні дужки: value[2] or value["John Doe"]. Це так, навіть якщо ви заздалегідь знаєте точну назву властивості, оскільки жодне не “2” nor “John Doe”є дійсним іменем змінної, і тому не можна отримати доступ через позначення крапок.

У разі масивів

Елементи в масиві зберігаються у властивостях. Оскільки назви цих властивостей є числами, і нам часто потрібно отримувати їх ім’я зі змінної, для доступу до них нам доводиться використовувати синтаксис дужок. Властивість довжини масиву говорить нам, скільки елементів він містить. Це ім'я властивості є дійсним ім'ям змінної, і ми знаємо її ім'я заздалегідь, тому, щоб знайти довжину масиву, ви зазвичай пишете, 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;

Крім цього, я думаю, це лише питання смаку. IMHO, позначення крапки коротше, і це робить більш очевидним, що це властивість, а не елемент масиву (хоча, звичайно, 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нього, він буде через помилку, оскільки він очікує рядок там.

Позначення крапки завжди є кращим. Якщо ви використовуєте якийсь "розумніший" 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