Введение в ES6

Опубликовано: 5 Января, 2022

ES6 или ECMAScript 2015 - это 6- ^я версия языка программирования ECMAScript. ECMAScript - это стандартизация Javascript, выпущенная в 2015 году и впоследствии переименованная в ECMAScript 2015.

ECMAScript и Javascript разные по своей природе.

ECMAScript против Javascript

ECMAScript: это спецификация, определенная в ECMA-262 для создания языка сценариев общего назначения. Проще говоря, это стандартизация для создания языка сценариев. Она была представлена Ecma International и в основном представляет собой реализацию, с помощью которой мы узнаем, как создать язык сценариев.
Javascript: язык сценариев общего назначения, соответствующий спецификации ECMAScript. В основном это реализация, которая сообщает нам, как использовать язык сценариев.

ES6

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

«Констант» и «пусть»
До ES6 мы в основном использовали ключевое слово var всякий раз, когда мы хотели объявить переменную, но у него были серьезные проблемы, а также это не было фаворитом разработчиков, поэтому в версии ES6 мы познакомились с ключевыми словами const и let, которые позволяют нам хранить переменные. У них обоих есть свой способ хранения переменных.

const : ключевое слово const в основном используется для хранения той переменной, значение которой не будет изменяться. Рассмотрим пример, когда вы создаете веб-приложение, в котором вы хотите сохранить переменную, значение которой не будет изменяться, тогда const определенно лучший выбор для хранения этой переменной. В javascript const считается более мощной, чем var. Однажды использованная для хранения переменной, ее нельзя переназначить. Проще говоря, это неизменяемая переменная, за исключением случаев, когда она используется с объектами.

Пример :

 // Const
 const name = 'Mukul' ;
 console.log(name); // Will print 'Mukul' to the console.
 
// Trying to reassign a const variable
 name = 'Rahul' ;
 console.log(name); // Will give TypeError. 

Выход:

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

 // Object using const
 const person ={
    name: 'Mukul Latiyan' ,
    age: '21' ,
    isPlaced: true
 };
 
console.log(person.name); // 'Mukul Latiyan'
 person.name = 'Mayank' ;
 
console.log(person.name); //'Mayank' 

Выход:

Свойства объектов, объявленных с использованием ключевых слов const, изменяемы, как и в приведенном выше коде мы объявили объект person с некоторыми свойствами, такими как name, age, isPlaced . Когда мы пытались получить доступ к свойствам, все работает нормально, также когда мы меняем свойство name, оно тоже работает нормально. Следовательно, мы приходим к выводу, что свойства объекта изменчивы, даже если они объявлены с ключевым словом const.

let : В случае ключевого слова let объявленные переменные будут изменяемыми, т.е. значения могут быть изменены. Он работает аналогично ключевому слову var с некоторыми ключевыми отличиями, такими как область видимости, что делает его лучшим вариантом по сравнению с var.

 // let
 let name = 'Mukul' ;
 console.log(name); // Mukul
 
name = 'Rahul' ;
 console.log(name); // Rahul 

Выход:

Объекты тоже изменчивы. Нравиться:

 // Object using let
 let bike = {
    name : 'Ninja ZX-10R' ,
    engine: '998cc' ,
    abs : 'dual channel'
 };
 
console.log(bike.engine); // 998cc
 
bike.engine = '789cc' ;
 console.log(bike.engine); // 789cc 

Выход:

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

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

 // ES5
 function printName(name){
    console.log( 'Hello ' +name);
 }
 
printName( 'Mukul' ); // Hello Mukul 

Выход:

Вместо этого используйте следующий код:

 // ES6
 const printName = name =>{
    return `Hi ${name}`; // using template literals
 }
 console.log(printName( 'Mukul' )); // Hi Mukul
 
// We can also write the above code without
 // the return statement
 const printName1 = name => `Hi ${name}`;
 
console.log(printName1( 'Mukul' )); // Hi Mukul 

Выход:

Литерал шаблона

Шаблонные литералы - это особенность ES6, которая позволяет нам работать со строками лучше, чем в ES5 и ниже. Просто используя шаблонные литералы, мы можем улучшить читаемость кода. До ES6 мы использовали оператор '+' всякий раз, когда мы хотели объединить строки, а также когда мы хотели использовать переменную внутри строки, что определенно не является рекомендуемым методом. литералы используют обратные галочки («), а не одинарные или двойные кавычки, которые мы использовали с обычными строками.

 // ES5
 var name = 'Mukul Latiyan' ;
 console.log( 'My name is ' + name);
 
// ES6
 const name1 = 'Mukul Latiyan' ;
 console.log(`My name is ${name1}`);

Выход:

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

