В этом руководстве вы узнаете о расширениях синтаксиса литерала объекта JavaScript в ES6, которые делают ваш код чище и гибче.
Литерал объекта — один из самых популярных шаблонов для создания объектов в JavaScript из-за его простоты. ES6 делает объектный литерал более кратким и мощным за счет расширения синтаксиса.
Сокращение инициализатора свойства объекта
До ES6 литерал объекта представлял собой набор пар имя-значение. Например:
function createMachine(name, status) { return { name: name, status: status }; }
Функция createMachine()
принимает два аргумента name
и status
и возвращает литерал нового объекта с двумя свойствами: name
и status
.
Свойства name
и status
принимают значения параметров name
и status
. Этот синтаксис выглядит избыточным, поскольку name
и status
упоминаются дважды как в имени, так и в значении свойств.
ES6 позволяет устранить дублирование, когда свойство объекта совпадает с именем локальной переменной, включив имя без двоеточия и значения.
Например, вы можете переписать createMachine()
в ES6 следующим образом:
function createMachine(name, status) { return { name, status }; }
Внутри, когда свойство литерала объекта имеет только имя, механизм JavaScript ищет переменную с таким же именем в окружающей области. Если движок JavaScript может его найти, он присваивает свойству значение переменной.
В этом примере механизм JavaScript присваивает значения свойств name
и status
аргументам name
и status
.
Точно так же вы можете создать литерал объекта из локальных переменных, как показано в следующем примере:
let name = 'Computer', status = 'On'; let machine = { name, status };
Имя вычисляемого свойства
До ES6 вы могли использовать квадратные скобки( []
), чтобы включить вычисляемые имена свойств для свойств объектов.
Квадратные скобки позволяют использовать строковые литералы и переменные в качестве имен свойств.
См. следующий пример:
let name = 'machine name'; let machine = { [name] : 'server', 'machine hours': 10000 }; console.log(machine[name]); // server console.log(machine['machine hours']); // 10000
Переменная name
была инициализирована значением 'machine name'
. Поскольку оба свойства объекта machine
содержат пробел, вы можете ссылаться на них только с помощью квадратных скобок.
В ES6 вычисляемое имя свойства является частью синтаксиса литерала объекта и использует нотацию с квадратными скобками.
Когда имя свойства помещается в квадратные скобки, механизм JavaScript оценивает его как строку. Это означает, что вы можете использовать выражение в качестве имени свойства. Например:
let prefix = 'machine'; let machine = { [prefix + ' name'] : 'server', [prefix + ' hours'] : 10000 }; console.log(machine['machine name']); // server console.log(machine['machine hours']); // 10000
Свойства объекта machine
оцениваются как 'machine name'
и 'machine hours'
, поэтому вы можете ссылаться на них как на свойства объекта machine
.
Краткий синтаксис метода
До ES6 при определении метода для литерала объекта вам необходимо указать имя и полное определение функции, как показано в следующем примере:
let server = { name: "Server", restart: function() { console.log("The" + this.name + " is restarting..."); } };
ES6 делает синтаксис для создания литерала метода объекта более лаконичным, удаляя двоеточие(:) и ключевое слово function
.
В следующем примере указанный выше объект server
переписывается с использованием синтаксиса ES6:
let server = { name: 'Server', restart() { console.log("The" + this.name + " is restarting..."); } };
Этот сокращенный синтаксис также известен как краткий синтаксис метода. Допустимо наличие пробелов в имени свойства. Например:
let server = { name: 'Server', restart() { console.log("The " + this.name + " is restarting..."); }, 'starting up' () { console.log("The " + this.name + " is starting up!"); } }; server['starting up']();
В этом примере метод 'starting up'
содержит пробелы в своем имени. Для вызова метода используется следующий синтаксис:
object_name['property name']();