Раджараодомв
Трудно отследить то, что нового в JavaScript (Ecmascript). И еще сложнее найти полезные примеры кода.
Таким образом, в этой статье я охвачу все 18 функций, которые перечислены в Готовые предложения TC39 которые были добавлены в ES2016, ES2017 и ES2018 (окончательный проект) и показывают их полезными примерами.
Хорошо, давайте перейдем на эти один за другим.
1. Array.Prototype.includes.
включает в себя Простой метод экземпляра на массиве и помогает легко найти, если элемент находится в массиве (включая NAN В отличие от indexof ).
2. Экспендиационный инфикс оператор
Математические операции, такие как добавление и вычитание, имеют инфиксные операторы, такие как + и - , соответственно. Похоже на них, ** Оператор Infix обычно используется для экспонентной операции. В Ecmascript 2016, ** был введен вместо Math.pow Отказ
1. Object.values ()
Object.values () это новая функция, которая похожа на Object.keys () Но возвращает все значения собственных свойств объекта, исключая любые значения (ы) в прототипной цепочке.
2. Object.entries ()
Object.entries () связано с Объект. Keys , но вместо того, чтобы возвращать только ключи, он возвращает как ключи и значения в массиве. Это делает очень простым делать такие вещи, как использовать объекты в петлях или преобразования объектов на карты.
Пример 1:
Пример 2:
3. Струнная прокладка
Два метода экземпляра были добавлены в строку – String.prototype.padstart.padstart. и String.prototype.padend – это позволяет добавить/подготовить либо пустую строку или какую-то другую строку в начало или конец исходной строки.
'someString'.padStart(numberOfCharcters [,stringForPadding]); '5'.padStart(10) // ' 5' '5'.padStart(10, '=*') //'=*=*=*=*=5' '5'.padEnd(10) // '5 ' '5'.padEnd(10, '=*') //'5=*=*=*=*='
3.1 Пример Padstart:
В приведенном ниже примере у нас есть список номеров различной длины. Мы хотим подготовить «0», чтобы все предметы имели ту же длину 10 цифр для целей отображения. Мы можем использовать Padstart (10, '0') Чтобы легко достичь этого.
3.2 Пример подушки:
Postend Действительно пригодится, когда мы печатаем несколько элементов различной длины и хотите правильно выровнять их правильно.
Пример ниже – хороший реалистичный пример того, как Postend , Padstart и Object.entries. Все собираются вместе, чтобы произвести красивый вывод.
const cars = {
'?BMW': '10',
'?Tesla': '5',
'?Lamborghini': '0'
}
Object.entries(cars).map(([name, count]) => {
//padEnd appends ' -' until the name becomes 20 characters
//padStart prepends '0' until the count becomes 3 characters.
console.log(`${name.padEnd(20, ' -')} Count: ${count.padStart(3, '0')}`)
});
//Prints..
// ?BMW - - - - - - - Count: 010
// ?Tesla - - - - - - Count: 005
// ?Lamborghini - - - Count: 0003.3 ⚠️ padstart и padend на emojis и Другие двойные байтовые символы
Emojis и другие двухбайтовые символы представлены с использованием нескольких байтов Unicode. Так что Padstart и Padend могут не работать, как ожидалось! ⚠️
Например: скажем, мы пытаемся подумать строку сердце добраться до 10 персонажи с ❤️ emoji. Результат будет выглядеть ниже:
//Notice that instead of 5 hearts, there are only 2 hearts and 1 heart that looks odd! 'heart'.padStart(10, "❤️"); // prints.. '❤️❤️❤heart'
Это потому, что ❤️ – 2 точки кода ( '\ U2764 \ UFE0F' )! Слово сердце Сам 5 символов, поэтому у нас есть всего 5 символов, оставленных на панели. Так что происходит, это то, что JS прокладывает два сердца, используя '\ u2764 \ ufe0f' и это производит ❤️❤ ️. За последний, он просто использует первый байт сердца \ U2764 который производит ❤
Поэтому мы в конечном итоге: ❤️❤️❤❤️❤️❤eart
4. Объект.getownpropertyDescriptors.
Этот метод возвращает все детали (включая GARTER GET и сеттер Установить Методы) для всех свойств данного объекта. Основная мотивация для добавления этого состоит в том, чтобы обеспечить неглубокое копирование/клонирование объекта в другой объект которые также копируют Gotter и Setter функционировать в отличие от Объект.assign Отказ
Object.Ascign Неглубокие копии Все детали, кроме Gotter и Setter функций исходного исходного объекта.
Пример ниже показывает разницу между Объект.assign и Object.getownPropertyDescriptors вместе с Объект.defineproperties скопировать оригинальный объект Автомобиль в новый объект Электрический автомобиль Отказ Вы увидите это, используя Объект.getownpropertyDescriptors. , скидка Функции Getter и Setter также копируются в целевой объект.
ДО…
ПОСЛЕ…
var Car = {
name: 'BMW',
price: 1000000,
set discount(x) {
this.d = x;
},
get discount() {
return this.d;
},
};
//Print details of Car object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(Car, 'discount'));
//prints..
// {
// get: [Function: get],
// set: [Function: set],
// enumerable: true,
// configurable: true
// }
//Copy Car's properties to ElectricCar using Object.assign
const ElectricCar = Object.assign({}, Car);
//Print details of ElectricCar object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(ElectricCar, 'discount'));
//prints..
// {
// value: undefined,
// writable: true,
// enumerable: true,
// configurable: true
// }
//⚠️Notice that getters and setters are missing in ElectricCar object for 'discount' property !??
//Copy Car's properties to ElectricCar2 using Object.defineProperties
//and extract Car's properties using Object.getOwnPropertyDescriptors
const ElectricCar2 = Object.defineProperties({}, Object.getOwnPropertyDescriptors(Car));
//Print details of ElectricCar2 object's 'discount' property
console.log(Object.getOwnPropertyDescriptor(ElectricCar2, 'discount'));
//prints..
// { get: [Function: get], ??????
// set: [Function: set], ??????
// enumerable: true,
// configurable: true
// }
// Notice that getters and setters are present in the ElectricCar2 object for 'discount' property!5. Добавить трейлинг запятые в параметрах функции
Это незначительное обновление, которое позволяет нам иметь комиссионные запятые после последнего параметра функции. Почему? Чтобы помочь с инструментами, такими как Git виноват, чтобы гарантировать, что только новые разработчики будут обвинять.
Пример ниже показывает проблему и решение.
6. Async/a ждать
Это, безусловно, является самой важной и полезной функцией, если вы спросите меня. Async Functions позволяет нам не иметь дело с обратным вызовом ада и заставить весь код выглядеть проще.
async Ключевое слово сообщает Compiler JavaScript для обработки функции по-разному. Компилятор делает паузы, когда он достигает Ждите Ключевое слово внутри этой функции. Предполагается, что выражение после ждать Возвращает обещание и ожидает до тех пор, пока обещание не будет разрешено и не отклонено, прежде чем двигаться дальше.
В приведенном ниже примере getamount Функция вызывает две асинхронные функции Гутубер и getbankbalance Отказ Мы можем сделать это в обещании, но используя Async ждет более элегантный и простой.
6.1 Async Функции сами вернуть обещание.
Если вы ждете результата из асинхронизации функции, вам нужно использовать обещание тогда синтаксис для захвата его результата.
В следующем примере мы хотим войти в систему, используя console.log Но не в DoubleanDadd. Так что мы хотим ждать и использовать тогда Синтаксис для передачи результата к console.log Отказ
6.2 Вызов Async/ждут параллельно
В предыдущем примере мы вызываем ждут дважды, но каждый раз, когда мы ждем одну секунду (всего 2 секунды). Вместо этого мы можем распараллелизировать его с А а также B не зависят друг от друга, используя Обещание. Все Отказ
6.3 Обработка ошибок Async/a ждать функции
Существуют различные способы обрабатывать ошибки при использовании Async ждут.
Вариант 1 – Используйте попробуйте поймать в функции
//Option 1 - Use try catch within the function
async function doubleAndAdd(a, b) {
try {
a = await doubleAfter1Sec(a);
b = await doubleAfter1Sec(b);
} catch (e) {
return NaN; //return something
}
return a + b;
}
//?Usage:
doubleAndAdd('one', 2).then(console.log); // NaN
doubleAndAdd(1, 2).then(console.log); // 6
function doubleAfter1Sec(param) {
return new Promise((resolve, reject) => {
setTimeout(function() {
let val = param * 2;
isNaN(val) ? reject(NaN) : resolve(val);
}, 1000);
});
}Вариант 2 – уловить каждое ждущее выражение
Так как каждый ждать Выражение возвращает обещание, вы можете ловить ошибки на каждой строке, как показано ниже.
//Option 2 - *Catch* errors on every await line
//as each await expression is a Promise in itself
async function doubleAndAdd(a, b) {
a = await doubleAfter1Sec(a).catch(e => console.log('"a" is NaN')); // ?
b = await doubleAfter1Sec(b).catch(e => console.log('"b" is NaN')); // ?
if (!a || !b) {
return NaN;
}
return a + b;
}
//?Usage:
doubleAndAdd('one', 2).then(console.log); // NaN and logs: "a" is NaN
doubleAndAdd(1, 2).then(console.log); // 6
function doubleAfter1Sec(param) {
return new Promise((resolve, reject) => {
setTimeout(function() {
let val = param * 2;
isNaN(val) ? reject(NaN) : resolve(val);
}, 1000);
});
}Вариант 3 – Поймать всю функцию async-a ждать
//Option 3 - Dont do anything but handle outside the function
//since async / await returns a promise, we can catch the whole function's error
async function doubleAndAdd(a, b) {
a = await doubleAfter1Sec(a);
b = await doubleAfter1Sec(b);
return a + b;
}
//?Usage:
doubleAndAdd('one', 2)
.then(console.log)
.catch(console.log); // ???<------- use "catch"
function doubleAfter1Sec(param) {
return new Promise((resolve, reject) => {
setTimeout(function() {
let val = param * 2;
isNaN(val) ? reject(NaN) : resolve(val);
}, 1000);
});
}1. Общая память и атомная
Это огромная, довольно продвинутая функция и является основным улучшением к двигателям JS.
Основная идея состоит в том, чтобы привести какую-то многопоточную функцию для JavaScript, чтобы разработчики JS могут писать высокопроизводительные, одновременные программы в будущем, позволяя управлять памятью самим собой вместо того, чтобы позволить JS двигателю управлять памятью.
Это делается новым типом глобального объекта, называемого SharedArrayBuffer что по существу сохраняет данные в поделился пространство памяти Отказ Таким образом, эти данные могут быть разделены между основными нитьми JS и потоками веб-рабочих.
До сих пор, если мы хотим делиться данными между основными нитьми JS и веб-работниками, мы должны были скопировать данные и отправить его на другой поток, используя PostMessage Отказ Уже нет!
Вы просто используете SharedArrayBuffer, а данные мгновенно доступен как основным потоком, так и несколькими потоками веб-работника.
Но совместная память между нитями может вызвать гоночные условия. Чтобы помочь избежать условий гонок, введен глобальный объект « Atomics ». Atomics Предоставляет различные методы для блокировки общей памяти, когда нить использует свои данные. Он также предоставляет методы обновления таких данных в этой совместно используемой памяти.
Если вы заинтересованы, я рекомендую прочитать:
- От рабочих до общими моментами Y – Лукасфкоста
- Мультфильм вступление в SharedArrayBuffers – Лин Кларк
- Общая память и атомная кишка – Доктор Аксель Раушмайер
2. Помеченный шаблон буквальный ограничение удален
Во-первых, нам нужно уточнить, какой «помеченный шаблон литерал», так что мы можем понять эту функцию лучше.
В ES2015 + есть функция, называемая помеченным шаблоном литералом, который позволяет разработчикам настроить то, как строки интерполизированы. Например, в стандартном уровне строки интерполированы, как ниже …
В помеченном литерате вы можете написать функцию для получения жесткозедированных частей строкового литерала, например [ 'Привет ', '!' ] и переменные замены, например, [«Раджа»] , как параметры в пользовательской функции (например Greet ) и верните все, что вы хотите от этой пользовательской функции.
Пример ниже показывает, что наш пользовательский «тег» функция приветствовать Принимает время дня, как “Доброе утро!” «Добрый день», и т. Д. В зависимости от времени дня в строковую буквальную букву и возвращает настраиваемую строку.
//A "Tag" function returns a custom string literal.
//In this example, greet calls timeGreet() to append Good //Morning/Afternoon/Evening depending on the time of the day.
function greet(hardCodedPartsArray, ...replacementPartsArray) {
console.log(hardCodedPartsArray); //[ 'Hello ', '!' ]
console.log(replacementPartsArray); //[ 'Raja' ]
let str = '';
hardCodedPartsArray.forEach((string, i) => {
if (i < replacementPartsArray.length) {
str += `${string} ${replacementPartsArray[i] || ''}`;
} else {
str += `${string} ${timeGreet()}`; //<-- append Good morning/afternoon/evening here
}
});
return str;
}
//?Usage:
const firstName = 'Raja';
const greetings = greet`Hello ${firstName}!`; //??<-- Tagged literal
console.log(greetings); //'Hello Raja! Good Morning!' ?
function timeGreet() {
const hr = new Date().getHours();
return hr < 12
? 'Good Morning!'
: hr < 18 ? 'Good Afternoon!' : 'Good Evening!';
}Теперь, когда мы обсудили, какие функции «Tagged» есть, многие люди хотят использовать эту функцию в разных областях, такие как в терминале для команд и запросов HTTP для сочинения URI и так далее.
Проблема с помеченным строковым литералом
Проблема заключается в том, что спецификации ES2015 и ES2016 не позволяют использовать escape символы, такие как «\ U» (Unicode), «\ u» (hexadecimal), если они не выглядят точно так же, как `\ u00a9 или \ u {2f804} или \ u9.
Поэтому, если у вас есть меченная функция, которая внутренне использует правила некоторых других домен (например, правила терминала), что может потребоваться использовать \ ubla123abla Это не похоже на \ U0049 или \ u {@ f804}, то вы получите синтаксисную ошибку.
В ES2018 правила расслаблены, чтобы обеспечить такие, казалось бы, неверные аутентические символы, пока функция с меткой возвращает значения в объекте с «приготовленным» свойством (где недопустимые символы «не определены»), а затем «сырье» ( с тем, что вы хотите).
function myTagFunc(str) {
return { "cooked": "undefined", "raw": str.raw[0] }
}
var str = myTagFunc `hi \ubla123abla`; //call myTagFunc
str // { cooked: "undefined", raw: "hi \\unicode" }3. Флаг «Доталл» для регулярного выражения
В настоящее время в Regex, хотя точка («.») Должна соответствовать одному символу, он не соответствует новым символам Line, таких как \ n \ r \ f etc Отказ
Например:
//Before
/first.second/.test('first\nsecond'); //falseЭто улучшение позволяет точечному оператору соответствовать любому одному символу. Чтобы убедиться, что это ничего не нарушает, нам нужно использовать \ s Флаг, когда мы создаем Regex для этого для работы.
//ECMAScript 2018
/first.second/s.test('first\nsecond'); //true Notice: /s ?? Вот общий API из Предложение док:
4. Regex по имени захват группы?
Это улучшение приносит полезную функцию Regexp с других языков, таких как Python, Java и так далее под названием «названные группы. «Эта функция позволяет разработчикам написать Regexp для предоставления имен (идентификаторов) в формате (? <имя> ...) Для разных частей группы в Regexp. Затем они могут использовать это имя, чтобы захватить какую группу, которую им нужно с легкостью.
4.1 Основные названные пример группы
В нижеприведении мы используем (? <год>) (? <месяц>) и (? <день>) Имена для группировки разных частей даты Regex. Результирующий объект теперь будет содержать Группы Недвижимость со свойствами Год , месяц и день с соответствующими значениями.
4.2 Использование именованных групп внутри самого Regeex
Мы можем использовать \ K <имя группы> Формат для создания ссылки Группа в самом Regeex. В следующем примере показано, как это работает.
4.3 Используя именованные группы в string.prototype.replace
Именованная групповая функция теперь запечена в строку заменить метод экземпляра. Таким образом, мы можем легко поменять слова в строке.
Например, изменить «первый случай, фамилия» на «LASTNAME, FirstName».
5. Остальные свойства для объектов
Оператор отдыха ... (Три точка) позволяет использовать свойства объекта, которые еще не извлечены.
5.1 Вы можете использовать остальные, чтобы помочь извлечь только свойства ты хочешь
5.2 Даже лучше, вы можете удалить ненужные предметы! ??
6. Распространение свойств для объектов
Распространение свойств также выглядит так же, как остальные свойства с тремя точками … Но разница состоит в том, что вы используете распространение для создания (реструктуризации) новых объектов.
7. Regex Bookbehing Утверждения
Это улучшение для Regex, которое позволяет нам немедленно существовать некоторую строку * до * какая-то другая строка.
Теперь вы можете использовать группу (? <= ...) (знак вопроса, меньше, равен) посмотреть за положительное утверждение.
Кроме того, вы можете использовать (? (знак вопроса, меньше, восклицательный) , чтобы посмотреть за негативное утверждение. По сути, это будет соответствовать, пока проходит утверждение.
Положительное утверждение: Скажем, мы хотим обеспечить, чтобы # Знак существует перед словом выиграть (То есть: #winning ) и хочу, чтобы регельс вернуться только на строку «выигрыш». Вот как ты написал это.
Отрицательное утверждение: Допустим, мы хотим извлечь числа из строк, которые имеют € знаки, а не $ признаки перед этими цифрами.
8. Regex Свойство Unicode Unicode escapes
Было нелегко написать регулярное выражение, чтобы соответствовать различным символам Unicode. Такие вещи, как \ W , \ W , \ D ETC соответствует только английским персонажам и цифрам. Но как насчет номеров на других языках, таких как хинди, греческий, и так далее?
Вот где происходит свойство Unicode Ensapes. Оказывается Unicode, добавляет свойства метаданных для каждого символа (символа) и использует его для группы или характеристики различных символов.
Например, базы данных Unicode Groups все символы хинди (हिन्दी) под свойство под названием Сценарий со значением Деванагари И еще одна недвижимость под названием Script_extensions с тем же значением Деванагари . Итак, мы можем найти Script = Devanagari и получить все хинди персонажи.
Деванагари Может использоваться для различных индийских языков, таких как маратхи, хинди, санскрит и так далее.
Начиная с ECMAScript 2018, мы можем использовать \ p Чтобы избежать персонажей вместе с {Script = devanagari} соответствовать всем этим индийским персонажам. То есть мы можем использовать: \ p {script = devanagari} В Regex соответствует всем деванагари персонажам.
//The following matches multiple hindi character
/^\p{Script=Devanagari}+$/u.test('हिन्दी'); //true
//PS:there are 3 hindi characters hАналогично, базы данных Unicode группирует все греческие символы под Script_extensions. (и Script ) Свойство со значением Греческий Отказ Итак, мы можем найти все греческие символы, используя Script_extensionsions = Греческий или Сценарий = Греческий Отказ
То есть мы можем использовать: \ p {script = греческий} В Regex соответствует всем греческим персонажам.
//The following matches a single Greek character
/\p{Script_Extensions=Greek}/u.test('π'); // trueКроме того, база данных Unicode хранит различные типы эмодзисов под логическими свойствами Emoji , Emoji_component С Emoji_presentation С Emoji_modifier. и Emoji_modifier_base со значениями свойства как `True`. Итак, мы можем искать все эмохисы, просто выбрав Emoji быть правдой.
То есть мы можем использовать: \ p {emoji} , \ Emoji_modifier И так далее, чтобы соответствовать различным видам эмохис.
В следующем примере сделают все это понятно.
//The following matches an Emoji character
/\p{Emoji}/u.test('❤️'); //true
//The following fails because yellow emojis don't need/have Emoji_Modifier!
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌️'); //false
//The following matches an emoji character\p{Emoji} followed by \p{Emoji_Modifier}
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌?'); //true
//Explaination:
//By default the victory emoji is yellow color.
//If we use a brown, black or other variations of the same emoji, they are considered
//as variations of the original Emoji and are represented using two unicode characters.
//One for the original emoji, followed by another unicode character for the color.
//
//So in the below example, although we only see a single brown victory emoji,
//it actually uses two unicode characters, one for the emoji and another
// for the brown color.
//
//In Unicode database, these colors have Emoji_Modifier property.
//So we need to use both \p{Emoji} and \p{Emoji_Modifier} to properly and
//completely match the brown emoji.
/\p{Emoji}\p{Emoji_Modifier}/u.test('✌?'); //trueНаконец, мы можем использовать капитал «P» ( \ P ) Escape Assister вместо маленьких p ( \ p ) , отрицать матчи.
Использованная литература:
8. Обещание. Прототип. Финально ()
Наконец () это новый метод экземпляра, который был добавлен в обещание. Основная идея состоит в том, чтобы позволить запустить обратный вызов после I решить или Отклонить чтобы помочь очистить вещи. Наконец Обратный вызов вызывается без какого-либо значения и всегда выполняется независимо от того, что.
Давайте посмотрим на разные случаи.
9. Асинхронная итерация
Это * чрезвычайно * полезная функция. В основном это позволяет нам создавать циклы асинкового кода с легкостью!
Эта функция добавляет новый «За-ждать» | Цикл, который позволяет нам вызывать асинхронные функции, которые возвращают обещания (или массивы с кучей обещаний) в цикле. Крутая вещь состоит в том, что цикл ждет каждое обещание разрешать, прежде чем делать с следующей петлей.
Это в значительной степени!
Если это было полезно, пожалуйста, нажмите на хлопок? Нажмите ниже несколько раз, чтобы показать вашу поддержку! ⬇⬇⬇ ??
Мои другие сообщения
https://medium.com/@rajaraodv/latest
Соответствующие сообщения Ecmascript 2015+
- Проверьте эти полезные советы и трюки Ecmascript 2015 (ES6)
- 5 JavaScript «плохие» части, которые фиксируются в ES6
- Это «класс» в ES6 новой «плохой» части?
Оригинал: “https://www.freecodecamp.org/news/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e/”