Более 20 небольших кейсов помогут вам ознакомиться с новыми функциями ES10.

Автор: Карлос Кабальеро.

Источник: Дев

Переводчик: Front-end Xiaozhi

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

ES10Хотя не нравитсяES6так много новых функций, ноES10Есть еще несколько полезных функций. Текст предваряется простыми примерами.ES10новые особенности. Таким образом, мы можем быстро понять, не видя слишком много официальных объяснений.

Основные новые функции ES10 заключаются в следующем:

• Метод массива:flatа такжеflatMap
• Object.fromEntries
• Строковый метод:trimStartа такжеtrimEnd
• СимволdescriptionАтрибуты
• try { } catch {} // Параметр catch можно не указывать
• JSON ⊂ ECMAScript(чтобы сделать ECMAScript совместимым со всем текстом, поддерживаемым JSON)
• Правильно сформированный JSON.stringify()
• стабильныйArray.prototype.sort()
• исправленныйFunction.toString
• BigInt — седьмой примитивный тип.
• динамический импорт
• стандартизацияglobalThisобъект

1. Array.flat() && Array.flatMap

Array.flat()Метод рекурсивно проходит массив до указанной глубины и возвращает все элементы, объединенные с элементами в пройденных подмассивах, в новый массив.

Array.flatMap()Метод сначала сопоставляет каждый элемент с помощью функции сопоставления, а затем сжимает результат в новый массив. это сmapи значение глубины 1flatпочти то же самое, ноflatMapОбычно несколько эффективнее объединить в один метод.

Дело 1:

Array.flat()

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];
multi.flat();               // [1,2,3,4,5,6,Array(4)]
multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]
multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]
multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

Array.flatMap()

let array = [1, 2, 3, 4, 5];

array.map(x => [x, x * 2]);

arrayРезультат сейчас:

