Расширение объектных литералов JavaScript

В этом руководстве вы узнаете о расширениях синтаксиса литерала объекта 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']();