Привет, народ,
ES6 - очень популярная тема в наши дни в мире интерфейсов.
Итак, как насчет изучения некоторых интересных функций ES6 и последующих версий (например, ES7, ES8).
Первое первым.
Что значит ЭС?
ES
означает ECMAScript
.
В чем же тогда разница между `ECMAScript` и` JavaScript`?
ECMAScript
является стандартом, тогда какJavaScript
также является стандартом. ,ECMAScript
- это спецификация, аJavaScript
- реализацияECMAScript
спецификаций.
Итак, приступим.
Что мы собираемся узнать?
let
const
- Свойства объекта Rest / Spread
- Функция стрелки
- Строчная интерполяция
- Экспоненциальная
**
Array.prototype.includes
String.prototype.padStart
String.prototype.padEnd
Object.values
Object.entries
Позволять
let
- это новый var
, но его преимущество в том, что он доступен и доступен только в рамках данной области. Посмотрим на пример.
function let_n_var() { console.log(foo); if(true) { let foo = 'foo'; } } let_n_var(); // Output: Uncaught ReferenceError: foo is not defined
В приведенном выше примере, если вы замените let
на var
, на выходе будет undefined
, и ошибки не будет. Итак, как видите, let
помогает нам выявлять ранние ошибки и избавляться от беспорядка в области видимости.
Const
Это снова новый способ объявления var
, но разница в том, что после определения const
мы не можем повторно присвоить ему значение.
const baz = 'baz'; console.log('baz: ', baz); // Output: baz baz = 'baaz' // Output: Uncaught TypeError: Assignment to constant variable.
Поскольку мы знаем, что JavaScript - это динамический язык, и мы склонны делать ошибки при обновлении переменных с использованием другого типа данных или данных, const
помогает нам не переопределять значения, однажды установленные.
Свойства объекта Rest / Spread
Давайте посмотрим на это на примере.
// Rest const vowels = ['A', 'E', 'I', 'O', 'U']; const [firstVowel, secondVowel, ...restVowels] = vowels; console.log(firstVowel); // Output: 'A' console.log(secondVowel);// Output: 'E' console.log(restVowels); // Output: ['I', 'O', 'U']
В приведенном выше фрагменте кода я пытаюсь получить значения из переменной vowels
в отдельные переменные для первых двух гласных и оставшейся в переменной rest.
Вот шаги для достижения того же.
- Создайте переменную с обозначением массива:
[firstVowel, secondVowel]
. Присвойте ему переменнуюvowels
. Это даст нам первые две гласные в соответствующих переменных (на основе индекса) - Теперь, часть третьего значения в нотации массива, используйте
...
с именем переменной. например.restVowels
. Итак, переменная будет иметь видconst [firstVowel, secondVowel, ...restVowels]=vowels;
- Когда код выполняется, он создает переменные со значениями, указанными выше. Альтернативный способ достижения того же результата:
const firstVowel = vowels[0]; const secondVowel = vowels[1]; const restVowels = vowels.slice(2); // all remaining values
Но подход rest делает код более читаемым и управляемым.
Вот пример кода для распространения с учетом вышеуказанного блока кода (используется для остальных)
// Rest const vowels = ['A', 'E', 'I', 'O', 'U']; const [firstVowel, secondVowel, ...restVowels] = vowels; // Spread const vowelsWithOneConsonant = ['B', ...vowels]; console.log(vowelsWithOneConsonant); // Output: ['B', 'A', 'E', 'I', 'O', 'U']
Как вы можете видеть выше, очень легко распространить переменную vowels
, чтобы создать новую переменную с таким же и одним добавленным значением.
Эти же концепции можно применить и к объектам. Идите вперед и потренируйтесь. Его весело использовать, когда вы научитесь к нему привыкать.
Функция стрелки
Это сокращенное обозначение function
, но привязка this
работает по-другому.
Давайте сначала разберемся с синтаксисом.
// standard way of defining function function getName() { console.log('getName function'); } // converted to arrow function const getName = () => { console.log('getName function'); }
Это становится более интересным и простым при возврате значений из функции.
const getName = (name) => 'Hello' + name; console.log(getName('Anand')); // Output: Hello Anand
На первый взгляд это может показаться запутанным, но давайте немного разберем код.
- Мы создали
const
переменную с именемgetName
- Назначено сокращение функции, используемое для стрелочной функции
() => {//function body}
- По умолчанию стрелочная функция не нуждается в
{}
скобках, если наш код не предполагает более одной строки. При необходимости используйте фигурные скобки. Без фигурной скобки стрелочная функция возвращает выполненную строку кода. В приведенном выше примере он возвращаетHello Anand
Таким образом, приведенный выше код также можно записать, как показано ниже, и результат будет таким же.
const getName = (name) => { return 'Hello' + name; } console.log(getName('Anand')); // Output: Hello Anand
После некоторой практики вы это получите. Давайте, запустите консоль браузера и потренируйтесь. Упражнение для вас - проверить, как `this` ведет себя со стрелочной функцией по сравнению с обычной функцией.
Строчная интерполяция
Первые дни в javascript, если нам нужно создать строку с некоторыми динамическими значениями, мы использовали +
. Рано или поздно все становится еще более запутанным, если становится действительно больше.
Итак, на помощь пришла строковая интерполяция. Синтаксис заключается в использовании обратного тика (`) вместо одинарных / двойных кавычек. И ${}
помогает нам размещать динамические данные, не беспокоясь об открытии / закрытии сообщения или о сбоях в связи с отсутствием+
или одинарными / двойными кавычками.
Давайте посмотрим на пример ниже:
// Old approach var guest = 'all'; var name = 'Anand'; var age = 32; var hobby1= "listening to music"; var hobby2 = "mobiles games"; const sayHello = "Hello " + guest + "! My name is " + name + ". My age is " + age + " years. My hobbies are " + hobby1 + ", "+ hobby2 + '.'; console.log(sayHello); // Output: Hello all! My name is Anand. My age is 32 years. My hobbies are listening to music, mobiles games.
Я уверен, что вас это уже сбивает с толку, ребята. Теперь посмотрим на приведенный ниже пример.
// New approach const guest = 'all'; const name = 'Anand'; const age = 32; const hobby1= "listening to music"; const hobby2 = "mobiles games"; const sayHello = `Hello ${guest}! My name is ${name}. My age is ${age} years. My hobbies are ${hobby1}, ${hobby2}.`; console.log(sayHello); // Output: Hello all! My name is Anand. My age is 32 years. My hobbies are listening to music, mobiles games.
Разве это не круто. 😎
Экспоненциальный
Я уверен, что вы все знаете Exponent
в математике. В Javascript мы использовали Math.pow(5, 6); // Output: 15625
для получения показателя степени.
Теперь у нас мало возможностей получить тот же результат, выполнив 3 ** 4; // Output: 15625
.
Итак, мы можем сказать следующее:
Math.pow(5, 6) == 5 ** 6;
Array.prototype.includes
Как следует из названия, мы можем использовать includes
, чтобы получить true
или false
значение результата, проверяя, включено ли это значение или нет.
Пример:
String.prototype.padStart / String.prototype.padEnd
Это довольно интересно. Давайте сначала определим это.
padStart
и padEnd
используются для дополнения текущей строки другой строкой до достижения заданной длины строки. padStart
применяет заполнение от начала (слева) строки. С другой стороны, padEnd
применяет заполнение с конца (справа) строки.
Эти функции могут также многократно применять заполнение к текущей строке другой строкой, если это необходимо.
Давайте посмотрим на пример
// padStart const cardNumber = '1234567812345678'; const last3Digit = cardNumber.slice(-3); const maskedCardNumber = last3Digit.padStart(16, 'X'); console.log(maskedCardNumber); // Output: "XXXXXXXXXXXXX678" // padEnd const loremIpsum = "Lorem Ipsum is simply dummy text of the printing and"; const loremIpsumWithDots = loremIpsum.padEnd(loremIpsum.length+3, '.'); console.log(loremIpsumWithDots); // Output: Lorem Ipsum is simply dummy text of the printing and...
Как это круто? Это довольно интересно и полезно. Тем не менее, практикуйтесь.
Object.values
Раньше мы использовали Object.keys
, если нам нужно было перебрать объект. Но теперь мы можем использовать values
или entries
вместо keys
в соответствии с нашими потребностями.
Таким образом, с Object.values
он возвращает все значения свойств enumerable в виде массива. Затем эти значения легко использовать напрямую.
Пример:
const objectFoo = { name: 'foo', isAvailable: false }; Object.values(objectFoo); // Output: ['foo', false]
Object.entries
С другой стороны, Object.entries
также дает массив, но содержит пары перечислимых строковых ключей и свойств [key, value]
объектов. Порядок остается таким же, как в for...in
.
Пример:
const objectFoo = { name: 'foo', isAvailable: false }; Object.entries(objectFoo); // Output: [['name', 'foo'], ['isAvailable', false]]
Резюме
Это все для этого поста.
Мы узнали некоторые ключевые и полезные функции ES6 +. Практикуйтесь самостоятельно. Оставляйте комментарии как отзыв. Поаплодируйте тоже и не забудьте поделиться ими.
Первоначально опубликовано на https://elanandkumar.com/blog/es6-and-beyond-I/ 20 апреля 2019 г.