Сравнение способов доступа к свойствам в JavaScript: . vs []
Быстрый ответ
Для обращения к статическим и верно именованным свойствам объекта в JavaScript предпочтительнее использовать точечную нотацию (object.property
). Однако, при работе с динамическими свойствами или названиями, которые содержат специальные символы, следует применять нотацию с квадратными скобками (object['property']
). Рассмотрим это на примере:
let obj = { a: 1, 'b c': 2 };
console.log(obj.a); // точечная нотация: имя свойства состоит только из допустимых символов
console.log(obj['b c']); // нотация с квадратными скобками: имя содержит пробел
Выбор между точечной нотацией и нотацией с квадратными скобками также определяется стилистическими требованиями к оформлению кода и его особенностями.
Учет правил именования свойств
Использование зарезервированных ключевых слов
При использовании зарезервированных ключевых слов с точечной нотацией могут появляться ошибки:
let obj = { class: 'A' }; // SyntaxError: 'class' не допускается
В этом случае следует использовать нотацию с квадратными скобками:
let obj = { 'class': 'A' };
console.log(obj['class']); // Выводит 'A': в скобках проблем не возникнет
Работа с числовыми ключами
Точечная нотация не предназначена для работы с числовыми ключами:
let arrayLikeObj = { 0 : 'a', 1 : 'b' };
console.log(arrayLikeObj.0); // SyntaxError: точечная нотация не предусматривает использование чисел
Нотация с квадратными скобками позволяет эффективно обходить это ограничение:
console.log(arrayLikeObj[0]); // Выводит 'a': скобки универсальны
Обращение к динамическим именам свойств и выполнение выражений
Использование переменных в качестве ключей
Для свойств с динамическими именами незаменима нотация в скобках:
let propertyName = 'username';
let user = { [propertyName]: 'Alex123' };
console.log(user.username); // Выводит 'Alex123': используем переменную как ключ
Применение выражений для имен свойств
Скобки позволяют вставлять сложные выражения:
let suffix = 'name';
console.log(user['user' + suffix]); // Выводит 'Alex123': используем конкатенацию в скобках
Использование специальных символов и пробелов в именах свойств
Специальные символы и пробелы в именах свойств несовместимы с точечной нотацией. Нотация с квадратными скобками решает эту проблему:
let peculiarObj = {
'hello-world': true,
'data-123': 'xyz'
};
console.log(peculiarObj['hello-world']); // Выводит true: скобки позволяют всё!
Генерация кода и работы со специфическими случаями
Генераторы скриптов и динамический код
В генераторах кода и инструментах автоматизации квадратные скобки наиболее полезны благодаря их универсальности и совместимости.
Устаревший код и хитрости для IE8
При работе с устаревшим кодом, особенно для IE8, где возникают проблемы с зарезервированными словами, применяется нотация в скобках:
let oldIEObject = {
'class': 'old-school',
'default': 'value' // 'default' – зарезервированное слово
};
// Для IE8 подходят скобки:
console.log(oldIEObject['class']); // Выводит 'old-school'
console.log(oldIEObject['default']);
Поддержание читаемости и доступности кода
Нотация с квадратными скобками требует большего внимания при написании, но она обеспечивает доступность использования в сложных случаях. При уверенности в корректности имени свойства и его соответствии правилам именования, точечная нотация делает код более читаемым:
let car = {
make: 'Ford',
model: 'Mustang'
};
console.log(car.make); // Чисто и ясно
С другой стороны, использование скобок может казаться менее интуитивно понятным:
console.log(car['model']); // Технически верно, но субъективно труднее воспринимается
Визуализация
Вот сравнение основных отличий между точечной нотацией (obj.property
) и нотацией с квадратными скобками (obj["property"]
):
Задача | Точечная нотация 🔑 | Нотация с квадратными скобками 🛠️
----------------|-------------------|---------------------
Простой доступ | ✔️ Прямая работа с свойствами | ❌ Требуется создать ключ
Переменные в ключах | ❌ Недоступны | ✔️ Поддерживаются
Специальные символы и пробелы| ❌ Запрещены | ✔️ Допускаются
Вычисление свойства | ❌ Ограничено | ✔️ Без ограничений
Переименование | ❌ Фиксируется в коде | ✔️ Может быть динамическим
Точечная нотация — простой и надежный ключ для работы со свойствами вашего объекта. Нотация в квадратных скобках — универсальный инструмент, который может показаться излишним, но он готов к любым вызовам.
// Точечная нотация: Как хозяин дома
house.door = "Open Sesame"
// Нотация в скобках: Как эксперт-взломщик
house["any" + "Door" + 123] = "Let me in"
Полезные сценарии использования каждой из нотаций
Обращение к элементам массива
Используйте квадратные скобки при обращении к элементам массива, особенно когда индексы изменяются динамически:
let colors = ['red', 'green', 'blue'];
let index = 2;
console.log(colors[index]); // Выводит 'blue': индексы динамичны
Перебор свойств
Для итерации по свойствам объекта с использованием переменных следует использовать скобки:
for (let key in obj) {
console.log(obj[key]); // пройдемся по свойствам, как по тропинке
}
Работа с JSON
При работе с JSON обращение к свойствам через скобки является стандартным подходом, так как свойства воспринимаются как строки:
let jsonData = '{"name": "John", "age": 31}';
let parsedData = JSON.parse(jsonData);
console.log(parsedData['age']); // Выводит 31: извлекаем данные из JSON через скобки