Галоўная > Абнаўленні JavaScript пачынаючы з ES6. Спіс

Абнаўленні JavaScript пачынаючы з ES6. Спіс

JS
ES6
javascript

Прывітанне сябры.


Сення для вас пакрокавы агляд зменаў у JS згодна са стандартамі ECMAScript (ES), пачынаючы з ES6 (2015) і далей, з кароткім апісаннем і прыкладамі кода для кожнай функцыі:

2015 (ES6 / ECMAScript 2015)

Let і Const

Апісанне: Пераменныя з блочным узроўнем бачнасці. let дазваляе перапрызначэнне пераменнай, у той час як const робіць пераменныю нязменнай.

Прыклад:

text
1let count = 10;
2const name = "Alice";

Стрэлачныя функцыі (Arrow Functions)

Апісанне: Карацейшы сінтаксіс і няма oласных this, constructor, args.

Прыклад:

text
1const add = (a, b) => a + b;

Шаблонныя літэралы (Template Literals)

Апісанне: Пашыраныя літэралы для ўстаўкі значэнняў у радкі і шматрадковыя радкі з выкарыстаннем зваротных апострафаў.

Прыклад:

text
1const greeting = `Hello, ${name}!`;

Класы (Classes)

Апісанне: Сінтаксіс class для стварэння канструктарных функцый і наследавання.

Прыклад:

text
1class Person {
2  constructor(name) {
3    this.name = name;
4  }
5  greet() {
6    return `Hello, ${this.name}`;
7  }
8}

Модулі (Modules)

Апісанне: Падтрымка модуляў з выкарыстаннем ключавых слоў import і export.

Прыклад:

text
1// module.js
2export const name = "Alice";
3
4// main.js
5import { name } from './module.js';

Дэструктурызацыя (Destructuring Assignment)

Апісанне: Выняцце значэнняў з масіваў або ўласцівасцяў аб'ектаў у пераменныя.

Прыклад

text
1:const [x, y] = [1, 2];
2const { name, age } = { name: "Alice", age: 25 };

Параметры па змаўчанні (Default Parameters)

Апісанне: Параметры функцый могуць мець значэнні па змаўчанні.

Прыклад:

text
1function greet(name = "Guest") {
2  return `Hello, ${name}`;
3}

Аператары Spread і Rest

Апісанне: Spread (...) раздзяляе масівы/аб'екты; Rest (...) збірае астатнія элементы.

Прыклад:

text
1const numbers = [1, 2, 3];
2const moreNumbers = [...numbers, 4, 5];
3
4function sum(...args) {
5  return args.reduce((a, b) => a + b, 0);
6}

Промісы (Promises)

Апісанне: Убудаваныя промісы для працы з асінхроннымі аперацыямі.

Прыклад:

text
1const promise = new Promise((resolve, reject) => {
2  setTimeout(() => resolve("Success!"), 1000);
3});

Генератары (Generators)

Апісанне: Функцыі, якія можна прыпыняць і аднаўляць (function* і yield).

Прыклад:

text
1function* idGenerator() {
2  let id = 1;
3  while (true) {
4    yield id++;
5  }
6}

Map і Set

Апісанне: Новыя структуры дадзеных для захавання ключ-значэння (Map) і ўнікальных значэнняў (Set).

Прыклад:

text
1const map = new Map();
2map.set('key', 'value');
3
4const set = new Set([1, 2, 3, 3]);

Сімвалы (Symbols)

Апісанне: Новы прымітыўны тып дадзеных для стварэння унікальных ідэнтыфікатараў.

Прыклад:

text
1const sym = Symbol('description');

Ітэратары і цыкл For-Of

Апісанне: Ітэратары – аб'екты, якія вызначаюць паслядоўнасць і могуць вяртаць значэнне пры заканчэнні паслядоўнасці. Цыкл for-of для ітэрацыі па ітэруемых аб'ектах.

Прыклад:

text
1const array = [1, 2, 3];
2for (const value of array) {
3  console.log(value);
4}

WeakMap і WeakSet

Апісанне: Падобныя на Map і Set, але са слабымі спасылкамі на ключы/значэнні (дакументацыя).

Прыклад:

text
1const weakMap = new WeakMap();
2const obj = {};
3weakMap.set(obj, 'value');

Удасканаленні Math, Number, String і Object

Апісанне: Новыя метады, дададзеныя ў Math, Number, String і Object.

Прыклад:

text
1Math.trunc(4.9); // 4
2Number.isNaN(NaN); // true
3
4Object.assign({}, {a: 1}, {b: 2}); // {a: 1, b: 2}

2016 (ES7 / ECMAScript 2016)

Аператар узвядзення ў ступень (Exponentiation Operator)

Апісанне: Спрошчаны разлік ступені з **.

Прыклад:

text
1const square = 2 ** 2; // 4

Array.prototype.includes

Апісанне: Правярае, ці ёсць у масіве пэўнае значэнне.

Прыклад:

text
1const array = [1, 2, 3];
2array.includes(2); // true

2017 (ES8 / ECMAScript 2017)

Async/Await

Апісанне: Сінтаксічны цукар для працы з промісамі, што робіць асінхронны код прасцейшым для чытання і напісання.

Прыклад:

text
1async function fetchData() {
2  const response = await fetch('https://api.example.com/data');
3  const data = await response.json();
4  return data;
5}

Object.entries і Object.values

Апісанне: Метад атрымлівае масіў уласных пералічаных уласцівасцяў аб'екта ў выглядзе пар [ключ, значэнне] і значэнняў.

Прыклад:

text
1const obj = { a: 1, b: 2 };
2Object.entries(obj); // [['a', 1], ['b', 2]]
3Object.values(obj); // [1, 2]

Дабаўленне радкоў (String Padding)

Апісанне: Метад padStart і padEnd дадае сімвалы да радка да дасягнення пэўнай даўжыні.

Прыклад:

text
1'5'.padStart(2, '0'); // '05'
2'5'.padEnd(2, '0'); // '50'

Object.getOwnPropertyDescriptors

Апісанне: Вяртае ўсе ўласныя апісальнікі ўласцівасцяў аб'екта.

Прыклад:

text
1const obj = { prop: 1 };
2const descriptors = Object.getOwnPropertyDescriptors(obj);
3/*{
4  "prop": {
5    "value": 1,
6    "writable": true,
7    "enumerable": true,
8    "configurable": true
9  }
10} */

Завяршаючыя коскі ў спісах параметраў і выкліках функцый (Trailing Commas in Function Parameter Lists and Calls)

Апісанне: Дазваляе выкарыстоўваць завяршаючыя коскі ў параметрах функцый і аргументах.

Прыклад:

text
1function foo(
2  param1,
3  param2,
4) { /*...*/ }
5
6foo(
7  'a',
8  'b',
9);

2018 (ES9 / ECMAScript 2018)

Асінхронныя ітэратары (Async Iteration)

Апісанне: Цыкл for-await-of для ітэрацыі па асінхронных ітэруемых аб'ектах.

Прыклад:

text
1async function process(array) {
2  for await (let value of array) {
3    console.log(value);
4  }
5}

Rest/Spread уласцівасцяў (Rest/Spread Properties)

Апісанне: Spread і rest уласцівасцяў для аб'ектаў.

Прыклад:

text
1const obj = { a: 1, b: 2, c: 3 };
2const { a, ...rest } = obj; // rest = { b: 2, c: 3 }
3const newObj = { ...rest }; // { b: 2, c: 3 }

Promise.finally

Апісанне: Дадае метад .finally() у промісы, які выконвае зваротны выклік пры завяршэнні промісу незалежна ад выніку.

Прыклад:

text
1fetch('/api')
2  .then(response => response.json())
3  .catch(error => console.error(error))
4  .finally(() => console.log('Fetch attempt finished.'));

Паляпшэнні RegExp

Апісанне: Новыя функцыі у рэгулярных выразах.

Прыклад:

text
1const regExp = /(?<=\$)\d+/; // lookbehind assertion
2const match = 'Price: $10'.match(regExp); // ['10']
3
4const regExpNamed = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
5const result = regExpNamed.exec('2020-12-01');
6console.log(result.groups.year); // '2020'

2019 (ES10 / ECMAScript 2019)

Array.prototype.flat і Array.prototype.flatMap

Апісанне: flat сплюшчвае ўкладзеныя масівы, flatMap - адлюстроўвае і сплюшчвае вынік.

Прыклад:

text
1const arr = [1, [2, [3]]];
2arr.flat(2); // [1, 2, 3]
3
4const arr1 = [1, 2, 1];
5
6const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
7
8console.log(result);
9// Expected output: Array [1, 2, 2, 1]
10

Object.fromEntries

Апісанне: Канвертуе спіс пар ключ-значэнне ў аб'ект.

Прыклад:

text
1const entries = [['a', 1], ['b', 2]];
2const obj = Object.fromEntries(entries); // { a: 1, b: 2 }

String.prototype.trimStart і String.prototype.trimEnd

Апісанне: Прыбірае прабелы з пачатку і канца радка.

Прыклад:

text
1const str = '  hello  ';
2str.trimStart(); // 'hello  '
3str.trimEnd(); // '  hello'

Неабавязковая пераменная ў блоку catch (Optional Catch Binding)

Апісанне: Дазваляе апусціць пераменную памылкі ў блоку catch.

Прыклад:

text
1try {
2  // code
3} catch {
4  console.error('An error occurred');
5}

Symbol.prototype.description

Апісанне: Дазваляе атрымаць апісанне сімвала непасрэдна.

Прыклад:

text
1const sym = Symbol('desc');
2console.log(sym.description); // 'desc'

Рэвізія Function.prototype.toString

Апісанне: Метад toString() вяртае дакладныя сімвалы, уключаючы прабелы і каментарыі.

Прыклад:

text
1function /* comment */ foo() {}
2console.log(foo.toString()); // 'function /* comment */ foo() {}'

2020 (ES11 / ECMAScript 2020)

Аператар выбару (Optional Chaining (?.))

Апісанне: Бяспечны доступ да глыбока ўкладзеных уласцівасцяў.

Прыклад:

text
1const user = {};
2const street = user.address?.street; // undefined

Аператар Nullish Coalescing (??)

Апісанне: Вяртае правы аперанд, калі левы аперанд null або undefined.

Прыклад:

text
1const name = null ?? 'Guest'; // 'Guest'

Дынамічны імпарт (Dynamic import())

Апісанне: Дынамічны імпарт модуляў.

Прыклад:

text
1import('/modules/my-module.js')
2  .then(module => {
3    // use module
4  });

BigInt

Апісанне: Дазваляе прадстаўленне і апрацоўку цэлых лікаў, большых за Number.MAX_SAFE_INTEGER.

Прыклад:

text
1const bigNumber = 123456789012345678901234567890n;

Promise.allSettled

Апісанне: Вяртае проміс, які вырашаецца, калі ўсе перададзеныя промісы альбо вырашаны, альбо адхілены.

Прыклад:

text
1const promises = [Promise.resolve(1), Promise.reject('error')];
2Promise.allSettled(promises)
3  .then(results => console.log(results));

GlobalThis

Апісанне: Стандартны спосаб доступу да глабальнага this значэння ў розных асяроддзях.

Прыклад:

text
1globalThis.setTimeout(() =>console.log('Hello'), 1000);

String.prototype.matchAll

Апісанне: Вяртае ітэратар усіх супадзенняў у радку з рэгулярным выразам.

Прыклад:

text
1const regex = /t(e)(st(\d?))/g;
2const str = 'test1test2';
3const matches = [...str.matchAll(regex)];

Экспарт прастораў імёнаў модуля (Module Namespace Exports)

Апісанне: Паляпшэнне падтрымкі апрацоўкі прастораў імёнаў у ES модулях.

Прыклад:

text
1export * as ns from 'module';

2021 (ES12 / ECMAScript 2021)

Аператары лагічнага прызначэння (&&=, ||=, ??=)

Апісанне: Аб'ядноўваюць лагічныя аперацыі з выказваннямі прызначэння.

Прыклад:

text
1let a = 1;
2a ||= 2; // a = 1
3
4let b = null;
5b ??= 2; // b = 2

Лічбавыя раздзяляльнікі (Numeric Separators)

Апісанне: Падкрэсленні выкарыстоўваюцца як раздзяляльнікі для паляпшэння чытальнасці лікавых літаралаў.

Прыклад:

text
1const largeNumber = 1_000_000; // 1000000

String.prototype.replaceAll

Апісанне: Замяняе ўсе ўхапленні падрадка.

Прыклад:

text
1const str = 'foo foo';
2const newStr = str.replaceAll('foo', 'bar'); // 'bar bar'

Promise.any

Апісанне: Вяртае першы вырашаны проміс або масіў з памылкамі, калі ўсе промісы былі адхілены.

Прыклад:

text
1const promises = [Promise.reject(1), Promise.resolve(2)];
2Promise.any(promises)
3  .then(result => console.log(result)); // 2

WeakRefs

Апісанне: Стварае слабыя спасылкі на аб'екты, каб пазбегнуць прадухілення збору смецця.

Прыклад:

text
1const obj = {};
2const weakRef = new WeakRef(obj);

FinalizationRegistry

Апісанне: Рэгіструе зваротны выклік для ачысткі аб'ектаў, якія былі сабраны зборшчыкам смецця.

Прыклад:

text
1const registry = new FinalizationRegistry(heldValue => {
2  console.log('Object was garbage collected', heldValue);
3});
4
5let obj = {};
6registry.register(obj, 'myValue');
7obj = null; // obj is now eligible for garbage collection

2022 (ES13 / ECMAScript 2022)

Класыз прыватнымі палямі (Class Fields)

Апісанне: Публічныя і прыватныя метады і метады экземпляра ў класах.

Прыклад:

text
1class MyClass {
2  myField = 10; // public field
3  #privateField = 20; // private field
4  
5  getPrivateField() {
6    return this.#privateField;
7  }
8}

Верхняўзроўневае await (Top-Level Await)

Апісанне: Дазваляе выкарыстанне await на верхнім узроўні модуляў.

Прыклад:

text
1const data = await fetch('/api/data').then(res => res.json());
2console.log(data);

Індэксы супадзенняў RegExp (RegExp Match Indices)

Апісанне: matchAll вяртае пазіцыі пачатку і канца супадзенняў.

Прыклад:

text
1const regex = /(foo)/g;
2const str = 'foo foo';
3const matches = [...str.matchAll(regex)];
4console.log(matches[0].indices); // [[0, 3], [0, 3]]

2023 (ES14 / ECMAScript 2023)

Метады findLast і findLastIndex для масіваў і TypedArray

Апісанне: Метад для пошуку апошняга элемента і яго індэкса ў масіве або TypedArray.

Прыклад:

text
1const arr = [1, 2, 3, 4];
2const lastEven = arr.findLast(n => n % 2 === 0); // 4
3const lastEvenIndex = arr.findLastIndex(n => н % 2 === 0); // 3

Сімвалы як ключы для WeakMap

Апісанне: Сімвалы можна выкарыстоўваць у якасці ключоў у WeakMap.

Прыклад:

text
1const sym = Symbol('key');
2const wm = new WeakMap();
3wm.set(sym, 'value');

Групоўка масіваў (Array Grouping)

Апісанне: Метад groupBy і groupByToMap для групавання элементаў у масівах.

Прыклад:

text
1const array = ['one', 'two', 'three'];
2const grouped = array.groupBy(word => word.length);
3// { 3: ['one', 'two'], 5: ['three'] }

Граматыка Hashbang

Апісанне: Дазваляе выкарыстанне #! у пачатку скрыптаў для Unix-падобных асяроддзяў.

Прыклад:

text
1#!/usr/bin/env node
2console.log('Hello, world!');

Заключэнне

Такім чынам мы разгледзеді важныя абнаўленні ў JS за апошнія некалькі гадоў, і спадзяюся што наша праца будзе для вас карыснай. Хацелася б адзначыць што былі і іншыя змены, але яны не былі настолькі важнымі, таму у гэты спіс не папалі.

ЗЫ : Калі ласка далучайцеся да нашых аўтараў. Давайце пашыраць нашу беларускамоўную прастору разам.

Admin, 2024-08-29
Каментары

    (Каб даслаць каментар залагуйцеся ў свой уліковы запіс)