От автора: после релиза ECMAScript2015 (также называемого ES6) JavaScript изменился и улучшился. Это отличная новость для всех разработчиков JavaScript. Кроме того, новая версия ECMAScript выпускается каждый год. Скорее всего, вы не заметили, какие функции были добавлены в последнюю версию ECMAScript, выпущенную в июне 2019 года. Я кратко расскажу вам о новых функциях, добавленных в последней версии, а также о функциях, готовящихся к выходу в будущей версии.
Функции, о которых я расскажу, еще не определены к релизу в следующей версии. Все, о чем я расскажу в этом посте, в настоящее время находится на этапе 3. Посмотрите этот репозиторий, если вы хотите получить более подробную информацию.
Функции ECMAScript2019 (ES10)
1. Array.prototype.flat
Метод, который создает новый массив со всеми элементами вложенного массива, рекурсивно объединенными в него до заданной глубины.
JavaScript const array = [1, 2, [3, 4]];
array.flat(); // [1, 2, 3, 4];
| 12 | const array = [1, 2, [3, 4]];array.flat(); // [1, 2, 3, 4]; |
Это очень полезно, особенно если вам нужно сгладить вложенный массив. Если глубина вашего массива больше, чем один уровень, то один вызов flat не может полностью сгладить массив. flat принимает параметр для глубины, который указывает, на сколько уровней вы хотите сгладить массив.
JavaScript // 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
| 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 const arr = [«it’s Sunny in», «», «California»];arr.flatMap(x => x.split(» «));
// [«it’s»,»Sunny»,»in», «», «California»]
| 12 | 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 находится несколько интересных функций. Я кратко представлю вам некоторые из них.
Числовые разделители
Когда вы присваивали переменной большое число, вы никогда не сомневались в том, правильно ли вы его написали? Это предложение позволяет поставить подчеркивание между числами, чтобы вам было проще считать разряды.
JavaScript 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
| 123456789 | 1_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 // 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);
Раздвижные ряды в CSS Grid
| 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 // usage.mjs import { output } from «./awaiting.mjs»; export function outputPlusValue(value) { return output + value }console.log(outputPlusValue(100));
setTimeout(() => console.log(outputPlusValue(100), 1000);
| 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 const obj = { name: ‘James’ };
const name = obj.name || ‘Jane’; // James
| 1234 | const obj = { name: ‘James’};const name = obj.name || ‘Jane’; // James |
Если obj.name ложно, тогда возвращаем ‘Jane’, поэтому undefined не возвращается. Но проблема в том, что в этом случае пустая строка (‘’) также считается ложной. Нам нужно переписать это снова, как показано ниже.
JavaScript const name = (obj.name && obj.name !== ») ? obj.name : ‘Jane’;
| 1 | const name = (obj.name && obj.name !== ») ? obj.name : ‘Jane’; |
Это довольно утомительно каждый раз писать такой код. Этот оператор позволяет проверить только null и undefined.
JavaScript 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
| 123456789101112131415 | 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: 0const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false |
Опциональные цепочки
Это предложение идет в паре с нулевым коалесцированием для JavaScript, и особенно для TypeScript. TypeScript объявили, что они включат Нулевое коалесцирование и это предложение в следующую версию, 3.7.0.
Псевдослучайное добавление иллюстраций с помощью CSS
JavaScript const city = country && country.city;
// undefined if city doesn’t exist
| 12 | const city = country && country.city; // undefined if city doesn’t exist |
Посмотрите на пример кода. Чтобы получить city, который находится в объекте country, нам нужно проверить, существует ли country и существует ли city в country. С помощью Опциональных цепочек этот код может быть реорганизован следующим образом.
JavaScript const city = country?.city; // undefined if city doesn’t exist
| 1 | const city = country?.city; // undefined if city doesn’t exist |
Эта функция кажется очень удобной и полезной для такой ситуации.
JavaScript import { fetch } from ‘../yourFetch.js’;(async () => { const res = await fetch(); // res && res.data && res.data.cities || undefined const cities = res?.data?.cities;
})();
| 1234 | 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:
JavaScript try { const first = await Promise.any(promises); // Any of the promises was fulfilled. } catch (error) { // All of the promises were rejected.
}
| 123456 | try { const first = await Promise.any(promises); // Any of the promises was fulfilled.} catch (error) { // All of the promises were rejected.} |
С помощью шаблона Promise:
JavaScript Promise.any(promises).then( (first) => { // Any of the promises was fulfilled. }, (error) => { // All of the promises were rejected. }
);
| 12345678 | 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
Редакция: Команда webformyself.
Вам также может понравиться