Прывітанне сябры.
Сення для вас пакрокавы агляд зменаў у JS згодна са стандартамі ECMAScript (ES), пачынаючы з ES6 (2015) і далей, з кароткім апісаннем і прыкладамі кода для кожнай функцыі:
2015 (ES6 / ECMAScript 2015)
Let і Const
Апісанне: Пераменныя з блочным узроўнем бачнасці. let
дазваляе перапрызначэнне пераменнай, у той час як const
робіць пераменныю нязменнай.
Прыклад:
let count = 10;
const name = "Alice";
Стрэлачныя функцыі (Arrow Functions)
Апісанне: Карацейшы сінтаксіс і няма oласных this, constructor, args.
Прыклад:
const add = (a, b) => a + b;
Шаблонныя літэралы (Template Literals)
Апісанне: Пашыраныя літэралы для ўстаўкі значэнняў у радкі і шматрадковыя радкі з выкарыстаннем зваротных апострафаў.
Прыклад:
const greeting = `Hello, ${name}!`;
Класы (Classes)
Апісанне: Сінтаксіс class
для стварэння канструктарных функцый і наследавання.
Прыклад:
class Person {
constructor(name) {
this.name = name;
}
greet() {
return `Hello, ${this.name}`;
}
}
Модулі (Modules)
Апісанне: Падтрымка модуляў з выкарыстаннем ключавых слоў import
і export
.
Прыклад:
// module.js
export const name = "Alice";
// main.js
import { name } from './module.js';
Дэструктурызацыя (Destructuring Assignment)
Апісанне: Выняцце значэнняў з масіваў або ўласцівасцяў аб'ектаў у пераменныя.
Прыклад
:const [x, y] = [1, 2];
const { name, age } = { name: "Alice", age: 25 };
Параметры па змаўчанні (Default Parameters)
Апісанне: Параметры функцый могуць мець значэнні па змаўчанні.
Прыклад:
function greet(name = "Guest") {
return `Hello, ${name}`;
}
Аператары Spread і Rest
Апісанне: Spread (...
) раздзяляе масівы/аб'екты; Rest (...
) збірае астатнія элементы.
Прыклад:
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
function sum(...args) {
return args.reduce((a, b) => a + b, 0);
}
Промісы (Promises)
Апісанне: Убудаваныя промісы для працы з асінхроннымі аперацыямі.
Прыклад:
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Success!"), 1000);
});
Генератары (Generators)
Апісанне: Функцыі, якія можна прыпыняць і аднаўляць (function*
і yield
).
Прыклад:
function* idGenerator() {
let id = 1;
while (true) {
yield id++;
}
}
Map і Set
Апісанне: Новыя структуры дадзеных для захавання ключ-значэння (Map) і ўнікальных значэнняў (Set).
Прыклад:
const map = new Map();
map.set('key', 'value');
const set = new Set([1, 2, 3, 3]);
Сімвалы (Symbols)
Апісанне: Новы прымітыўны тып дадзеных для стварэння унікальных ідэнтыфікатараў.
Прыклад:
const sym = Symbol('description');
Ітэратары і цыкл For-Of
Апісанне: Ітэратары – аб'екты, якія вызначаюць паслядоўнасць і могуць вяртаць значэнне пры заканчэнні паслядоўнасці. Цыкл for-of
для ітэрацыі па ітэруемых аб'ектах.
Прыклад:
const array = [1, 2, 3];
for (const value of array) {
console.log(value);
}
WeakMap і WeakSet
Апісанне: Падобныя на Map
і Set
, але са слабымі спасылкамі на ключы/значэнні (дакументацыя).
Прыклад:
const weakMap = new WeakMap();
const obj = {};
weakMap.set(obj, 'value');
Удасканаленні Math, Number, String і Object
Апісанне: Новыя метады, дададзеныя ў Math
, Number
, String
і Object
.
Прыклад:
Math.trunc(4.9); // 4
Number.isNaN(NaN); // true
Object.assign({}, {a: 1}, {b: 2}); // {a: 1, b: 2}
2016 (ES7 / ECMAScript 2016)
Аператар узвядзення ў ступень (Exponentiation Operator)
Апісанне: Спрошчаны разлік ступені з **
.
Прыклад:
const square = 2 ** 2; // 4
Array.prototype.includes
Апісанне: Правярае, ці ёсць у масіве пэўнае значэнне.
Прыклад:
const array = [1, 2, 3];
array.includes(2); // true
2017 (ES8 / ECMAScript 2017)
Async/Await
Апісанне: Сінтаксічны цукар для працы з промісамі, што робіць асінхронны код прасцейшым для чытання і напісання.
Прыклад:
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
Object.entries і Object.values
Апісанне: Метад атрымлівае масіў уласных пералічаных уласцівасцяў аб'екта ў выглядзе пар [ключ, значэнне] і значэнняў.
Прыклад:
const obj = { a: 1, b: 2 };
Object.entries(obj); // [['a', 1], ['b', 2]]
Object.values(obj); // [1, 2]
Дабаўленне радкоў (String Padding)
Апісанне: Метад padStart
і padEnd
дадае сімвалы да радка да дасягнення пэўнай даўжыні.
Прыклад:
'5'.padStart(2, '0'); // '05'
'5'.padEnd(2, '0'); // '50'
Object.getOwnPropertyDescriptors
Апісанне: Вяртае ўсе ўласныя апісальнікі ўласцівасцяў аб'екта.
Прыклад:
const obj = { prop: 1 };
const descriptors = Object.getOwnPropertyDescriptors(obj);
/*{
"prop": {
"value": 1,
"writable": true,
"enumerable": true,
"configurable": true
}
} */
Завяршаючыя коскі ў спісах параметраў і выкліках функцый (Trailing Commas in Function Parameter Lists and Calls)
Апісанне: Дазваляе выкарыстоўваць завяршаючыя коскі ў параметрах функцый і аргументах.
Прыклад:
function foo(
param1,
param2,
) { /*...*/ }
foo(
'a',
'b',
);
2018 (ES9 / ECMAScript 2018)
Асінхронныя ітэратары (Async Iteration)
Апісанне: Цыкл for-await-of
для ітэрацыі па асінхронных ітэруемых аб'ектах.
Прыклад:
async function process(array) {
for await (let value of array) {
console.log(value);
}
}
Rest/Spread уласцівасцяў (Rest/Spread Properties)
Апісанне: Spread і rest уласцівасцяў для аб'ектаў.
Прыклад:
const obj = { a: 1, b: 2, c: 3 };
const { a, ...rest } = obj; // rest = { b: 2, c: 3 }
const newObj = { ...rest }; // { b: 2, c: 3 }
Promise.finally
Апісанне: Дадае метад .finally()
у промісы, які выконвае зваротны выклік пры завяршэнні промісу незалежна ад выніку.
Прыклад:
fetch('/api')
.then(response => response.json())
.catch(error => console.error(error))
.finally(() => console.log('Fetch attempt finished.'));
Паляпшэнні RegExp
Апісанне: Новыя функцыі у рэгулярных выразах.
Прыклад:
const regExp = /(?<=\$)\d+/; // lookbehind assertion
const match = 'Price: $10'.match(regExp); // ['10']
const regExpNamed = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = regExpNamed.exec('2020-12-01');
console.log(result.groups.year); // '2020'
2019 (ES10 / ECMAScript 2019)
Array.prototype.flat і Array.prototype.flatMap
Апісанне: flat
сплюшчвае ўкладзеныя масівы, flatMap
- адлюстроўвае і сплюшчвае вынік.
Прыклад:
const arr = [1, [2, [3]]];
arr.flat(2); // [1, 2, 3]
const arr1 = [1, 2, 1];
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// Expected output: Array [1, 2, 2, 1]
Object.fromEntries
Апісанне: Канвертуе спіс пар ключ-значэнне ў аб'ект.
Прыклад:
const entries = [['a', 1], ['b', 2]];
const obj = Object.fromEntries(entries); // { a: 1, b: 2 }
String.prototype.trimStart і String.prototype.trimEnd
Апісанне: Прыбірае прабелы з пачатку і канца радка.
Прыклад:
const str = ' hello ';
str.trimStart(); // 'hello '
str.trimEnd(); // ' hello'
Неабавязковая пераменная ў блоку catch (Optional Catch Binding)
Апісанне: Дазваляе апусціць пераменную памылкі ў блоку catch
.
Прыклад:
try {
// code
} catch {
console.error('An error occurred');
}
Symbol.prototype.description
Апісанне: Дазваляе атрымаць апісанне сімвала непасрэдна.
Прыклад:
const sym = Symbol('desc');
console.log(sym.description); // 'desc'
Рэвізія Function.prototype.toString
Апісанне: Метад toString()
вяртае дакладныя сімвалы, уключаючы прабелы і каментарыі.
Прыклад:
function /* comment */ foo() {}
console.log(foo.toString()); // 'function /* comment */ foo() {}'
2020 (ES11 / ECMAScript 2020)
Аператар выбару (Optional Chaining (?.))
Апісанне: Бяспечны доступ да глыбока ўкладзеных уласцівасцяў.
Прыклад:
const user = {};
const street = user.address?.street; // undefined
Аператар Nullish Coalescing (??)
Апісанне: Вяртае правы аперанд, калі левы аперанд null
або undefined
.
Прыклад:
const name = null ?? 'Guest'; // 'Guest'
Дынамічны імпарт (Dynamic import())
Апісанне: Дынамічны імпарт модуляў.
Прыклад:
import('/modules/my-module.js')
.then(module => {
// use module
});
BigInt
Апісанне: Дазваляе прадстаўленне і апрацоўку цэлых лікаў, большых за Number.MAX_SAFE_INTEGER
.
Прыклад:
const bigNumber = 123456789012345678901234567890n;
Promise.allSettled
Апісанне: Вяртае проміс, які вырашаецца, калі ўсе перададзеныя промісы альбо вырашаны, альбо адхілены.
Прыклад:
const promises = [Promise.resolve(1), Promise.reject('error')];
Promise.allSettled(promises)
.then(results => console.log(results));
GlobalThis
Апісанне: Стандартны спосаб доступу да глабальнага this
значэння ў розных асяроддзях.
Прыклад:
globalThis.setTimeout(() =>console.log('Hello'), 1000);
String.prototype.matchAll
Апісанне: Вяртае ітэратар усіх супадзенняў у радку з рэгулярным выразам.
Прыклад:
const regex = /t(e)(st(\d?))/g;
const str = 'test1test2';
const matches = [...str.matchAll(regex)];
Экспарт прастораў імёнаў модуля (Module Namespace Exports)
Апісанне: Паляпшэнне падтрымкі апрацоўкі прастораў імёнаў у ES модулях.
Прыклад:
export * as ns from 'module';
2021 (ES12 / ECMAScript 2021)
Аператары лагічнага прызначэння (&&=
, ||=
, ??=
)
Апісанне: Аб'ядноўваюць лагічныя аперацыі з выказваннямі прызначэння.
Прыклад:
let a = 1;
a ||= 2; // a = 1
let b = null;
b ??= 2; // b = 2
Лічбавыя раздзяляльнікі (Numeric Separators)
Апісанне: Падкрэсленні выкарыстоўваюцца як раздзяляльнікі для паляпшэння чытальнасці лікавых літаралаў.
Прыклад:
const largeNumber = 1_000_000; // 1000000
String.prototype.replaceAll
Апісанне: Замяняе ўсе ўхапленні падрадка.
Прыклад:
const str = 'foo foo';
const newStr = str.replaceAll('foo', 'bar'); // 'bar bar'
Promise.any
Апісанне: Вяртае першы вырашаны проміс або масіў з памылкамі, калі ўсе промісы былі адхілены.
Прыклад:
const promises = [Promise.reject(1), Promise.resolve(2)];
Promise.any(promises)
.then(result => console.log(result)); // 2
WeakRefs
Апісанне: Стварае слабыя спасылкі на аб'екты, каб пазбегнуць прадухілення збору смецця.
Прыклад:
const obj = {};
const weakRef = new WeakRef(obj);
FinalizationRegistry
Апісанне: Рэгіструе зваротны выклік для ачысткі аб'ектаў, якія былі сабраны зборшчыкам смецця.
Прыклад:
const registry = new FinalizationRegistry(heldValue => {
console.log('Object was garbage collected', heldValue);
});
let obj = {};
registry.register(obj, 'myValue');
obj = null; // obj is now eligible for garbage collection
2022 (ES13 / ECMAScript 2022)
Класыз прыватнымі палямі (Class Fields)
Апісанне: Публічныя і прыватныя метады і метады экземпляра ў класах.
Прыклад:
class MyClass {
myField = 10; // public field
#privateField = 20; // private field
getPrivateField() {
return this.#privateField;
}
}
Верхняўзроўневае await (Top-Level Await)
Апісанне: Дазваляе выкарыстанне await
на верхнім узроўні модуляў.
Прыклад:
const data = await fetch('/api/data').then(res => res.json());
console.log(data);
Індэксы супадзенняў RegExp (RegExp Match Indices)
Апісанне: matchAll
вяртае пазіцыі пачатку і канца супадзенняў.
Прыклад:
const regex = /(foo)/g;
const str = 'foo foo';
const matches = [...str.matchAll(regex)];
console.log(matches[0].indices); // [[0, 3], [0, 3]]
2023 (ES14 / ECMAScript 2023)
Метады findLast
і findLastIndex
для масіваў і TypedArray
Апісанне: Метад для пошуку апошняга элемента і яго індэкса ў масіве або TypedArray.
Прыклад:
const arr = [1, 2, 3, 4];
const lastEven = arr.findLast(n => n % 2 === 0); // 4
const lastEvenIndex = arr.findLastIndex(n => н % 2 === 0); // 3
Сімвалы як ключы для WeakMap
Апісанне: Сімвалы можна выкарыстоўваць у якасці ключоў у WeakMap
.
Прыклад:
const sym = Symbol('key');
const wm = new WeakMap();
wm.set(sym, 'value');
Групоўка масіваў (Array Grouping)
Апісанне: Метад groupBy
і groupByToMap
для групавання элементаў у масівах.
Прыклад:
const array = ['one', 'two', 'three'];
const grouped = array.groupBy(word => word.length);
// { 3: ['one', 'two'], 5: ['three'] }
Граматыка Hashbang
Апісанне: Дазваляе выкарыстанне #!
у пачатку скрыптаў для Unix-падобных асяроддзяў.
Прыклад:
#!/usr/bin/env node
console.log('Hello, world!');
Заключэнне
Такім чынам мы разгледзеді важныя абнаўленні ў JS за апошнія некалькі гадоў, і спадзяюся што наша праца будзе для вас карыснай.
Хацелася б адзначыць што былі і іншыя змены, але яны не былі настолькі важнымі, таму у гэты спіс не папалі.
ЗЫ : Калі ласка далучайцеся да нашых аўтараў. Давайце пашыраць нашу беларускамоўную прастору разам.