Вы слышали о ECMAScript 6? Узнайте, что нового в JavaScript ES6 (часть 2)

В моем предыдущем посте я объяснил, что такое присваивание деструктурирования, расширенные свойства объекта, строки шаблона и переменные с областью действия блока.

В этом посте мы обнаружим еще 4 функции, которые были включены в ECMAScript 6.

  • Стрелочные функции
  • Классы
  • Расширенная обработка параметров
  • Новые встроенные методы

Стрелочные функции

Стрелочные функции (также называемые «функциями толстых стрелок») — это новый синтаксис для более короткого написания функций. Это одна из самых популярных функций в ES6.

Важно отметить, что стрелочные функции анонимны (у них нет имен). Это означает, что их будет сложно отлаживать, и они не могут ссылаться на самих себя. Но все же это очень удобный способ написания функций.

Давайте посмотрим, как работают стрелочные функции на примере.

Вот как пишутся функции до ES6

И это с использованием стрелочных функций ES6.

Как вы можете заметить, объявление функции короче и может быть записано только в одну строку. Но есть некоторые варианты, которые вы, возможно, захотите узнать.

Отчет о возврате

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

Когда вам нужно написать блок, если присутствуют фигурные скобки и вам нужно вернуть значение, вам всегда нужно писать и return.

Параметры в скобках

Скобки можно опустить, если имеется только один параметр.

Возвращать объекты

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

Лексическое это

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

Перед привязкой ES6 в этом примере для работы требовалось это. В противном случае значение по умолчанию было бы неопределенным.

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

Классы

Классы JavaScript представлены в ES6 и представляют собой синтаксическое улучшение существующего наследования на основе прототипов.

Можно сказать, что классы в JavaScript очень похожи на функции, но есть одно важное отличие. Функции поднимаются, а классы — нет. Это означает, что вам нужно объявить класс перед доступом к нему. Тело класса выполняется в строгом режиме.

Итак, давайте посмотрим, как реализован прототип и как реализован класс.

Класс Person содержит

  • прототип метода с именем concatNameSurname()
  • 2 функции-получателя get fullName()и get Gender()
  • функция установки set Gender(g)
  • конструктор: это специальный метод для создания и инициализации объекта, созданного с помощью класса. Этот метод вызывается при создании экземпляра класса с использованием ключевого слова new. В классе может быть только один метод конструктора. Будет выдана синтаксическая ошибка, если класс содержит более одного вхождения метода конструктора.

Статические методы

Классы позволяют нам определять статические методы, записывая ключевое слово static. Статические методы вызываются без создания экземпляра их класса. Если вы попытаетесь позвонить из экземпляра класса, вы получите сообщение об ошибке.

Наследование

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

  • Ключевое слово super используется для вызова соответствующих методов суперкласса. Это одно из преимуществ по сравнению с наследованием на основе прототипов. В этом примере конструктор клиента использует ключевое слово super для ссылки на конструктор человека (отцовский класс).
  • Метод sayHello() наследуется от человека.
  • Метод allData() переопределен, поэтому у него есть две разные реализации: одна для пользователя, а другая для клиента.

Расширенная обработка параметров

Оператор распространения:распространяет элементы итерируемой коллекции (массивы или строки) на литеральные элементы и параметры функции.

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

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

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

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

Оператор распространения: создание копий массивов или объектов

  • Создайте копию массива с помощью оператора распространения.

Важно отметить, что синтаксис расширения эффективно углубляется на один уровень при копировании массива.

  • Создать копию объекта с помощью оператора распространения

Но как и массивы, при копировании объекта с помощью оператора распространения вложенные объекты являются только ссылками.

Оператор спреда: создание массивов с помощью оператора спреда со строками.

Оператор Spread: объединение массивов и объектов

  • массивы
  • объекты

Оператор отдыха

Синтаксис Rest выглядит точно так же, как синтаксис расширения, но используется для деструктурирования массивов и объектов. В некотором смысле, синтаксис rest противоположен синтаксису распространения: распространение «расширяет» массив на его элементы, в то время как отдых собирает несколько элементов и «конденсирует» их в один элемент.

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

До ECMAScript 6 иногда, когда мы передавали параметру undefined, потому что внутри функции была логика заменять undefined значением по умолчанию.

Теперь можно определить значения по умолчанию для каждого параметра, рядом с ними используя =. Это не позволяет нам писать логику присваивания внутри, что делает нашу функцию короче и читабельнее.

Новые встроенные методы

В ECMAScript 6 были введены новые встроенные методы. Эти новые методы направлены на упрощение и стандартизацию некоторых знакомых сценариев, с которыми разработчики сталкиваются при работе с типами данных JavaScript. Вот их список, классифицированный по типам.

Массив:

  • Array.prototype.find(обратный вызов)
  • Array.prototype.findIndex(обратный вызов)

Строка:

  • string.prototype.startsWith (строка поиска, позиция)
  • string.prototype.endsWith (строка поиска, длина)
  • string.prototype.includes(searchString, position)

Число

  • Число.прототип.isNaN(значение)

Математика

  • Math.trunc(n)
  • Мат.знак(n)

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

Array.prototype.find(callback):этот метод выполняет итерацию по массиву и возвращает первый элемент, который приводит к тому, что данный обратный вызов возвращает значение true.

  • Он будет принимать функцию обратного вызова в качестве параметра.
  • Функция обратного вызова принимает объект в качестве параметра (который будет элементом массива [i]), который должен быть оценен в функции.
  • Функция обратного вызова должна оценивать, соответствует ли параметр условию, и возвращать значение true или false.
  • Если в условии обратного вызова нет элемента, оцененного как истина, то метод find вернет undefined

Важно отметить, что array.find() отличается от array.filter(), так как фильтр возвращает массив со всеми элементами, которые заставляют данный обратный вызов возвращать true, в то время как find() возвращает только первое вхождение.

Array.prototype.findIndex(callback):этот метод работает аналогично find, но вместо того, чтобы возвращать объект, из-за которого данный обратный вызов возвращает true, он возвращает индекс объекта.

  • Он будет принимать функцию обратного вызова в качестве параметра.
  • Функция обратного вызова принимает объект в качестве параметра (который будет элементом массива [i]), который должен быть оценен в функции.
  • Функция обратного вызова должна оценивать, соответствует ли параметр условию, и возвращать значение true или false.
  • Если в условии обратного вызова нет элементов, оцененных как истинные, метод findIndex вернет значение -1.

string.prototype.startsWith(searchString, position): этот метод определяет, начинается ли строка со строки, переданной в качестве параметра, или нет.

  • это чувствительно к регистру.
  • Параметр положения является необязательным. Это позиция в этой строке, с которой начинается поиск searchString, по умолчанию равна 0.
  • Возвращает true, если строка начинается со строки, переданной в качестве параметра, или false, если нет.

string.prototype.endsWith(searchString, length): этот метод определяет, заканчивается ли строка строкой, переданной в качестве параметра, или нет.

  • это чувствительно к регистру.
  • Параметр длины является необязательным. Если он предусмотрен, он используется для обрезки струны в этом месте. Если опущено, значением по умолчанию является длина строки
  • Возвращает true, если строка заканчивается строкой, переданной в качестве параметра, или false, если нет.

string.prototype.includes(searchString, position): этот метод позволяет определить, включает ли строка другую строку.

  • это чувствительно к регистру.
  • Параметр положения является необязательным. Это позиция в этой строке, с которой начинается поиск searchString, по умолчанию равна 0.
  • Возвращает true, если строка содержит строку, переданную в качестве параметра, или false, если нет.

Number.prototype.isNaN(value): этот метод возвращает true, если значение, переданное в качестве параметра, является числом и является NaN, и false, если нет.

Math.trunc(n): усекает число с плавающей запятой до его целой части, полностью удаляя дробную часть.

  • trunc() – это статический метод Math.
  • если значение, переданное в качестве параметра, не является числом, JavaScript попытается преобразовать его в число. Если его можно преобразовать в число, то он вернет свою целую часть, иначе он вернет NaN.

Math.sign(n):эта функция возвращает статический метод Math:

  • 1, если значение, переданное в качестве параметра, положительное.
  • 0, если значение, переданное в качестве параметра, равно 0
  • -0, если значение, переданное в качестве параметра, равно -0
  • -1, если значение, переданное в качестве параметра, отрицательное

Поскольку Math.trunc(), Math.sign()пытается преобразовать значение, переданное в качестве параметра, в число, если это не число.

В следующем посте я расскажу об итераторах и операторе for…of, генераторах и обещаниях. Быть в курсе…

Источники

Дополнительные сообщения в той же серии

Хотите узнать больше? Вам нужна наша помощь? Свяжитесь с нами!
www.quadiontech.com