Полное руководство по функциям ES10

JavaScript

ES10Пока только черновик. но в дополнение кObject.fromEntriesБольшинство функций уже естьChromeреализации, так почему бы вам не начать исследовать ее раньше? Когда все браузеры начнут его поддерживать, у вас будет преимущество, это только вопрос времени. Для всех, кто заинтересован в изучении ES10, вотне инопланетянингид.

ES10 не так важен, как ES6, с точки зрения новых языковых возможностей, но он добавляет некоторые интересные вещи (некоторые из которых не работают в текущих версиях браузера: 20.02.2019)

ES6Самая популярная функция встрелочная функция, тогдаES10в?

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

BigIntявляется 7-м примитивным типом.

BigIntявляется произвольным целым числом точности. Это означает, что теперь переменные могут представлять 2^53 числа. А максимум 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

typeof

typeof 10;
⇨ 'number'
typeof 10n;
⇨ 'bigint'

=== ==

10n === BigInt(10);
⇨ true
10n == 10;
⇨ true

* /

200n / 10n
⇨ 20n
200n / 20
⇨ Uncaught TypeError:
   Cannot mix BigInt and other types, use explicit conversions <

- +

-100n
⇨ -100n
+100n
⇨ Uncaught TypeError:
  Cannot convert a BigInt value to a number

когда ты читаешь этоmatchAll, может бытьChrome C73официально реализован в - если нет, то все равно стоит посмотреть. особенно если вырегулярное выражениенаркоман.

string.prototype.matchAll()

Если вы погуглите «строка javascript соответствует всем», первый результат может выглядеть так:Как мне написать регулярное выражение, чтобы «соответствовать всем»?. Лучшие результаты предложат вам использоватьString.matchПри сопоставлении в регулярном выражении илиRegExp.excилиRegExp.textдобавить после/g...

Во-первых, давайте посмотрим, как работает старая спецификация.

String.match,matchВозвращается только первый совпадающий строковый аргумент.

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

Результат матча один'l'. (Уведомление:matchРезультаты сопоставления сохраняются вmatches[0]а не вmatches), в строке'hello'искать совпадения в'l'Только'l'был возвращен. использоватьregexpпараметры дают тот же результат.

мы ставим символы'l'заменить выражением/l/:

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

добавить / г

String.matchИспользуйте регулярные выражения, чтобы вывести/gЯрлыки вернут несколько совпадений.

let string = 'Hello'
let ret = string.match(/l/g) // ['l', 'l']

Отлично ... внизуES10В среде мы получили несколько совпадений, и это всегда работало.

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

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

Захват групп в регулярном выражении просто()Извлечь совпадения в скобках. ты можешь начать/regex/.exec(string)а такжеstring.matchгруппа захвата.

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

См. практический пример:

Совпадение образцов строк

Создайте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, отображается следующий результат (он не возвращает все совпадения сразу).

Вывод консоли:

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. использоватьRegExpРегулярные выражения для создания объектов не могут использовать точки (.) цепочка операторов.
  6. **передовой:RegEx**Объект отслеживает внутреннюю часть последней совпавшей позиции.lastIndexсвойства, которые могут быть разрушительными для сложных случаев.

.matchAll()как работать

Вот простой пример.

мы пытаемся сопоставить строкуHelloвсеeа такжеl. потому что назадiterator, поэтому мы используемfor ... ofиметь дело с этим.

// Match all occurrences of the letters: 'e' 或者 '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()Пример группы захвата:.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

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

динамический импорт

Импорт теперь может быть назначен переменной:

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

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(2), Array(2), Array(2)]
0: (2)[1, 2]
1: (2)[2, 4]
2: (2)[3, 6]
3: (2)[4, 8]
4: (2)[5, 10]

Снова сплющите массив:

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

Object.fromEntries()

Преобразование списка пар ключ-значение в объект.

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 }

String.trimStart() & String.trimEnd()

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

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

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

JSONобъект доступен для разбораJSONформат (но и многое другое.)JavaScript JSONобъекты также имеютstringifyа такжеparseметод.

Этот метод разбора подходит для хорошо структурированногоJSONстрока типа:

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

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

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

JSONФормат строки отличается от литералов объектов... он выглядит почти так же, но может использовать любые кавычки вокруг имен свойств, а также может включать методы (методы, не разрешенные в формате JSON):

let object_literal = { property：1，meth：（）=> {} };

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

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

Это улов.ES10предыдущийEcmaScriptНа самом деле не полностью поддерживаетсяJSONФормат. существуетES10Раньше неэкранированные разделители строк не принимались.U + 2028и разделители абзацевU + 2029персонаж:

U+2029 — это разделитель строк.

U+2029 — разделитель абзацев. Иногда он может проникнуть в вашу строку формата JSON.

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

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

Итак, если вы пройдетеevalстрока типа "console.log(‘hello’)"Это выполнитJavaScriptОператор (попытки преобразовать фактический код через строку.) Это также похоже на то, какJSON.parseобработает вашJSONнить.

Стабильный массив.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, }
];
// Create our own sort criteria function:
let my_sort = (a, b) => a.count - b.count;
// Perform stable ES10 sort:
let sorted = fruit.sort(my_sort);
console.log(sorted);

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

New Function.toString()

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

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

Classic example

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

Консольный вывод (тело функции в строковом формате:)

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

Вот другие случаи:

непосредственно из имени функции

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

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

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

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

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

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

Function().toString();
⇨ function anonymous() {}

Функция динамического генератора*

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

prototype.toString

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

Дополнительная привязка улова

В прошлом,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
}

Но в некоторых случаях требуетсяerrorПеременная не используется:

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;
}

Тот, кто написал этот код, пытался, принуждаяtrueпокидатьtryпункт. Но... это не так (т. Douglas Massolari.сказал).

(() => {
    try {
        JSON.parse(text)
        return true
    } catch(err) {
        return false
    }
})()
=> false

В ES10 связывание ошибок отлова является необязательным.

вы можете пропустить сейчасerrorПеременная:

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

нормализованный объект globalThis

Глобально до ES10thisСтандартизации нет.

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

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объект, который теперь должен быть доступен для глобальной области видимости на любой платформе:

// Access global array constructor
globalThis.Array(0, 1, 2);
⇨ [0, 1, 2]

// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };

console.log(globalThis.v);
⇨ { flag: true }

Symbol.description

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

let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);
symObj; // Symbol(My Symbol)
String(symObj) === `Symbol(${mySymbol})`); // true
symObj.description; // "My Symbol"

Синтаксис хеш-банга

shebang unixпользователи будут знакомы сAKA.

Он указывает интерпретатор (что будет выполнять ваш файл JavaScript?)

ES10 стандартизировал это. Я не буду вдаваться в подробности, так как технически это не настоящая функция языка. Но в основном он объединяет то, как JavaScript выполняется на стороне сервера.

$ ./index.js

заменять:

$ node index.js

При Unix подобных операционным системам.

ES10 Classes: private, static & public members

Новый синтаксический символ # (хэш-тег) теперь находится непосредственно в области тела класса иconstructorи методы класса используются для определенияvariables,functions,gettersа такжеsetters

Вот довольно бессмысленный пример, сосредоточенный только на новом синтаксисе:

class Raven extends Bird {
    #state = { eggs: 10};
    // getter
    get #eggs() { 
        return state.eggs;
    }
    // setter
    set #eggs(value) {
        this.#state.eggs = value;
    }
    #lay() {
        this.#eggs++;
    }
    constructor() {
        super();
        this.#lay.bind(this);
    }
    #render() {
        /* paint UI */
    }
}

Честно говоря, я думаю, что это делает язык более трудным для чтения.

Это по-прежнему моя новая любимая функция, потому что она мне нравится.C ++разclasses.

Резюме и отзывы

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

Я часто пишу учебник, потому что хочу изучить некоторые предметы самостоятельно. Вот один из таких случаев, с помощью ресурса, который кто-то уже собрал:

Спасибо Сергею Подгорному за написание этогоУчебник по ES10. Спасибо Selvaganesh за то, что написал этоУчебник по ES10.

Категории