Лучшее из современного JavaScript - дополнительные основные функции

С 2015 года JavaScript значительно улучшился.

Пользоваться им сейчас намного приятнее, чем когда-либо.

В этой статье мы рассмотрим основные функции JavaScript.

Функциональные выражения для стрелочных функций

Начиная с ES6, стрелочные функции позволяют нам создавать функции, которые короче и не привязаны к своим собственным this.

Это упрощает и упрощает создание новых функций.

Например, вместо написания:

function Button() {
  var _this = this;
  var button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    console.log('clicked');
    _this.handleClick(); 
  });
}
Button.prototype.handleClick = function () {
  //···
};

Мы создаем переменную _this и устанавливаем ее значение this вне функции, чтобы мы могли использовать ее в прослушивателе click.

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

С помощью стрелочных функций мы можем написать:

function Button() {
  const button = document.getElementById('button');
  button.addEventListener('click', () => {
    console.log('clicked');
    this.handleClick();
  });
}

Мы просто передаем функцию стрелки и можем использовать значение this из функции Button.

Нам не нужно устанавливать Button ‘s this на переменную перед ее использованием.

Стрелочные функции отлично подходят для обратных вызовов, возвращающих выражение.

Например, вместо того, чтобы писать:

var arr = [1, 2, 3];
var cubes = arr.map(function (x) { return Math.pow(x, 3) });

Мы пишем:

const arr = [1, 2, 3];
const cubes = arr.map(x => x ** 3);

Он намного короче и чище.

Множественные возвращаемые значения

С современным JavaScript мы можем легко обрабатывать несколько возвращаемых значений.

Мы можем вернуть объект или массив и преобразовать записи в переменные.

До ES6 не было назначения деструктуризации, поэтому мы должны написать что-то вроде:

var matchObj =
  /^(\d\d\d)-(\d\d\d)-(\d\d\d\d)$/
  .exec('222-112-2222');
var areaCode = matchObj[1];
var officeCode = matchObj[2];
var stationCode = matchObj[3];

С ES6 или новее мы можем написать:

const matchObj =
  /^(\d\d\d)-(\d\d\d)-(\d\d\d\d)$/
  .exec('222-112-2222');
const [_, areaCode, officeCode, stationCode] = matchObj;

Мы использовали деструктурирование для присвоения каждой записи переменной.

Это позволяет нам сэкономить много строк кода.

Несколько возвращаемых значений через объекты

Мы также можем вернуть объект и преобразовать свойства в переменные.

Например, мы можем написать:

const obj = {
  foo: 'bar'
};
const {
  writable,
  configurable
} =
Object.getOwnPropertyDescriptor(obj, 'foo');

Мы получаем свойства writable и configurable из метода getOwnPropetyDescriptor и назначаем их переменным.

С for и с forEach() по for-of

Цикл for-of может проходить через любой итерируемый объект.

Он менее универсален, чем for, но быстрее и универсален, чем forEach.

forEach доступны только с массивами и ноделистами.

Чтобы использовать цикл for, мы пишем:

var arr = ['a', 'b', 'c'];
for (var i = 0; i < arr.length; i++) {
  var letter = arr[i];
  console.log(letter);
}

С forEach мы можем написать:

var arr = ['a', 'b', 'c'];
arr.forEach(function(letter) {
  console.log(letter);
});

С помощью for-of мы можем написать:

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

Как мы видим, мы можем использовать деструктурирование с помощью цикла for-of.

Это недоступно для других петель или forEach.

Поскольку arr.entries() возвращает массив, каждая запись которого является массивом с индексом и записью, мы можем получить их обе с помощью деструктуризации.

Заключение

Современный JavaScript имеет отличные возможности, включая деструктуризацию и цикл for-of.

JavaScript на простом английском языке

Вы знали, что у нас есть три публикации и канал на YouTube? Найдите ссылки на все на plainenglish.io!