Пересмотр ECMAScript2015-ES6 на ECMAScript2019-ES10

Когда появился ECMAScript11, давайте быстро пересмотрим все основные функции ES6 на ES10.

ECMAScript6 -ECMAScript 2015

Это протокол, по которому работает Javascript. Так что можно сказать его версию на javascript.

Функции, представленные в EC6

ключевое слово let

Оператор let позволяет нам объявить переменную с областью видимости блока, и мы не можем повторно объявить тот же объект в той же области

var x = 10;
{
        let x = 2;
        let x = 4;   // ERROR  (cant redeclare)
        x = 5;       // works fine
        // In this block x is equal to 5
}
// here x is 10

ключевое слово const

Оператор const аналогичен оператору let, с той лишь разницей, что его значение нельзя изменить. У них также есть блокировка.

var x = 10;
{
        const x = 2;
        // In this block x is equal to 2
        x = 4;    // ERROR
}
// here x is 10

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

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

//In Javascript 5
var x = function add(num1,num2) {
        return num1 + num2;
}
// In Javascript6 or ES6
const y = (num1,num2) => num1+ num2;

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

const z = (num1,num2) => {
        console.log(num1 + " " + num2);
        return num1*num2;
}

Некоторые свойства стрелочных функций У них нет своего this. Стрелочные функции не поднимаются. Их необходимо определить перед использованием. Всегда используйте const для их определения, потому что их определение не изменится.

Классы в Javascript

ES6 представил классы.

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

Метод конструктора вызывается всегда, когда инициализируется объект класса.

class Person {
        let personName;
        constructor(personName) {
                this.personName = personName;
        }
let getName = () => personName;
}
let person1 = new Person("Alice");
person1.getName();       // Alice

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

В ES6 мы можем разрешить параметрам функции иметь значение параметра по умолчанию.

const mult = (x,y = 10) => x*y;
mult(5);   // 50

Мы можем определить значение по умолчанию в параметре функции. Поэтому, если мы не передаем какое-либо значение параметра, мы можем использовать пример значения по умолчанию: здесь у нас есть 2 функции: 1 со значением по умолчанию, а другая без значения по умолчанию.

const sum = (a=0,b=0,c = 0) => {
   return a+b+c;
}
const add = (a,b,c) => {
   return a+b+c;
}
sum(1,2);   // 3
add(1,2);   // NaN

В первой функции у нас есть значение по умолчанию c. Итак, мы получили результат. Во второй функции мы должны предоставить все значения параметра, иначе она вернет NaN.

Array.find ()

Этот метод используется для поиска значения из массива в соответствии с условием, переданным ему в качестве параметра. Он вернет первое значение, удовлетворяющее условию.

let numbers = [1,2,3,4,5];
numbers.find(x => x >2);   // It will return 3

Array.findIndex ()

Это то же самое, что и Array.find (), с той лишь разницей, что он возвращает индекс значения, удовлетворяющего условию функции.

let numbers = [1,2,3,4,5];
numbers.findIndex(x => x >2)   // It will return 2 (index)

Добавлены новые свойства Number

Number.EPSILON    //2.220446049250313e-16
Number.MIN_SAFE_INTEGER   //-9007199254740991
Number.MAX_SAFE_INTEGER   //9007199254740991

Number.isInteger ()

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

Number.isInteger(10)   // true
Number.isInteger(10.5) // false

Number.isSafeInteger ()

Безопасное целое число - это целое число, которое может быть точно представлено как число двойной точности.

Number.isSafeInteger(10);    // returns true
Number.isSafeInteger(12345678901234567890);  // returns false

isFinite ()

Он используется для проверки, является ли число конечным или нет. Он вернет false, если значение Infinite или NaN, в противном случае - true.

isFinite(10/1)    // finite
isFinite(10.0)    // false
isFinite("alpha") // true

isNaN ()

Он вернет истину, если значение не является числом, иначе вернет ложь

isNaN()    // true
isNaN("")  // false
isNaN("alpha")  // true
isNaN(1)    // false
isNaN(1.1)  // false
isNaN(true)  //false

Экспоненциальный оператор

Оператор возведения в степень (**) возводит первый операнд в степень второго операнда. ранее мы должны были использовать функцию Math.pow (), например

Math.pow(5,2)    //25
Now
let x = 5**2;    // 25

Object.is ()

Этот метод используется для сравнения 2 значений равны или нет. Этот метод немного отличается от === тем, что мы сравниваем -0 с 0,

-0 === 0   // true
 Object.is(-0,0)   // false

Аналогично в случае NaN

console.log(NaN === NaN);  // false
console.log(Object.is(NaN,NaN))  // true

Строчная интерполяция

Строчная интерполяция используется для добавления динамического строкового значения в постоянную строку. До ES5 мы писали такой код:

const name ={firstName: 'Harbajan', lastName: 'singh'}
let heading = "Indian best spinner name is " + name.firstName + " " + name.lastName;

Теперь в ES6

`Indian best spinner name is ${name.firstName} ${name.lastName}`

Повторение строки

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

('ABC').repeat(4);    // "ABCABCABCABC"

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

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

const arr = [1,2,3,4,5];
console.log(...arr);  // 1 2 3 4 5
console.log(arr);  // (5) [1, 2, 3, 4, 5]

Здесь мы можем увидеть разницу между массивом печати и значениями печати. Здесь мы печатаем значения массива с помощью оператора распространения.

Объединение массива с помощью оператора спреда

const arr1 = [1,2,3];
const arr2 = [4,5];
const arr = [...arr1,...arr2];   // [1,2,3,4,5]

преобразование массива символов из строки

const name = "Yuvraj";
const chars = [...name];   //(6) ["Y","u","v","r","a","j"];

Деструктурирующее присвоение

Это позволяет распаковывать значения из массивов или свойства из объектов в отдельные переменные.

let arr = [1,2,3,4,5];;
const [a,b,c,d,e] = arr;
console.log(a);  //1
console.log(b);  //2
console.log(c);  //3
console.log(d);  //4
console.log(e);  //5

Не важно, чтобы переменные были равны размеру массива. Мы также можем указать меньшие переменные, например:

let arr = [1,2,3,4,5];
const [a,b] = arr;
console.log(a);  //1
console.log(b);  //2

Точно так же у нас это есть в Object

let obj = {firstName: 'Kapil', lastName: 'Dev'};
let {firstName:name} = obj;
console.log(name)   // Kapil

ECMAScript7 -ECMAScript 2016

ES7 - гораздо меньший выпуск, чем ES6. В нем всего 2 новых изменения

Array.prototype.includes

До ES6, чтобы проверить наличие элемента в массиве, мы должны сделать некоторый шаблонный код, используя метод indexOf. indexOf возвращает позицию элемента, присутствующего в массиве. Но нам нужно было логическое значение. Итак, нам нужно сделать несколько дополнительных проверок, чтобы преобразовать его в логическое значение.

let fruits = ['apple','mango','pineapple'];
// wrong implenentation
if(fruits.indexOf('aaple')) {
        console.log('Available');
}

Во-первых, мы видим, почему indexOf не идеальная реализация. В приведенном выше примере мы видим, что пытаемся найти элемент в массиве, который находится в нулевой позиции. Итак, indexOf вернет 0, и если условие 0 превратится в ложь. Поэтому, даже если значение присутствует, мы должны добавить несколько дополнительных проверок.

Итак, мы должны сделать что-то вроде:

let fruits = ['apple','mango','pineapple'];
// till ES6 
if(fruits.indexOf('aaple') !==1)
        console.log('Available');
}

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

let fruits = ['apple','mango','pineapple'];
// ES7
if(fruits.includes('apple'))
        console.log('Available');
}

Метод includes возвращает логическое значение. Так что не нужно делать лишних проверок.

Оператор возведения в степень

Этот оператор в основном используется в математике и некоторых вычислениях. До ES6 мы использовали функцию Math.pow () или иногда пишем наш шаблонный код, чтобы получить простую экспоненциальную функциональность.

Math.pow(2,3);    //8## ECMAScript7 -ECMAScript 2016

В ES7 для достижения того же результата был предусмотрен очень простой и короткий синтаксис.

2**3   //8

ECMAScript8 -ECMAScript 2017

Заполнение строк

Он добавит в строку несколько дополнительных символов. Он может быть перед тетивой или в конце. В строковом заполнении есть 2 метода

padStart ()

padEnd ()

'script'.padStart(6);           // 'script'
'script'.padStart(7);           // ' script'
'script'.padStart(10,'java')    // 'javascript'
'java'.padEnd(4);               // 'java'
'java'.padEnd(5);               // 'java '
'java'.padEnd(10,'script');     // 'javascript'

Object.values ​​()

Этот метод возвращает массив всех значений, присутствующих в объекте.

let name = {firstName: 'sachin', lastName: 'Tendulkar'}
Object.values(name);            // (2) ["sachin", "Tendulkar"]

Object.entries ()

Этот метод возвращает массив пар ключ-значение объекта.

let name = {firstName: 'sachin', lastName: 'Tendulkar'}
Object.entries(name);
// Output
[
  [
    "firstName",
    "sachin"
  ],
  [
    "lastName",
    "Tendulkar"
  ]
]

getOwnPropertyDescriptors ()

Этот метод вернет описание всех свойств объекта.

такие свойства, как значение, возможность записи, перечисляемое, настраиваемое, получение и установка

let name = {firstName: 'sachin', lastName: 'Tendulkar'}
Object.getOwnPropertyDescriptors(name)
// Output
{
  "firstName": {
    "value": "sachin",
    "writable": true,
    "enumerable": true,
    "configurable": true
  },
  "lastName": {
    "value": "Tendulkar",
    "writable": true,
    "enumerable": true,
    "configurable": true
  }
}

Асинхронные функции

Когда Promises были представлены в ES6, они должны были решить проблему с асинхронным кодом, и они это сделали, но за 2 года, которые разделяли ES6 и ES2017, стало ясно, что обещания не могут быть окончательным решением. Обещания были введены для решения известной проблемы ада обратного вызова, но они сами по себе внесли сложность и сложность синтаксиса. Это были хорошие примитивы, вокруг которых разработчикам мог быть предложен лучший синтаксис: ввод асинхронных функций.

function getResult() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('Results'), 5000)
    })
}
async function execute() {
    console.log(await getResult())
}
console.log('Before')
execute()
console.log('After')
//Output
Before
After
Result //after 5s

ECMAScript9 -ECMAScript 2018

Асинхронные итераторы

Асинхронные итераторы похожи на синхронные итераторы, за исключением того, что следующий метод возвращает обещание. Чтобы использовать асинхронные итераторы, теперь мы можем использовать ключевое слово await с циклами for… of.

async function example() {
   // Regular iterator
   for (const item of NumberIterator) {
      // …
   }
   // Async iterator
   for await (const item of AsyncNumberIterator) {
      // …
   }
}

Изменения регулярного выражения

В ES9 произошло множество изменений регулярных выражений.

Остаточные / спредовые свойства

Оператор Rest / Spread впервые появился в ES6. Теперь у нас есть несколько обновлений по оператору. мы можем использовать его для копирования всех оставшихся свойств в новый объект.

const values = {a: 1, b: 2, c: 3, d: 4};
const {a, ...n} = values;
console.log(a);   //1
console.log(n);   // prints {b: 2, c: 3, d: 4}

Обещай, наконец, метод

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

fetch('/files')
.then(data => data.json())
.catch(err => console.error(err))
.finally(() => console.log('processed!'))

ECMAScript10 -ECMAScript 2019

Array.flat ()

Этот метод используется для выравнивания 1 уровня в массиве.

let fruits = [['apple','mango'],['banana','pineapple']];
fruits.flat();
//  ["apple", "mango", "banana", "pineapple"]

Array.flatMap ()

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

let sentences = [
    "JavaScript Array flatMap()", 
    " ", 
    "is", 
    " ", 
    "Awesome"
];
let words = sentences.flatMap(s => s.split(' '));
console.log(words);
// Output 
[ 'JavaScript', 'Array', 'flatMap()', '', '', 'is', '', '', 'Awesome' ]

Обрезка струн

Он имеет 2 метода - trimStart () и trimEnd (), которые обрезают пустое пространство с начала и с конца соответственно.

const str = '   untrimmedString    ';
str.trimStart();          // 'untrimmedString    ';
str.trimEnd();           // '   untrimmedString';

Object.fromEntries ()

Он используется для создания нового объекта из данного объекта. Он добавляет все пары "ключ-значение" данного объекта к новому объекту.

const fruits = [['mango','1'],['pineapple','2']];
const fruitsFromArr = Object.fromEntries(fruits);
// {mango: 1,pineapple:2}
const fruits = {mango: 1,pineapple:2};
const fruitsFromObj = Object.fromEntries(fruits);
// {mango: 1,pineapple:2}

Дополнительная привязка улова

До ES9 мы должны были предоставить параметр в блоке catch оператора try-catch. Теперь это необязательно.

try {
 // do something
}
catch {
        // catch block without parameter
}

Обновлен метод toString () функции.

Раньше, когда мы использовали toString для функции, он удалял все пробелы, новые строки и комментарии, но теперь из ES10 все будет сохранено.

const sum = (a,b) => {
        return a +b;
}
sum.toString();
// output
const sum = (a,b) => {
        return a +b;
}

Символ Описание Аксессуар

При создании символа вы можете предоставить строку в качестве описания:

const symbol = Symbol("Some description");

Раньше нам нужно было вызвать метод toString, чтобы получить описание.

symbol.toString();

Теперь у нас есть геттер для доступа к описанию.

symbol.desc();