Готовящиеся к выпуску новые функции JavaScript

Дата публикации: 2019-11-28

От автора: после релиза ECMAScript2015 (также называемого ES6) JavaScript изменился и улучшился. Это отличная новость для всех разработчиков JavaScript. Кроме того, новая версия ECMAScript выпускается каждый год. Скорее всего, вы не заметили, какие функции были добавлены в последнюю версию ECMAScript, выпущенную в июне 2019 года. Я кратко расскажу вам о новых функциях, добавленных в последней версии, а также о функциях, готовящихся к выходу в будущей версии.

Функции, о которых я расскажу, еще не определены к релизу в следующей версии. Все, о чем я расскажу в этом посте, в настоящее время находится на этапе 3. Посмотрите этот репозиторий, если вы хотите получить более подробную информацию.

Функции ECMAScript2019 (ES10)

1. Array.prototype.flat

Метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными в него до заданной глубины.

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

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

Это очень полезно, особенно если вам нужно сгладить вложенный массив. Если глубина вашего массива больше, чем один уровень, то один вызов flat не может полностью сгладить массив. flat принимает параметр для глубины, который указывает, на сколько уровней вы хотите сгладить массив.

// 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

// 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

Чем глубже вы хотите выполнять поиск в массиве, тем больше вычислительного времени потребуется для его выравнивания. Обратите внимание, что IE и Edge не поддерживают эту функцию.

2. Array.prototype.flatMap

Метод сначала отображает каждый элемент с помощью функции сопоставления, а затем выравнивает результат в новый массив.

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

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

Разница между flat и flatMap заключается в том, что вы можете добавить пользовательскую функцию flatMap для управления каждым значением. Кроме того, в отличие от flat, flatMap сглаживает массив только с одним уровнем глубины. Возвращаемое значение должно иметь тип массива. Это очень полезно, когда вам нужно что-то сделать перед сглаживанием массива.

В ES10 были добавлены и другие функции. По этой ссылке вы можете найти более подробную информацию.

Новые функции на стадии 3

На стадии 3 находится несколько интересных функций. Я кратко представлю вам некоторые из них.

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

Когда вы присваивали переменной большое число, вы никогда не сомневались в том, правильно ли вы его написали? Это предложение позволяет поставить подчеркивание между числами, чтобы вам было проще считать разряды.

1_000_000_000           // Ah, so a billion
101_475_938.38          // And this is hundreds of millionslet 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,500let 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

1_000_000_000 // Ah, so a billion

101_475_938.38 // And this is hundreds of millionslet 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,500let 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

Каждый разработчик будет решать, использовать ли эту функцию после ее релиза, но одно точно — эта функция уменьшит вашу головную боль при подсчетах!

await верхнего уровня

await верхнего уровня позволяет модулям выступать в качестве больших асинхронных функций: с помощью await верхнего уровня модули ECMAScript (ESM) могут выделять await ресурсы, заставляя другие модули import ожидать их, прежде чем они начнут оценивать тело.

Мотивация этой функции заключалась в том, что когда у вас есть модуль import, в котором есть функция async, вывод функции async будет undefined.

// 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);

// 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);

Здесь у нас есть два файла. Вывод может быть undefined, если вызов выполняется до выполнения задач промисов.

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

// usage.mjs

import { output } from "./awaiting.mjs";

export function outputPlusValue(value) { return output + value }console.log(outputPlusValue(100));

setTimeout(() => console.log(outputPlusValue(100), 1000);

usage.mjs не будет выполнять какие-либо операторы в нем до тех пор, пока await в awaiting.mjs не будут содержать разрешенного промиса.

Нулевое коалесцирование для JavaScript

Это было бы одной из самых полезных функций среди предложений на этапе 3. Мы часто пишем такой код.

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

const obj = {

name: 'James'

};

const name = obj.name || 'Jane'; // James

Если obj.name ложно, тогда возвращаем ‘Jane’, поэтому undefined не возвращается. Но проблема в том, что в этом случае пустая строка (‘’) также считается ложной. Нам нужно переписать это снова, как показано ниже.

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

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

Это довольно утомительно каждый раз писать такой код. Этот оператор позволяет проверить только null и undefined.

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

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

Опциональные цепочки

Это предложение идет в паре с нулевым коалесцированием для JavaScript, и особенно для TypeScript. TypeScript объявили, что они включат Нулевое коалесцирование и это предложение в следующую версию, 3.7.0.

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

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

Посмотрите на пример кода. Чтобы получить city, который находится в объекте country, нам нужно проверить, существует ли country и существует ли city в country. С помощью Опциональных цепочек этот код может быть реорганизован следующим образом.

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

1	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;
})();

import { fetch } from '../yourFetch.js';(async () => {

const res = await fetch(); // res && res.data && res.data.cities || undefined

const cities = res?.data?.cities;

})();

Promise.any

Promise.any принимает итеруемые промисы и возвращает промис, который выполнен первым итериуемвм промисом, или отклонен с массивом причин отклонения, если все данные промиса отклонены.

С async-await:

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

try {

const first = await Promise.any(promises);

// Any of the promises was fulfilled.

} catch (error) {

// All of the promises were rejected.

}

С помощью шаблона Promise:

Promise.any(promises).then(
  (first) => {
    // Any of the promises was fulfilled.
  },
  (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.

}

);

Так как у нас были промисы all, allSettled и race, но не было any, эта функция будет очень полезна для определенных ситуаций.

Тем не менее, это предложение еще не было протестировано, так что может потребоваться больше времени для его принятия в будущей версии ECMAScript.

Заключение

На этапе 3 так много интересных предложений. Мне не терпится увидеть их в ES11 или ES12. Конечно, некоторые мне не понадобятся, но некоторые из них определенно сделают мои коды более элегантными.

Автор: Moon

Источник: //medium.com

Редакция: Команда webformyself.

Метки: JavaScript