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

ES6

javascript

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

Сення для вас пакрокавы агляд зменаў у 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 = /(?&lt;=\$)\d+/; // lookbehind assertion
const match = 'Price: $10'.match(regExp); // ['10']

const regExpNamed = /(?&lt;year>\d{4})-(?&lt;month>\d{2})-(?&lt;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 за апошнія некалькі гадоў, і спадзяюся што наша праца будзе для вас карыснай. Хацелася б адзначыць што былі і іншыя змены, але яны не былі настолькі важнымі, таму у гэты спіс не папалі.

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

Admin, 2024-08-29

Каментары

Ваша імя

Ваш каментар

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