Привет, народ,

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

На первый взгляд это может показаться запутанным, но давайте немного разберем код.

  1. Мы создали const переменную с именем getName
  2. Назначено сокращение функции, используемое для стрелочной функции () => {//function body}
  3. По умолчанию стрелочная функция не нуждается в {} скобках, если наш код не предполагает более одной строки. При необходимости используйте фигурные скобки. Без фигурной скобки стрелочная функция возвращает выполненную строку кода. В приведенном выше примере он возвращает 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 г.