Шесть ловких трюков ES6
JavaScript

Шесть ловких трюков ES6

Оригинал: Six nifty ES6 tricks, Dr. Axel Rauschmayer

В этой статье я покажу шесть трюков, доступных благодаря новым возможностям ES6. В конце каждого раздела я даю ссылки на соответствующий материал из моей книги Exploring ES6 (бесплатно доступна для чтения online).

1. Гарантированная обязательность параметра с помощью параметра по умолчанию

Значения параметров по умолчанию в ES6 вычисляются только тогда, когда действительно используются. Это позволяет нам обеспечить обязательность параметра:


/**
 * Вызовется, если параметр не передан
 * и используется параметр по умолчанию.
 */
function mandatory() {
    throw new Error('Missing parameter');
}
function foo(mustBeProvided = mandatory()) {
    return mustBeProvided;
}

Вызов функции mandatory() делает параметр mustByProvided обязательным. Пример:


> foo()
Error: Missing parameter
> foo(123)
123

Больше информации:

2. Получение индексов и значений массива в цикле for-of

Метод forEach позволяет пройтись по списку элементов массива. Также он позволяет получить индекс каждого элемента, если это необходимо:


var arr = ['a', 'b', 'c'];
arr.forEach(function (elem, index) {
    console.log('index = '+index+', elem = '+elem);
});
// Output:
// index = 0, elem = a
// index = 1, elem = b
// index = 2, elem = c

В ES6 цикл for-of поддерживает ES6 итерации (итерируемые структуры данных и итераторы) и деструктуризацию. Если скомбинировать деструктуризацию и метод массива entries(), получим:


const arr = ['a', 'b', 'c'];
for (const [index, elem] of arr.entries()) {
    console.log(`index = ${index}, elem = ${elem}`);
}

Метод arr.entries() возвращает итерируемые пары индекс-элемент. Деструктуризация [index, elem] дает доступ к каждому элементу пары. Параметр функции console.log называется литералом шаблона, который дает строковую интерполяцию в JavaScript.

Больше информации:

Некоторые кодовые единицы Unicode (грубо говоря, символы) содержат два символа JavaScript.

Строки поддерживают ES6 итерацию. Если итерировать по строке, получим кодовые единицы (один или два символа JavaScript). Например:


for (const ch of 'x\uD83D\uDE80y') {
    console.log(ch.length);
}
// Output:
// 1
// 2
// 1

Это дает возможность посчитать количество кодовых единиц в строке:


> [...'x\uD83D\uDE80y'].length
3

Оператор расширения (...) добавляет элементы операнда в массив.

Больше информации:

4. Обмен значений переменных с помощью деструктуризации

Если добавить две переменные в массив, а затем деструктурировать массив в те же переменные, вы можете поменять местами их значения без необходимости использовать третью переменную.


[a, b] = [b, a];

Вполне возможно, что движки JavaScript позволят в будущем оптимизировать этот способ так, чтобы не создавался дополнительный массив.

Больше информации:

5. Простой шаблонизатор с помощью литерала шаблона

Литералы шаблонов в ES6 больше похожи на обычные строковые литералы, чем на традиционные текстовые шаблоны. Но литералы шаблона можно использовать как шаблоны, если вернуть их из функции:


const tmpl = addrs => `
    <table>
    ${addrs.map(addr => `
        <tr><td>${addr.first}</td></tr>
        <tr><td>${addr.last}</td></tr>
    `).join('')}
    </table>
`;

Функция tmpl (стрелочная функция) принимает массив addrs, а возвращает строку. Давайте используем tmpl() с массивом data:


const data = [
    { first: '', last: 'Bond' },
    { first: 'Lars', last: '' },
];
console.log(tmpl(data));
// Output:
// <table>
//
//     <tr><td><Jane></td></tr>
//     <tr><td>Bond</td></tr>
//
//     <tr><td>Lars</td></tr>
//     <tr><td><Croft></td></tr>
//
// </table>

Больше информации:

6. Простой миксин с помощью фабрики дочерних классов

Если класс ES6 расширяет другой класс, родительский класс задается динамически, с помощью произвольного выражения (не статически с помощью идентификатора):


// Function id() simply returns its parameter
const id = x => x;
    
class Foo extends id(Object) {}

Это позволяет реализовать миксин как функцию, отображающую класс C в новый класс, наследующийся от C и имеющий подмешанные методы. Например, функции Storage и Validation, приведенные ниже, являются миксинами:


const Storage = Sup => class extends Sup {
        save(database) { ··· }
};
const Validation = Sup => class extends Sup {
    validate(schema) { ··· }
};

Их можно использовать для создания класса Employee:


class Person { ··· }
class Employee extends Storage(Validation(Person)) { ··· }

Больше информации:

Дополнительное чтение

Следующие две главы дают хороший обзор ECMAScript 6:

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться