Программист Максим Слепов

ES2019

1) Array.flat() – делает многомерный массив плоским

const arr = [[1, 2], [3, 4, [5, 6]]];
arr.flat()  // [1, 2, 3, 4, Array(2)]
arr.flat().flat()  // [1, 2, 3, 4, 5, 6]

2) Array.mapFlat() – выполняет Array.Map, а потом сглаживает готовый массив до 1 уровня и возвращает его

const arr = [1, 2, 3, 4, 5, 6];
arr.flatMap((x) => [x, x*2])  // [1, 2, 2, 4, 3, 6, 4, 8, 5, 10, 6, 12]

3) Object.fromEntries() – преобразует пары "ключ-значение" в объект

const arr = [
    ["a", 1],
    ["b", 2],
    ["c", 3]
]
Object.fromEntries(arr)  // {a: 1, b: 2, c: 3}

4) String.trimStart() и String.trimEnd() – удаляет пробелы до первого значения и до последнего значения соответственно

const str = "  Hello world   ";
str.trimStart()  // "Hello world   "
str.trimEnd()  // "  Hello world"

5) Optional Catch Binding – в блоке try/catch стало не обязательно привязываться к параметр ошибки, теперь опционально

try {
    this.abvgd()
} catch {
     console.log("Error!")  
}
// Error!

try {
    this.abvgd()
} catch(e) {
    console.log(e)
}
// TypeError: this.abvgd is not a function

6) Function.toString() – возвращает текст кода функции

function a() {
    const b = location.href
}
a.toString()  // код функции

 

ES2020

1) Nullish Coalescing – проверка на null и undefined (но с исключением 0, "" и false)

const vals = {
   a : "",
   b : 0,
   c : undefined,
   d : null,
   e : false
}
// было
let value1 = vals.a || "default";  // default
let value2 = vals.b || "default";  // default
let value3 = vals.c || "default";  // default
let value4 = vals.d || "default";  // default
let value5 = vals.e || "default";  // default
// стало
value1 = vals.a ?? "default";  // ""
value2 = vals.b ?? "default";  // 0
value3 = vals.c ?? "default";  // default
value4 = vals.d ?? "default";  // default
value5 = vals.e ?? "default";  // false

2) Optional Chaining – доступ к свойству внизу иерархии без отдельной проверки вышестоящих свойств

const obj = {
   outer : {
      inner : "hello"
   }
}
// было
const inner = obj.outer && obj.outer.inner;
// стало
inner = obj.outer?.inner;

3) Promise.allSettled – возвращает промис с массивом состояний промисов, но только после того, как все исходные промисы были завершены

const p1 = new Promise((resolve) => resolve("success1"));
const p2 = new Promise((resolve, reject) => reject("fail"));
const p3 = new Promise((resolve) => resolve("success2"));
// было
Promise.all([p1, p2, p3])
   .then(response => console.log(response))
   .catch(error => console.log(error))
// "fail"

// стало
Promise.allSettled([p1, p2, p3])
   .then(response => console.log(response))
// {status: "fulfilled", value: "success1"} 
// {status: "rejected", reason: "fail"} 
// {status: "fulfilled", value: "success2"} 

4) Динамический import() – импорт можно делать прямо в переменную в коде

const helper = "./helpers/module";
import(helper)
   .then((module) => {
   	   module.method1();
       module.method2();
   })

// или
(async function() {
   const helper = "./helpers/module";
   const module = await import(helper);
   module.method1();
   module.method2();
})()

5) String.protype.matchAll – при сопоставлении строки с регулярным выражением метод matchAll() возвращает итератор по всем результатам, включая группы захвата

6) globalThis – стандартизированный глобальный контекст выполнения this для разных сред (браузер, NodeJS, Service Worker)