[Array(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]

использоватьflatMapСпособ:

array.flatMap(v => [v, v * 2]);
[1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Полный пример:

2.Object.fromEntries()

Object.fromEntries()Метод преобразует список пар ключ-значение в объект.

Дело 1:

let obj = { apple : 10, orange : 20, banana : 30 };
let entries = Object.entries(obj);
entries;
(3) [Array(2), Array(2), Array(2)]
 0: (2) ["apple", 10]
 1: (2) ["orange", 20]
 2: (2) ["banana", 30]
let fromEntries = Object.fromEntries(entries);
{ apple: 10, orange: 20, banana: 30 }

Второй случай:

3.String.protype.matchAll

Первым вопросом было, как писать регулярные выражения“match all”?

Лучший ответ подскажетString.matchс регулярными выражениями и/gиспользуется вместе или с/gизRegExp.execили с/gизRegExp.test.

Давайте сначала посмотрим, как работает старая спецификация.

со строковыми параметрамиString.matchВернуть только первое совпадение:

let string = 'Hello';
let matches = string.match('l');
console.log(matches[0]); // "l"

результат один"l"(Примечание: совпадения хранятся вmatches[0]вместоmatches)

Будуstring.matchа такжеregexТо же самое касается совместного использования параметров:

Используйте регулярные выражения/l/найти строку“hello”середина“l”персонаж:

let string = "Hello";
let matches = string.match(/l/);
console.log(matches[0]); // "l"

Добавить/г смеси

let string = "Hello";
let ret = string.match(/l/g); // (2) [“l”, “l”];

Так зачем использовать совершенно новыйmatchAllМетод? Прежде чем решить эту проблему, давайте посмотримгруппа захвата.

Группа захвата регулярных выражений

существуетregexв группе захвата только что из()Чтобы извлечь шаблон в круглых скобках, вы можете использовать/regex/.exec(string)а такжеstring.matchГруппа захвата.

Регулярные группы захвата создаются путем переноса шаблона в(pattern)создан в , но на объекте результатаgroupsсобственность, это:(?<name>pattern).

Чтобы создать новое имя группы, просто добавьте круглые скобки?<name>, результат, сгруппировано(pattern)матч станетgroup.name, и добавить кmatchОбъект, следующий пример:

Примеры сопоставления строк:

создано здесьmatch.groups.colorа такжеmatch.groups.bird:

const string = 'black*raven lime*parrot white*seagull';
const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/g;
while (match = regex.exec(string))
{
    let value = match[0];
    let index = match.index;
    let input = match.input;
    console.log(`${value} at ${index} with '${input}'`);
console.log(match.groups.color);
    console.log(match.groups.bird);
}

нужно вызывать несколько разregex.execметод для перебора всего набора результатов поиска. вызывается во время каждой итерации.exec, будет отображен следующий результат (он не вернет все совпадения сразу), поэтому используйтеwhileцикл.

Результат выглядит следующим образом:

black*raven at 0 with 'black*raven lime*parrot white*seagull'
black
raven
lime*parrot at 11 with 'black*raven lime*parrot white*seagull'
lime
parrot
white*seagull at 23 with 'black*raven lime*parrot white*seagull'
white
seagull

Но странно:

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

использовать.matchAll()хорошая причина

1. При использовании с группами захвата он можетболее элегантный, группа захвата просто используется()Часть регулярного выражения для извлечения шаблона.
2. Этовернуть итераторВместо массива полезен сам итератор.
3. Итераторы можно преобразовать в массивы с помощью оператора расширения (…).
4. это позволяет избежать/gОтметить регулярное выражение при извлечении неизвестного регулярного выражения из базы данных или внешнего источника и с устаревшимRegExЭто очень полезно при использовании с объектами.
5. Регулярные выражения, созданные с помощью объектов RegEx, не могут использовать точки.(.)цепочка операторов.
6. Дополнительно: Внутренние элементы отслеживания изменений объекта RegEx для позиции последнего совпадения.lastindexсвойства, которые могут нанести ущерб в сложных ситуациях.

.matchAll()Как это работает?

Давайте попробуем подобрать словаhelloсредняя букваeа такжеlВсе экземпляры , поскольку возвращается итератор, вы можете использоватьfor…ofПрокрутите его:

// Match all occurrences of the letters: "e" or "l" 
let iterator = "hello".matchAll(/[el]/);
for (const match of iterator)
    console.log(match);

На этот раз вы можете пропустить/g,.matchallМетоду это не нужно, результат такой:

[ 'e', index: 1, input: 'hello' ] // Iteration 1
[ 'l', index: 2, input: 'hello' ] // Iteration 2
[ 'l', index: 3, input: 'hello' ] // Iteration 3

Пример захвата групп с помощью .matchAll() :

const string = 'black*raven lime*parrot white*seagull';
const regex = /(?<color>.*?)\*(?<bird>[a-z0-9]+)/;
for (const match of string.matchAll(regex)) {
    let value = match[0];
    let index = match.index;
    let input = match.input;
    console.log(`${value} at ${index} with '${input}'`);
console.log(match.groups.color);
    console.log(match.groups.bird);
}

Обратите внимание, что нет/gподписать, потому что.matchAll()Включив его, он печатает так:

black*raven at 0 with 'black*raven lime*parrot white*seagull'
black
raven
lime*parrot at 11 with 'black*raven lime*parrot white*seagull'
lime
parrot
white*seagull at 23 with 'black*raven lime*parrot white*seagull'
white
seagull

Возможно, это исходное регулярное выражение, очень похожее по эстетике, исполнениюwhileРеализация цикла. Но, как уже упоминалось, по многим причинам, упомянутым выше, это лучший подход, удаление/gНе вызовет бесконечных циклов.

Комплексный случай:

4. String.trimStart() и String.trimEnd()

trimStart(): удалить начальные пробелы из строк.

trimEnd(): удалить пробелы в конце строки.

Дело 1:

let greeting = "     Space around     ";
greeting.trimEnd();   // "     Space around";
greeting.trimStart(); // "Space around     ";

Второй случай:

5.Symbol.Description

descriptionэто свойство только для чтения, которое возвращаетSymbolНеобязательная строка описания для объекта.

Дело 1:

let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
symObj.description; // "My Symbol"

Второй случай:

6. Параметр catch можно не указывать

В прошлом,try/catchв предложенииcatchЗаявление требует переменной.try/catchОператоры помогают отлавливать ошибки на уровне терминала:

try {
    // Call a non-existing function undefined_Function
    undefined_Function("I'm trying");
}
catch(error) {
    // Display the error if statements inside try above fail
    console.log( error ); // undefined_Function is undefined
}

В некоторых случаях требуемая переменная ошибки не используется:

try {
    JSON.parse(text); // <--- this will fail with "text not defined"
    return true; <--- exit without error even if there is one
}
catch (redundant_sometmes) <--- this makes error variable redundant
{
    return false;
}

В ES10 переменные, которые перехватывают ошибки, являются необязательными, а переменные ошибок теперь можно пропускать:

Дело 1:

try {
    JSON.parse(text);
    return true;
}
catch
{
    return false;
}

Второй случай:

7. JSON ⊂ ECMAScript

Что такое надмножество JSON? все еще помню⊂Это обозначение можно интерпретировать как это предложениеJSON ⊂ ECMAScriptкороче говоря, чтобы сделать ECMAScript совместимым со всем текстом, поддерживаемым JSON. ECMAScript использовался в стандартеJSON.parseЧастично поясняет, что JSON действительно является подмножеством, но поскольку содержимое JSON обычно может содержатьU+2028разделитель строк сU+2029Разделители абзацев, но не ECMAScript.

Проект призван решить эту проблему. До этого, если вы использовалиJSON.parse()При выполнении строки с указанными выше специальными символами вы получите толькоSyntaxErrorсообщение об ошибке. Этот черновик также совместим с предыдущими версиями, и его единственное влияние на пользователей заключается в том, чтобы оставить его таким, какой он есть, то есть в среде выполнения, которая в настоящее время не поддерживает синтаксический анализ специальных символов.SyntaxErrorошибка.

8. Правильно сформированный JSON.stringify()

Это обновление исправляет персонажейU+D800прибытьU+DFFFИногда обработка может переходить в строку JSON. Это может быть проблемой, потому чтоJSON.stringifyможет отформатировать эти числа так, чтобы они не имели эквивалентаUTF-8Символьное значение, но для формата JSON требуется кодировка UTF-8.

Метод синтаксического анализа использует правильно сформированную строку JSON, например:

'{ “prop1” : 1, "prop2" : 2 }'; // A well-formed JSON format string

Обратите внимание, что двойные кавычки вокруг имени свойства абсолютно необходимы для создания строки в правильном формате JSON. Отсутствующие или любые другие кавычки не приведут к корректному формату JSON.

'{ “prop1” : 1, "meth" : () => {}}'; // Not JSON format string

Строковый формат JSON сObject LiteralДругой, последний выглядит почти так же, но может использовать любые кавычки вокруг имен свойств, а также может содержать методы (формат JSON не позволяет методы):

let object_literal = { property: 1, meth: () => {} };

Во всяком случае, кажется, что все в порядке. Первый пример кажется совместимым. Но они также являются простыми примерами, которые работают безотказно в большинстве случаев!

U+2028 и U+2029 символов

Проблема в том, что EcmaScript до ES10 на самом деле не полностью поддерживает формат JSON. Неэкранированные разделители строк не принимаются в эпоху до ES10.U+2028и разделители абзацевU+2029персонаж:

То же самое верно для всех символов от U+D800 до U+DFFF.

Если эти символы проникнут в строку в формате JSON (скажем, из записи базы данных), вы можете потратить часы, пытаясь понять, почему остальная часть программы генерирует ошибки синтаксического анализа.

Итак, если вы пройдетеevalтакая строка“console.log(' hello ')”, который выполнит оператор JS (пытаясь преобразовать строку в фактический код), также что-то вродеJSON.parseСпособ обработки вашей строки JSON.

Предлагаемое ES10 решение состоит в том, чтобы представлять непарные суррогатные кодовые точки в виде escape-последовательностей JSON, а не представлять их как одну.UTF-16Кодовый модуль возвращается.

9. Стабильный Array.prototype.sort()

Реализации до V8 использовали нестабильный алгоритм быстрой сортировки для массивов с более чем 10 элементами.

Стабильный алгоритм сортировки — это когда два объекта с одинаковыми значениями ключей появляются в отсортированном выводе в том же порядке, в каком они появляются в несортированном вводе.

Но это уже не так, ES10 обеспечивает стабильную сортировку массивов:

var fruit = [
    { name: "Apple",      count: 13, },
    { name: "Pear",       count: 12, },
    { name: "Banana",     count: 12, },
    { name: "Strawberry", count: 11, },
    { name: "Cherry",     count: 11, },
    { name: "Blackberry", count: 10, },
    { name: "Pineapple",  count: 10, }
];
// 创建排序函数:
let my_sort = (a, b) => a.count - b.count;
// 执行稳定的ES10排序:
let sorted = fruit.sort(my_sort);
console.log(sorted);

Вывод в консоль (элементы отображаются в обратном порядке):

Второй случай:

10. Новая функция.toString()

Функции — это объекты, и каждый объект имеет.toString()метод, так как он первоначально существовал вObject.prototype.toString()начальство. Все объекты (включая функции) наследуются от него посредством наследования классов на основе прототипов.

Это значит, что у нас уже естьfuncion.toString()метод.

Но ES10 идет еще дальше, пытаясь стандартизировать строковое представление всех объектов и встроенных функций. Вот различные новые случаи:

Классический пример:

function () { console.log('Hello there.'); }.toString();

выход:

⇨ function () { console.log('Hello there.'); }

непосредственно в имени метода .toString()

Number.parseInt.toString();
⇨ function parseInt() { [native code] }

Контекст привязки:

function () { }.bind(0).toString();
⇨ function () { [native code] }

Встроенные вызываемые функциональные объекты:

Symbol.toString();
⇨ function Symbol() { [native code] }

Динамически генерируемая функция:

function* () { }.toString();
⇨ function* () { }

prototype.toString

Function.prototype.toString.call({});
⇨ Function.prototype.toString requires that 'this' be a Function"

11. BigInt — целое число произвольной точности

BigIntявляется седьмым примитивным типом.

BigInt — целое число произвольной точности. Это означает, что теперь переменные могут表示²⁵³числа, не только9007199254740992.

const b = 1n;  // 追加 n 以创建 BigInt

В прошлом больше, чем9007199254740992целочисленное значение . В случае превышения значение будет заблокировано какMAX_SAFE_INTEGER + 1:

const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
limit + 1;
⇨ 9007199254740992
limit + 2;
⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceeded
const larger = 9007199254740991n;
⇨ 9007199254740991n
const integer = BigInt(9007199254740991); // initialize with number
⇨ 9007199254740991n
const same = BigInt("9007199254740991"); // initialize with "string"
⇨ 9007199254740991n

12. Динамический импорт

Динамический импорт возвращает объект пространства имен модуля запрошенного модуля.promise. Поэтому его можно использовать сasync/await.

Дело 1:

element.addEventListener('click', async() => {
  const module = await import(`./api-scripts/button-click.js`);
  module.clickEvent();
})

Второй случай:

13. Нормализуйте объект globalThis

До ES10 globalThis не был стандартизирован, и обычный проект может быть совместим с разными платформами следующими способами:

var getGlobal = function () {
    if (typeof self !== 'undefined') { return self; }
    if (typeof window !== 'undefined') { return window; }
    if (typeof global !== 'undefined') { return global; }
    throw new Error('unable to locate global object');
};

Но даже это не всегда работает. Поэтому ES10 добавилglobalThisобъект, который отныне используется для доступа к глобальной области видимости на любой платформе:

但即使这样也不总是奏效。因此，ES10 添加了 globalThis 对象，从现在开始，该对象用于在任何平台上访问全局作用域:

В свободное время я трачу много времени на разбор статей, что очень тяжело.Интересно, ценю ли я покупку куриной ножки.

Суммировать

JS — это динамический язык, который очень полезен для веб-разработки. С момента появления ES6 в 2015 году язык JS претерпел динамическую эволюцию. В этом посте мы рассмотрим функции, появившиеся в ES10 (2019), и представим некоторые функции, которые будутES11(2020)стабильные характеристики вstate 3, и, вероятно, будет стандартизирован в следующей версии.

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

---

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Dev.to/Карл III O/12…

---

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.