Возможности ES6 в JavaScript

Es6 или также известный как EcamScript2015 привносит множество интересных и многообещающих функций в старый добрый JavaScript. К вашему сведению: ECMAScript - это спецификация языка. JavaScript - это реализация этого языка.

Es6 предлагает много многообещающих функций, таких как стрелочная функция, строка шаблона, const, let и многие другие. Давайте начнем с простых для понимания функций, а затем перейдем к более сложным функциям.

const и let

const (Константы) имеют блочную область видимости (доступны только в локальной области). Вы не можете переназначить значение переменной const, но свойства const могут быть изменены, например

>> const a = {
namv : "Jhon Doe"
}
>> a = {  // this not allowed
name : "Jen Doe"
}
>> a.name = "Jen Doe" // this allowed

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

Строки шаблона

Строка шаблона или литералы шаблона заключаются в `(обратная галочка). Вы можете вставлять переменные в строку шаблона, просто окружая переменную ${}, многострочными строками и многими другими функциями, но, чтобы не усложнять это руководство для начинающих, я не буду подробно останавливаться на каждой функции шаблонных строк, вместо этого давайте разберемся с большинством функций с помощью сравнение обычной строки со строкой шаблона.

let a = 2
let b = 3
String old = "two plus three is : \n" + (a+b)
>> two plus three is :
>> 5
String new = `two plus three is :
              $(a+b)`
>>two plus three is :
>>5

Для получения дополнительной информации о шаблонных строках перейдите по ссылке this.

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

Стрелочные функции - это более быстрый и простой способ написать некоторые обычные функции.

например для анонимной функции

function(e){ 
console.log(e)
return 1
}           
(e) => { // same as above
console.log(e)
return 1
}

названная функция

const fun1 = function(name){
console.log(`Hello ${name}`)
}
const fun2 = (name) {
console.log(`Hello ${name}`)
}
>>fun1("Jhon")
>>Jhon
>>fun2("Jhon")
>>Jhon

Аргумент по умолчанию

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

const add = (a, b=5) =>{
      console.log(a+b);
}
>>add(3,4)
>>7
>>add(3)
>>8

Импорт и экспорт

Импорт-экспорт важнее там, где важна модульность. Обычный синтаксис импорта - import module from 'path/to/module'. Точно так же вы можете экспортировать любой модуль. давайте возьмем пример для более ясного понимания. Предположим, есть два файла: один - sum.js, содержащий метод, возвращающий сумму двух чисел, а другой - это index.js, где мы хотим суммировать два числа.

---------------------------sum.js-----------------------------------export default function sum(a,b){
 return a+b
}
---------------------------index.js---------------------------------import sum from './sum' // no need to provide format of file
console.log(sum(4,5))
---------------------------console----------------------------------
>>9

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

Класс

Классы в JavaScript - это не что иное, как «специальные функции». Он не вводит новую объектно-ориентированную модель наследования в JavaScript. Процитируя блог MDN, «классы - это в первую очередь синтаксический сахар по сравнению с существующим наследованием на основе прототипов в JavaScript». Класс придает вашему коду красивую структуру и сохраняет порядок.

-------------------------Class Declaration-------------------------
class Person{
   constructor(name,age){ 
    this.name = name
    this.gender = gender 
    this.age = age
   }
}
const Jhon = new Person("Jhon Doe", "Male", 30)
console.log(Jhon.age) // 30
Jhon.age = 25
console.log(Jhon.age) // 25

Ключевое слово Extend используется для наследования.

class Animal{
....
}
class Dog extends Animal{
....
}

Обещания

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

const myFirstPromise = new Promise((resolve, reject) => {
  // do something asynchronous which eventually calls either:
  //
  //   resolve(someValue); // fulfilled
  // or
  //   reject("failure reason"); // rejected
});
function myAsyncFunction(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

Вот - пример кода ожидания Promise. Он ждет 5 секунд, чтобы запустить асинхронный код.

Это все, ребята. Мы не рассмотрели многие функции ES6, чтобы не усложнять задачу. Вы всегда можете найти больше возможностей ES6 в блогах MDN.

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