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

Но JavaScript действительно пошел вверх, когда в 2015 году был представлен ES6.

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

Итак, приготовьтесь, ребята, поездка будет наполнена азартом и десятками загрузок JavaScript ES6.

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

Синтаксис для создания стрелочной функции аналогичен синтаксису обычной функции с некоторыми отличиями.

Первое отличие состоит в том, что ключевое слово «функция» больше не требуется.
Второе отличие заключается в добавлении стрелки «=› »между аргументами и телом функции.

Пример ::

const printMyName = (name) => {
return `My name is ${name}`
}
console.log(printMyName('Bhavishya')) // prints Bhavishya

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

Давайте сделаем приведенный выше код с сокращенным синтаксисом,

const printMyName = name => `My name is ${name}`
console.log(printMyName('Bhavishya')) // prints "Bhavishya"

Стрелочные функции не связывают this ключевое слово.

Обещания

Обещание - это альтернатива функциям обратного вызова, которая может упростить управление нашим асинхронным кодом.

Вы можете создать обещание с помощью оператора new.
Он принимает два параметра reslove and reject.
У обещания может быть одно из трех состояний:
1. ожидание
2. выполнено
3. отклонено

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Example data')
}, 2000)
})

но что после создания promise мы должны что-то сделать с данными, когда обещание выполнено или отклонено путем вызова then в обещании.

// Using myPromise from above
myPromise.then((data) => {
console.log(data) // prints "Example data"
}, (err) => {
console.log(err)
})

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

Генераторы

Генераторы - это особый вид функций с возможностью приостанавливать себя и возобновлять работу позже, позволяя тем временем работать другому коду.

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

Все это делается с помощью одного ключевого слова: yield. Когда генератор содержит это ключевое слово, выполнение останавливается.

Генератор может содержать много yield ключевых слов, таким образом останавливаясь несколько раз, и идентифицируется по ключевому слову *function.

let и const

var традиционно ограничен функцией.

let - это новое объявление переменной, имеющее область видимости блока.

const аналогичен let, но неизменен.

для более подробного объяснения вы можете обратиться к моей статье о var, let и const.



JavaScript ES6: let & const и почему вы должны использовать их вместо var.
ES6 относится к версии 6 языка программирования ECMA Script. ECMA Script - это стандартное название для JavaScript. medium.com



Шаблонные литералы

Использовать шаблонные литералы очень просто, и это позволяет избежать путаницы со знаком «+» для объединения ваших строк или кода javaScript.

Мы используем обратные кавычки для инициализации литерала шаблона, и всякий раз, когда мы хотим написать JS, мы используем синтаксис $ {javaScript code}.

Это можно понять на примере,

//function with no template literals
const myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return name + ' ' + 'loves' + ' ' + hobby
}
myHobby() // "Bhavishya loves travelling"

Теперь давайте посмотрим на ту же функцию с шаблонными литералами,

//function with template literals
const myHobby = () => {
let name = "Bhavishya"
let hobby = "Travelling"
return `${name} loves ${hobby}`
}
myHobby() // "Bhavishya loves travelling"

Параметры по умолчанию

Теперь мы можем назначить параметры по умолчанию для аргументов, переданных в функцию.

var myfun = (name = 'Bhavishya', age = 24) => {
console.log(name,age)
}
myfun() // Bhavishya 24

Разрушение массивов и объектов

Уничтожение упрощает присвоение массивов и объектов другим переменным.

Старый синтаксис:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}
let name = obj.name;
let age = obj.age;
let country = obj.country
console.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

С синтаксисом ES6:

const obj = {
name:"Bhavishya",
age:24,
country:"India"
}
let {name,age,country} = obj
console.log(name) // "Bhavishya"
console.log(age) // 24
console.log(country) // "India"

Это похоже на массивы, просто нужно заменить фигурные скобки квадратными.

const arr = ["Bhavishya",24,"India"];
let [name,age,country] = arr
console.log(name) // "Bhavishya"
console.log(age) //24
console.log(country) // "India"

Параметр Rest и оператор Spread

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

Давайте посмотрим на этот код ниже,

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a); 
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs); 
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]

Здесь функция myFun утешает параметры, переданные в функцию.
...manyMoreArgs может принимать столько аргументов, сколько передано, и возвращается в виде массива аргументов.

Оператор распространения имеет тот же синтаксис, что и параметр rest, но оператор распространения принимает сам массив, а не только аргументы. Мы можем использовать параметр Spread для получения значений массива.

const arr=['I','am','Bhavishya','Hi','Friends','How are you?'];

const Func=(...array)=>{
  return array;
}

console.log(Func(arr));

//output  ['I','am','Bhavishya','Hi','Friends','How are you?']

Классы

Классы были представлены в JavaScript в 2015 году.
Классы являются ядром объектно-ориентированного программирования (ООП). Они делают ваш код безопасным и инкапсулированным. Использование классов придает вашему коду красивую структуру и поддерживает его организованность.

//Syntax
class myClass {
  constructor() {
  }
}

Классы объявляются с ключевым словом class перед именем класса.

Давайте посмотрим на пример,

Мы используем class методы и создаем новый экземпляр класса с ключевым словом new.

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

Святая Богородица, так много новых функций, которые можно переварить в одной статье.
Но подождите, есть еще кое-что о ES6🤣, все же вам нужно знать еще несколько дополнений, чтобы полностью убить и называть себя ES6 SLAYER !!!

Карта и набор

Map и Set (и их соответствующие сборщики мусора WeakMap и WeakSet) являются официальными реализациями двух очень популярных данных. конструкции.

Новые методы String

У любого строкового значения появились новые методы экземпляра:

  • repeat() повторяет строки указанное количество раз: 'Ho'.repeat(3) //HoHoHo

Новые методы объекта

ES6 представил несколько статических методов в пространстве имен Object:

  • Object.is() определяет, являются ли два значения одним и тем же значением
  • Object.assign() используется для поверхностного копирования объекта
  • Object.setPrototypeOf устанавливает прототип объекта

Итак, готово Спасибо, ребята !!!
Если вы прочитали мою статью, дайте мне знать, есть ли у вас какие-либо вопросы относительно статьи или концепций, которые я объяснил, написав ответ на Нижний.

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

Https://twitter.com/bhavishya2107

СПАСИБО !!!

ЦЕНИВАЮТСЯ КЛАПАНЫ🤗

ПРОДОЛЖАЙТЕ УЧИТЬСЯ, КОДИРОВАТЬ😎 И ДЕЛИТЬСЯ СВОИМИ ЗНАНИЯМИ🤩

Ссылка: