Давайте взглянем на некоторые полезные будущие функции в JavaScript. Вы увидите их синтаксис, ссылки и будете в курсе их прогресса, а мы напишем небольшой набор тестов, чтобы показать, как начать работу с этими предложениями уже сегодня!
Как JavaScript обновляет итерацию
Если вы уже знакомы сEcma TC39Как комитет принимает решения и обрабатывает изменения в языке JavaScript, не стесняйтесь пропустить этот раздел.
Для остальных из нас, которым интересно, как развивался язык программирования JavaScript, я хотел дать краткий обзор процесса.
JavaScript — этоECMAScriptреализация языкового стандарта, который был создан для стандартизации всех языковыхвыполнить, поскольку он был разработан на заре веб-браузеров.
Уже есть восемь версийСтандарт ECMAScript, имеется семь изданий (от четвертого издания отказались).
каждыйJavaScript-движокНачинайте внедрять указанные изменения после каждого релиза.это изображениеТаблица покажет, что не каждый движок реализует каждую функцию, и некоторым движкам требуется больше времени, чем другим, для реализации этих функций. Хотя это может показаться не оптимальным, я считаю, что это лучше, чем отсутствие стандарта!
предложение
Каждая версия ECMAScript проходит процесс рассмотрения предложений. Если предложение будет признано полезным и совместимым с предыдущими версиями, оно будет включено в следующую версию.
Предложение состоит из пяти этапов, визложено в этом документе. Каждое предложение представляет собой «чучело», первоначально предложенное илиstage 0. На этом уровне они либо не были представлены в технический комитет, либо не были отклонены, но не соответствовали критериям для перехода к следующему этапу.
Ни одно из представленных ниже предложений не является частью Этапа 0.
В качестве личной рекомендации я хотел бы призвать читателей избегать использования предложений стадии 0 в рабочих приложениях, пока они не перейдут в нестабильную стадию. Цель этой рекомендации состоит только в том, чтобы избежать проблем при отказе от предложений или их радикальном изменении.
тестирование
Знакомство с функциями программирования часто показывает фрагменты кода вне контекста или использует эти функции для создания приложений. Так как яTDDБудучи большим поклонником, я считаю, что лучший способ понять, что делает функция, — это протестировать ее.
мы будем использоватьУчебные тесты, созданные Джимом Ньюкирком для достижения этой цели._._, тесты, которые мы пишем, будут делать утверждения не о нашем собственном коде, а о самом языке программирования. Эта же концепция очень полезна при изучении сторонних API или любых других языковых функций.
Transpilers
Если вы уже знакомы с конвертерами, можете пропустить этот раздел.
Некоторые могут задаться вопросом, как мы собираемся использовать языковые функции, которые еще не реализованы!
JavaScript — это развивающийся язык, который поставляется с некоторой компиляцией JavaScript в JavaScript.преобразователь. На первый взгляд это может показаться не очень полезным, но уверяю вас!
Это позволяет нам писать последнюю версию JavaScript — даже включая предложения фазы 0 — и по-прежнему иметь возможность выполнять ее в современных средах выполнения, таких как веб-браузеры и Node.js.Он делает это, изменяя наш код, чтобы он был написан для более старой версии JavaScript..
Babelявляется одним из самых популярных транспондеров JavaScript. Мы будем использовать его прямо сейчас.
шаг
вам нужно установитьNode.jsа такжеNPM.
Для этого вы можете запустить следующие команды в новом каталоге:
npm init -f && npm i ava@1.0.0-beta.3 @babel/preset-env@7.0.0-beta.42 @babel/preset-stage-0@7.0.0-beta.42 @babel/register@7.0.0-beta.42 @babel/polyfill@7.0.0-beta.42 @babel/plugin-transform-runtime@7.0.0-beta.42 @babel/runtime@7.0.0-beta.42 --save-dev
Затем вам нужно добавить в файл package.json следующее:
"scripts": { "test": "ava"},"ava": { "require": [ "@babel/register", "@babel/polyfill" ] }
Наконец, создайте файл .babelrc:
{ "presets": [ ["@babel/preset-env", { "targets": { "node": "current" } }], "@babel/preset-stage-0" ], "plugins": [ "@babel/plugin-transform-runtime" ]}
Теперь вы готовы начать писать тесты!
1. Дополнительные ссылки
В JavaScript мы постоянно используем объекты. Иногда эти объекты не имеют точной формы, которую мы ожидаем. Ниже вы найдете пример надуманного объекта данных — возможно, полученного из базы данных или вызова API.
const data = { user: { address: { street: 'Pennsylvania Avenue', }, },};
К сожалению, похоже, этот пользователь не завершил регистрацию:
const data = { user: {},};
Скажем, когда я пытаюсь получить доступ к улицам на панели инструментов приложения, я получаю следующую ошибку:
console.log(data.user.address.street);
// Uncaught TypeError: Cannot read property 'street' of undefined
Чтобы избежать этого, в настоящее время мы должны получить доступ к свойству «улица» следующим образом:
const street = data && data.user && data.user.address && data.user.address.street;console.log(street);
// undefined
На мой взгляд, такой подход:
- не красиво
- тяжелый
- многословный
Здесь место для необязательных ссылок. Вы можете использовать его следующим образом:
console.log(data.user?.address?.street);
// undefined
Так проще, да? Теперь, когда мы увидели полезность этой функции, мы можем продолжить копать глубже.
Итак, давайте напишем тест!
Теперь мы видим, что необязательное связывание поддерживает прежнюю функциональность точечной записи. Далее добавим тест на неприятные пути.
Вот как необязательная цепочка используется для доступа к свойствам массива:
Иногда мы не знаем, реализована ли функция в Object.
Типичным примером является использование веб-браузера. Некоторые старые браузеры могут не иметь определенных функций. К счастью, мы можем использовать необязательную цепочку, чтобы определить, реализована ли функция!
Если цепочка неполная, выражение не будет выполняться. За кадром выражение примерно превращается в:
value == null ? value[some expression here]: undefined;
Ничего после необязательного оператора цепочки? Будет выполняться, если значение не определено или равно нулю. Мы можем увидеть это правило в действии в следующем тесте:
С этим! Дополнительное связывание уменьшает потребность в операторах if, импорте библиотек, таких как lodash, и связывании с помощью &&.
Предупреждение: вы можете заметить минимальные накладные расходы при использовании этой необязательной цепочки. Каждый уровень вы проверяете? Должна быть завернута в какую-то условную логику под капотом. При чрезмерном использовании производительность снижается. Я рекомендую использовать его для какой-либо проверки объекта при получении или создании объектов. Это ограничит потребность в этих проверках и, таким образом, уменьшит потери производительности.
Связь
Это предложениеСвязь. Я также скопирую его внизу этого поста, чтобы вы могли видеть все ссылки на предложения в одном месте!
2. Нулевое слияние
Объединить: сплавить или смешать вместе
Вот некоторые общие операции, которые мы видим в JavaScript:
- Проверить неопределенное или нулевое значение
- Defaulting Values
- Убедитесь, что 0, false и пустая строка не являются значениями по умолчанию.
Возможно, вы видели это так:
value != null ? value : 'default value';
или это:
value || 'default value'
Проблема в том, что для второй реализации наше третье рабочее условие не выполняется. В этом случае число ноль, логическое значение false и пустая строка считаются ложными. Вот почему мы должны явно проверять наличие null и undefined.
value != null
Это работает с:
value !== null && value !== undefined
Здесь появляется новое предложение (недопустимое слияние). Теперь мы можем сделать это:
value ?? 'default value';
Это защищает нас от случайного выбора этих фиктивных значений по умолчанию, но все же без троичной суммы! = null проверка ловит null и undefined.
Теперь, когда мы видим синтаксис, мы можем написать простой тест, чтобы проверить, как он работает.
Вы можете видеть в тесте, что он использует значения по умолчанию null, undefined и void 0 (что оценивается как undefined). По умолчанию он не принимает ложные значения, такие как 0, '' и false. существуетздесьПроверьте GitHub.
3. Трубопроводчик
В функциональном программировании у нас есть термин "комбинация", что представляет собой объединение нескольких вызовов функций в цепочку. Каждая функция получает выходные данные предыдущей функции в качестве своих входных данных. Вот пример, который мы обсуждаем на чистом JavaScript:
function doubleSay (str) { return str + ", " + str;}
function capitalize (str) { return str[0].toUpperCase() + str.substring(1);}
function exclaim (str) { return str + '!';}
let result = exclaim(capitalize(doubleSay("hello")));result //=> "Hello, hello!"
Эта конкатенация настолько распространена, что функции композиции существуют в большинстве библиотек функций, таких какlodashа такжеramda.
С новым оператором канала вы можете пропустить сторонние библиотеки и написать вышеприведенное следующим образом:
let result = "hello" |> doubleSay |> capitalize |> exclaim;result //=> "Hello, hello!"
Цель состоит в том, чтобы сделать цепочку более читаемой. Он также будет хорошо работать в будущих частичных приложениях, или пока его можно реализовать так:
let result = 1 |> (_ => Math.max(0, _));result //=> 1
let result = -5 |> (_ => Math.max(0, _));result //=> 0
Теперь, когда мы видим синтаксис, мы можем начать писать тесты!
Одна вещь, которую вы, возможно, заметили, заключается в том, что после добавления асинхронной функции в конвейер вам нужно дождаться значения. Это потому, что ценность стала обещанием. Есть некоторыепредлагаемые измененияПоддержка |> await asyncFunction, но еще не реализована или не решена.
Что ж, теперь, когда вы увидели эти предложения в действии, я надеюсь, вы попробуете их!
Полный код обучающего теста можно найти здесь.оказаться.
Вот ссылки на все четыре предложения:
tc39/proposal-optional-chaining _Contribute to proposal-optional-chaining development by creating an account on GitHub._github.com
tc39/proposal-nullish-coalescing _proposal-nullish-coalescing - Nullish coalescing proposal x ?? y_github.com
tc39/proposal-partial-application _proposal-partial-application - Proposal to add partial application to ECMAScript_github.com
tc39/proposal-pipeline-operator _proposal-pipeline-operator - A proposal for adding the simple-but-useful pipeline operator to JavaScript._github.com