Разрушение в javascript в основном означает разбиение сложной структуры (объектов или массивов) на более простые части. С помощью деструктивного присваивания мы можем «распаковать» объекты массива в кучу переменных.

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

 // ES5
 const college = {
    name : 'DTU' ,
    established : '1941' ,
    isPrivate : false
 };
 
let name = college.name;
 let established = college.established;
 let isPrivate = college.isPrivate;
 
console.log(name); // DTU
 console.log(established); // 1941
 console.log(isPrivate); // false 

Выход:

Новый способ сделать это с помощью ES6:

 // ES6
 const college = {
    name : 'DTU' ,
    established : '1941' ,
    isPrivate : false
 };
 
let{name,established,isPrivate} = college;
 
console.log(name); // DTU
 console.log(established); // 1941
 console.log(isPrivate); // false 

Выход:

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

Уничтожение массива

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

 // ES6
 const arr = [ 'lionel' , 'messi' , 'barcelona' ];
 
let[value1,value2,value3] = arr;
 
console.log(value1); // lionel
 console.log(value2); // messi
 console.log(value3); // barcelona 

Выход:

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

Параметры по умолчанию позволяют заранее определить параметр, что может быть полезно в определенных сценариях. В javascript для параметра функции по умолчанию установлено значение undefined. Однако полезно установить другое значение по умолчанию. До ES6 мы использовали способ определения параметров по умолчанию путем тестирования значения параметров в теле функции по умолчанию и присвоения значения, если они не определены.

 // ES5
 function fun(a,b){
    return a+b;
 }
 
console.log(fun(2,1)); // 3
 console.log(fun(2)); // 2 + undefined is NaN(not-a-number) 

Выход:

Мы удалили эту ошибку параметра по умолчанию следующим образом:

 // ES5(improved)
 function fun(a,b){
    b = ( typeof b!== 'undefined' )?b:1;
    return a + b;
 }
 
console.log(fun(2,1)); // 3
 console.log(fun(2)); // 3 

Выход:

После ES6 мы можем просто написать:

 // ES6
 function fun(a,b=1){
    return a + b;
 }
 
console.log(fun(2,1)); // 3
 console.log(fun(2)); // 3 

Выход:

Классы

Классы - это ядро объектно-ориентированного программирования (ООП). ES6 представил классы в javascript. Классы в javascript можно использовать для создания новых объектов с помощью конструктора, каждый класс может иметь только один конструктор внутри.

 // classes in ES6
 class Vehicle{
    constructor(name,engine){
        this .name = name;
        this .engine = engine;
    }
 }
 
const bike1 = new Vehicle( 'Ninja ZX-10R' , '998cc' );
 const bike2 = new Vehicle( 'Duke' , '390cc' );
 
console.log(bike1.name); // Ninja ZX-10R
 console.log(bike2.name); // Duke 

Выход:

Параметр отдыха и оператор спреда

Параметр отдыха : синтаксис параметра rest позволяет нам представить неопределенное количество аргументов в виде массива. С помощью параметра rest функция может быть вызвана с любым количеством аргументов, независимо от того, как она была определена.

 // simple function
 function fun(a,b){
    return a + b;
 }
 
console.log(fun(1,2)); // 3
 console.log(fun(1,2,3,4,5)); // 3 

Выход:

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

 // ES6 rest parameter
 function fun(...input){
    let sum = 0;
    for (let i of input){
        sum+=i;
    }
    sum; return
 }
 
console.log(fun(1,2)); // 3
 console.log(fun(1,2,3)); // 6
 console.log(fun(1,2,3,4,5)); // 15 

Выход:

Оператор распространения : оператор распространения - это еще один оператор, предоставляемый ES6, который позволяет нам получать список параметров из массива. Рассмотрим пример, когда у нас есть список чисел, и мы возвращаем минимальное число из этого списка.
console.log(Math.min(1,2,3,-1)); // -1
Выход:
Теперь учтите, что у нас есть массив вместо списка, этот метод объекта Math выше не будет работать и вернет NaN, например:
// Without spread
let arr = [1,2,3,-1];

console.log(Math.min(arr)); // NaN
Выход:
Когда… arr используется в вызове функции, он «расширяет» итерируемый объект arr в список аргументов.
Чтобы избежать этого вывода NaN, мы можем использовать оператор распространения, как:
// Spread operator
let arr = [1,2,3,-1];

console.log(Math.min(...arr)); // -1
Выход:

И оператор распространения, и оператор остатка используют тройные точки (…), и иногда трудно отличить, какая из них находится в состоянии покоя или разброса. Просто помните, что:

Когда… находится в конце параметра функции, это параметр отдыха.
Когда… происходит в вызове функции или что-то подобное, это называется оператором распространения.

JavaScript Статьи

Введение в ES6

РЕКОМЕНДУЕМЫЕ СТАТЬИ