Фичи JavaScript,

о которых вы должны

знать

~

Дисклеймер:

Обновлено: декабрь 2019 – Stage 4

~

Фичи ECMAScript2019 (ES10)

1. Array.prototype.flat

const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];

// Crazy example
const crazyArray = [1, 2, [3, 4], [[5], [6, [7,8]]]];
crazyArray.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8];
// The parameter must be the number type

2. Array.prototype.flatMap

const arr = ["it's Sunny in", "", "California"];
arr.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

Новые фичи на Stage 3

1. Числовые разделители

1_000_000_000 // Ah, so a billion
101_475_938.38 // And this is hundreds of millions
let fee = 123_00; // $123 (12300 cents, apparently)
let fee = 12_300; // $12,300 (woah, that fee!)
let amount = 12345_00; // 12,345 (1234500 cents, apparently)
let amount = 123_4500; // 123.45 (4-fixed financial)
let amount = 1_234_500; // 1,234,500
let budget = 1_000_000_000_000;
// What is the value of `budget`? It's 1 trillion!
//
// Let's confirm:
console.log(budget === 10 ** 12); // true

2. Top-level await

// awaiting.mjs
import { process } from "./some-module.mjs";
const dynamic = import(computedModuleSpecifier);
const data = fetch(url);
export const output = process((await dynamic).default, await data);

// usage.mjs
import { output } from "./awaiting.mjs";
export function outputPlusValue(value) { return output + value }
console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);

3. Нулевое слияние для JavaScript

const obj = {
name: 'James'
};
const name = obj.name || 'Jane'; // James

const name = (obj.name && obj.name !== '') ? obj.name : 'Jane';

const response = {
settings: {
nullValue: null,
height: 400,
animationDuration: 0,
headerText: '',
showSplashScreen: false
}
};
const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

4. Optional Chaining

const city = country && country.city;
// undefined if city doesn't exist

const city = country?.city; // undefined if city doesn't exist

import { fetch } from '../yourFetch.js';
(async () => {
const res = await fetch();
// res && res.data && res.data.cities || undefined
const cities = res?.data?.cities;
})();

5. Promise.any

try {
const first = await Promise.any(promises);
// Any of the promises was fulfilled.
} catch (error) {
// All of the promises were rejected.
}

Promise.any(promises).then(
(first) => {
// Any of the promises was fulfilled.
},
(error) => {
// All of the promises were rejected.
}
);

Выводы

Array.prototype.flat

Array.prototype.flatMap

TC39 proposals in Github

Numeric Separators

Top-level await

Nullish Coalescing for JavaScript

Optional Chaining

Promise.any