ES6: что нового в новой версии JavaScript. Часть 2

14.01.2016

Продолжим обзор новых возможностей, добавленных в ECMAScript 6.

Math

Несколько новых методов появились у объекта Math. В частности:

  • Math.sign возвращает знак числа как 1, −1 или 0.
  • Math.trunc возвращает целую часть числа.
  • Math.cbrt возвращает кубический корень числа.

Math.sign(5); // 1
Math.sign(-9); // -1

Math.trunc(5.9); // 5
Math.trunc(5.123); // 5

Math.cbrt(64); // 4

Оператор распространения (Spread Operator)

Оператор распространения помогает представить массив или любой итерируемый объект в виде списка элементов. Следующий пример наглядно демонстрирует работу этого оператора:


let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...

Оператор распространения крайне полезен при передаче параметров в функцию, например:


let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {
  // x = 1, y = 2, z = 4
}

// ES5 equivalent:
doSomething.apply(null, values);

Использование оператора распространения избавляет нас от необходимости применять fn.apply(), как в примере выше. Этот синтаксис гораздо более гибкий, поскольку оператор распространения может использоваться перед любым аргументов функции:


let values = [2, 4];
doSomething(1, ...values);

Также он может быть применен к любому итерируемому объекту, например к коллекции NodeList:


let form = document.querySelector('#my-form'),
     inputs = form.querySelectorAll('input'),
     selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

Деструктуризация

Деструктуризация предоставляет удобный способ получения данных из объектов и массивов. Рассмотрим пример с массивом:


let [x, y] = [1, 2]; // x = 1, y = 2

// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];

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


let x = 1,
    y = 2;

[x, y] = [y, x]; // x = 2, y = 1

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


let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2

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


let obj = {x: 1, y: 2};
let {x: a, y: b} = obj; // a = 1, b = 2

Другой интересный шаблон использования деструктуризации — возврат нескольких значений из функции:


function doSomething() {
   return [1, 2]
}

let [x, y] = doSomething(); // x = 1, y = 2

Деструктуризация может использоваться для присвоения аргументам функции значений по умолчанию.


function doSomething({y = 1, z = 0}) {
   console.log(y, z);
}
doSomething({y: 2});

Параметры

Значения по умолчанию

В ES6 стало возможным указание значений по умолчанию для аргументов функции.


function doSomething(x, y = 2) {
   return x * y;
}

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

Выглядит неплохо, правда? Аналогичный функционал на ES5:


function doSomething(x, y) {
    y = y === undefined ? 2 : y;
    return x * y;
}

Rest-параметры

Rest-параметры очень похожи на оператор распространения. Они также используют многоточие и позволяют передать в функцию произвольное количество параметров:


function doSomething(x, ...remaining) {
   return x * remaining.length;
}

doSomething(5, 0, 0, 0); // 15
Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться