Закодируйте разницу между синтаксисом ES5 и ES6 в javascript

ES (ECMAScript) - это спецификация языка сценариев, зарегистрированная торговой маркой, которая определена ECMA International. Это стандартизированный язык сценариев для JavaScript. Обычно ECMAScript используется для написания сценариев на стороне клиента в World Wide Web.

ES5 - это сокращение от ECMAScript 5, также известного как ECMAScript 2009. Шестое издание стандарта ECMAScript - ES6. или ECMAScript 6, также известный как ECMAScript 2015.

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

Декларации

Объявление переменной: var может использоваться для объявления в ES5. Let и const заменяет var в ES6

ES5:(var)
var name = 'test1';
var age = 20;
console.log(name) //test1
ES6 (let and const)
const name1 = 'test2';
let age1 = 23;
name1 = 'Jane';
let age1 = 24;
console.log(name1); //error (const val can't be changed)
console.log(age1); //24

Объявление функций: let и const указаны в блоке, поэтому мы больше не доступны за пределами блока, но в var, мы можем получить доступ, если они работают, поскольку они не указаны в блоке. Также в переменных ES5 перед объявлением не определено.

ES5:
function classTest(passedTest) {
    
    if (passedTest) {
        console.log(firstName); //undefined (called before declaration)
        var firstName = 'jack';
        var marks = 98;
    }
    
    console.log(firstName + 'successfully passed the test with' + marks + 'score');  //jack, 98
}
classTest(true);
ES6:
function classTest(passedTest) {
  console.log(firstName); //error (not assigned while declaration)            
    let firstName;
    const marks = 98;
    if (passedTest) {
       firstName = 'jack';
    }
    
    console.log(firstName + 'successfully passed the test with' + marks + 'score');     //jack, 98
}
classTest(true);

Блоки и IIFE:

ES5:
(function () {
    var c = 3;
})();
console.log(c); //3
ES6:
{
    const a = 1;
    let b = 2;
    var c = 3;
}
console.log(a + b);//not accessible outside the scope.
console.log(c); //3

Струны:

В ES5 кавычки (‘’) вместе с оператором сложения (+) используются для отображения текста и переменных.

В ES6 мы используем литералы шаблонов, один из которых - обратные кавычки и знак $ для отображения содержимого. Некоторые строковые методы, такие как startWith, endWith, includes, repeat и т. Д., Используются для удобного отображения содержимого.

let firstName = 'Jack';
let lastName = 'Watson';
const yearOfBirth = 1990;
function calcAge(year) {
     return 2016 - year;
}
ES5:
console.log('This is ' + firstName + ' ' + lastName + '. He was born in ' + yearOfBirth + '. Today, he is ' + calcAge(yearOfBirth) + ' years old.');
ES6:
console.log(`This is ${firstName} ${lastName}. He was born in ${yearOfBirth}. Today, he is ${calcAge(yearOfBirth)} years old.`);
string methods in ES6
const n = `${firstName} ${lastName}`;
console.log(n.startsWith('J')); //Jack 
console.log(n.endsWith('on')); // Watson
console.log(n.includes(' ')); //true
console.log(`${firstName} `.repeat(2)); Jack Jack

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

const data = [60, 70, 80, 90]
ES5:
var diff = data.map(function(el){ 
   return 100 - el;
})
console.log(data)
ES6
let diff = data.map((el, index) => { 
  return 100 - el;
}) 
or
let diff = data.map((el, index) => 100 - el;
console.log(data);

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

В случае ES5: использование функции напрямую указывает на объект окна, поэтому он не определен, поэтому мы должны сохранить его в переменной

С другой стороны, в ES6

случай 1 это ключевое слово сохраняется и указывает на переменные документа.

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

ES5:
var button ={
   color: 'green',
   position:1, 
  
   clickMe: function(){.....}    //undefined
      
    var self= this;
    document.querySelector('.green').addEventListener('click', function () {
      var str = 'This is button ' + self.position + ' and it is ' + self.color;
      alert(str); //this is button 1 and it is green
     });
}
button.clickMe();
ES6(case1)
const button = {
   color: 'green',
   position:1, 
   clickMe: function(){    document.querySelector('.green').addEventListener('click', 
function () {
   let str = 'This is button ' + self.position + ' and it is ' + self.color;
      alert(str); //this is button 1 and it is green
     });
}
button.clickMe();
ES6(case2)
const button = {
   color: 'green',
   position:1, 
  
   clickMe:() => {             document.querySelector('.green').addEventListener('click', 
function () {
      var str = 'This is button ' + self.position + ' and it is ' + self.color;
      alert(str); // error undefined 
     });
}
button.clickMe();

Разрушение:

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

ES5
var data = ['John', 26];
var name = data[0];
var age = data[1];
console.log(name);// john
console.log(age); // 26
ES6
const [name, age] = ['John', 26];
console.log(name); //john
console.log(age); //26

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

const obj = {
    firstName: 'John',
    lastName: 'Smith'
};
const {firstName, lastName} = obj;
console.log(firstName);
console.log(lastName);
const {firstName: a, lastName: b} = obj;
console.log(a);
console.log(b);

Массивы:

Цикл ForEach в массиве с использованием синтаксиса ES5 и ES6

const cards = document.querySelectorAll('.card');
ES5:
var cardsArr =  Array.prototype.slice.call(cards);
cardsArr.forEach(function(cur){
  cur.style.backgroundColor = '#087';
)
ES6
const cardsArr =  Array.from(cards);
cardsArr.forEach(cur => {
  cur.style.backgroundColor = '#087';
)

Цикл For в массиве с использованием синтаксиса ES5 и ES6

const cards = document.querySelectorAll('.card');
ES5:
var cardsArr =  Array.prototype.slice.call(cards);
for(var i = 0; i < cardsArr.length; i++) {
       if(cardsArr[i].className === 'card blue') {
        continue;
    }
     cardsArr[i].textContent = 'I changed to blue!';
    }
ES6:
const cardsArr =  Array.from(cards);
for (const cur of cardsArr) {
    if (cur.className.includes('blue')) {
        continue;
    }
    cur.textContent = 'I changed to blue!';
}

Поиск индекса массива с использованием синтаксиса ES5 и ES6

ES5:
var ages = [12, 17, 8, 21, 14, 11];
var full = ages.map(function(cur) {
    return cur >= 18;
});
console.log(full);
console.log(full.indexOf(true));
console.log(ages[full.indexOf(true)]);
ES6:
console.log(ages.findIndex(cur => cur >= 18));
console.log(ages.find(cur => cur >= 18));

Оператор распространения:

Вместо того, чтобы передавать весь массив в sum2 и sum3, мы можем использовать оператор null или оператор распространения (…) для копирования элементов из sum1. Чтобы передать весь массив, мы используем метод apply в ES5. Оператор распространения используется в вызове функции.

function addFourAges(a, b, c, d) {
    return a + b + c + d;
}
var sum1 = addFourAges(18, 30, 12, 21);
console.log(sum1);
ES5:
var ages = [18, 30, 12, 21];
var sum2 = addFourAges.apply(null, ages);
console.log(sum2);
ES6:
const sum3 = addFourAges(...ages);
console.log(sum3);

Остальные параметры:

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

ES5:
function isFullAge(limit) {
    var argsArr = Array.prototype.slice.call(arguments, 1);
    argsArr.forEach(function(cur) {
        console.log((2020 - cur) >= limit);
    })
}
isFullAge(1990, 1999, 1965, 2016, 1987);
ES6:
function isFullAge(limit, ...years) {
    years.forEach(cur => console.log((2020 - cur) >= limit));
}
isFullAge(16, 1990, 1999, 1965, 2016, 1987);

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

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

ES5:
function Person1(firstName, lastName, age) {
Setting up default parameters
lastName === undefined ? lastName = 'Smith' : lastName = lastName;
    
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}
ES6:
function Person1(firstName, lastName = 'Smith', age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}
var john = new Person1('John', 20);
var emily = new Person1('Emily', 'dyne', 40 );
console.log(john);

Объект против карт:

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

ES6:
const question = new Map();
Set data
question.set('question', 'What is the official name of latest version of js');
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES2015');
question.set(4, 'ES7');
question.set('correct', 3);
question.set(true, 'Correct answer:D');
question.set(false, 'wrong, please try again');
Get data
console.log(question.get('question'))
console.log(question.size)
Delete data
question.delete(4);
Delete if it contains value
if (question.has(4)) {
    question.delete(4);
}
Clear data
question.clear();
Loop through data
question.forEach((value, key) => console.log(`this is ${key} with ${value}`))
or
for(let [key, value] of question.entries()) {
    if (typeof (key) === 'number')
        console.log(`this is ${key} with ${value}`)
}
const ans = parseInt(prompt('Write the correct'));
Retreving data
console.log(question.get(
    ans === question.get('correct'))
)

Классы:

ES5:
var Person = function(name, yearOfBirth, job) {
    this.name = name;
    this.yearOfBirth = yearOfBirth;
    this.job = job;
}
Person.prototype.calculateAge = function() {
    var age = new Date().getFullYear - this.yearOfBirth;
    console.log(age);
}
var john = new Person('John', 1990, 'teacher');
ES6:
class Person {
    constructor (name, yearOfBirth, job) {
        this.name = name;
        this.yearOfBirth = yearOfBirth;
        this.job = job;
    }
    
    calculateAge() {
        var age = new Date().getFullYear - this.yearOfBirth;
        console.log(age);
    }
    
    static greeting() {
        console.log('Hey there!');
    }
}
const john = new Person('John', 1990, 'teacher');

Person.greeting();

Подклассы:

ES5:
var Person = function(name, yearOfBirth, job) {
    this.name = name;
    this.yearOfBirth = yearOfBirth;
    this.job = job;
}
Person.prototype.calculateAge = function() {
    var age = new Date().getFullYear() - this.yearOfBirth;
    console.log(age);
}
var Player = function(name, yearOfBirth, job, olymicGames, medals) {
    Person.call(this, name, yearOfBirth, job);
    this.olymicGames = olymicGames;
    this.medals = medals;
}
Player.prototype = Object.create(Person.prototype);
Player.prototype.wonMedal = function() {
    this.medals++;
    console.log(this.medals);
}
var player1 = new Player('John', 1990, 'swimmer', 3, 10);
player1.calculateAge();
player1.wonMedal();
ES6:
class Person {
    constructor (name, yearOfBirth, job) {
        this.name = name;
        this.yearOfBirth = yearOfBirth;
        this.job = job;
    }
calculateAge() {
        var age = new Date().getFullYear() - this.yearOfBirth;
        console.log(age);
    }
}
class Player extends Person {
    constructor(name, yearOfBirth, job, olympicGames, medals) {
        super(name, yearOfBirth, job);
        this.olympicGames = olympicGames;
        this.medals = medals;
    }
    
    wonMedal() {
        this.medals++;
        console.log(this.medals);
    }
}
const player1 = new Athlete6('John', 1990, 'swimmer', 3, 10);
player1.wonMedal();
player1.calculateAge();

Надеюсь, эта статья окажется полезной и вам понравится.