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

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

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

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

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

Функции ECMAScript2019 (ES10)

1. Array.prototype.flat

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

JavaScript

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

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

JavaScript

123// Crazy exampleconst 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

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

JavaScript

12const arr = [“it’s Sunny in”, “”, “California”];arr.flatMap(x => x.split(” “));// [“it’s”,”Sunny”,”in”, “”, “California”]
READ
Как обнаружить блокировщик рекламы

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

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

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

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

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

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

JavaScript

1234567891_000_000_000           // Ah, so a billion101_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.

JavaScript

READ
7 единиц измерения CSS, о которых вы могли не знать
12345// awaiting.mjsimport { process } from “./some-module.mjs”;const dynamic = import(computedModuleSpecifier);const data = fetch(url);export const output = process((await dynamic).default, await data);

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

JavaScript

1234// usage.mjsimport { 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. Мы часто пишем такой код.

JavaScript

1234const obj = {   name: ‘James’};const name = obj.name || ‘Jane’; // James

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

JavaScript

1const name = (obj.name && obj.name !== ”) ? obj.name : ‘Jane’;

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

JavaScript

123456789101112131415const 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: 0const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

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

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

READ
Ориентация изображений в Веб

JavaScript

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

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

JavaScript

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

Эта функция кажется очень удобной и полезной для такой ситуации.

JavaScript

1234import { 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:

JavaScript

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

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

JavaScript

12345678Promise.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

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

Комментарии

comments

Оценить статью
Блог о самом интересном.
Добавить комментарий