14.06.2024 в 15:08

Особенности JavaScript ES6, которые необходимо знать перед изучением React

Если вы хотите научиться реагировать, само собой разумеется, что вам следует разобраться в основах Javascript.

React также использует многие концепции ES6, с которыми вы уже должны быть знакомы. В этом руководстве мы рассмотрим наиболее часто используемые функции ES6, которые вам следует знать перед изучением React. Изучение и понимание того, как использовать эти концепции, сделают ваше путешествие по React увлекательным и гладким.

Литералы шаблонов

ES6 упростил работу со строками. Вместо объединения строк со знаком плюс (+) строки шаблона предоставляют более простой способ.

// old way of joining strings
function sumNumbers(a, b) {
  return "The sum of " + a + " and " + b + " is " + (a + b);
}
// using template literals
function sumNumbers(a, b) {
  return `The sum of ${a}  and ${b} is ${a + b}`;
}

Литералы шаблонов также упрощают работу с несколькими строками.

const multiLineString = `
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit.
  Sed do eiusmod tempor incididunt
  ut labore et dolore magna aliqua.
`;

Стрелочные функции

Стрелочные функции делают ваш код более кратким. Давайте посмотрим на различия между нормальной функцией и стрелочной функцией.

// Normal function
function myFunction() {
  // Expression or statement
}
// Arrow function
const myArrowFunction = () => {
  // Expression or statement
};

При использовании стрелочной функции вместо ключевого слова function вы используете жирную стрелку (=>), что делает ее более краткой.

Если стрелочная функция возвращает одно выражение, вы можете зафиксировать фигурные скобки и ключевое слово return.

Если стрелочная функция принимает один аргумент, вы можете заключить двойной паратез вокруг параметра.

// explicit return  single expression
const add = (a,b) => a + b;

// ommit parantesis if single argument
const squared = a => a * a;

Стрелочная функция обычно используется в методах массивов, таких как map(), filter(), forEach() и т. д.

const names = ["Carol", "jane", "alice"];
const capitalizedNames = names.map((name) => name.toUpperCase());
console.log(capitalizedNames);

//output  // [ 'CAROL', 'JANE', 'ALICE' ]

Как вы можете видеть выше, поскольку мы передаем только один аргумент, мы зафиксировали круглые скобки.

Деструктуризация объектов

Деструктуризация в JavaScript — это процесс распаковки значений из массивов или свойств объектов в отдельные переменные. Это полезно при работе со сложными структурами данных, например данными из баз данных или API.

Например, предположим, что у вас есть простой объект, описывающий кошку.

const cat = {
  catName: 'Whiskers',
  age: 3,
  color: 'gray',
  breed: 'Persian'
};

Чтобы получить имя кошки, вы обычно используете запись через точку или скобки, например:

const cat = {
  catName: "Whiskers",
  age: 3,
  color: "gray",
  breed: "Persian",
};

// console.log(cat.catNname)

Однако с помощью деструктуризации объекта вы можете распаковать свойства в имена переменных и присвоить их объекту cat следующим образом:

const { catNname, age, color, breed } = cat;
console.log(`My cat ${catNname} is ${age} moths old`)

Результат будет

My cat Whiskers is 3 months old

Деструктуризация массивов

Деструктуризация массивов аналогична деструктуризации объектов. Предположим, у нас есть массив сотрудников:

const employees = [
    'Carol kristen deck ',
    'john weber Smith',
    'Alice k Johnson'
  ];

Если бы мы хотели получить сотрудника по индексу 1, мы бы сделали это:

employees[1]

Но с помощью деструктуризации мы можем распаковать значения в переменные следующим образом:

const employees = [
  "Carol kristen deck ",
  "john weber Smith",
  "Alice k Johnson",
];

const [E1,E2,E3 ] = employees;

E1 будет значением первого сотрудника массива, E2 — значение второго сотрудника и так далее; если вам нужны только первые сотрудники массива, вы можете зафиксировать остальных следующим образом:

const [E1, ,] = employees;
console.log(E1); 
// Carol kristen deck

Литералы объектов

Литералы объектов позволяют разработчикам избегать дублирования при написании объектов. Например, предположим, что у нас есть конструктор функции Task, который выглядит следующим образом:

function Task(title, description, priority) {
    return {
      title: title,
      description: description,
      priority: priority
    };
}

С помощью объектных литералов ES6 вы можете написать сокращенную версию следующим образом;

function Task(title, description, priority) {
  return {
    title,
    description,
    priority,
  };
}

Оператор распространения

Оператор распространения используется для распространения элементов итерируемых объектов. Итерируемые объекты включают массивы, объекты и строки.

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

const names = ["Alice", "Bob", "Charlie", "Diana", "Ethan"];
const namesCopy = [...names]
console.log(namesCopy)

Rest оператор

Оператор rest аналогичен оператору спреда в том, что он использует три (…) точки. Однако оператор rest используется в параметрах функции для сбора нескольких аргументов в один массив.

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

function sumNumbers(...arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

Затем мы можем использовать функцию для обработки любого количества аргументов.

numbers = [1, 2, 4];
grades = [30, 40, 50, 60, 70];
console.log(sumNumbers(...numbers)); //output //7
console.log(sumNumbers(...grades));   //output //250

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

grades = [30, 40, 50, 60, 70];
const [index0, ...arr] = grades;
console.log(math);

Цикл For

Цикл for используется для перебора элементов в итерируемых объектах, таких как массивы, строки, типизированные массивы, карты, наборы и списки узлов. Синтаксис цикла for выглядит следующим образом:

for (variable of iterable) {
  //code to be executed for each variable
}

Итерация по массиву

const currencyCodes = ["USD", "EUR", "GBP", "JPY"];
for (const code of currencyCodes) {
  console.log(code);
}
// USD
// EUR
// GBP
// JPY

Перебор массива объектов

Например, предположим, что у нас есть массив, содержащий несколько объектов, как показано ниже.

const currencies = [
    { currency: "US Dollar", code: "USD" },
    { currency: "Euro", code: "EUR" },
    { currency: "British Pound", code: "GBP" },
    { currency: "Japanese Yen", code: "JPY" }
  ];

Если мы перейдем по массиву валют, мы получим каждый отдельный объект.

for (const currency of currencies) {
  console.log(currency);
}

Вывод будет выглядеть следующим образом:

{ currency: 'US Dollar', code: 'USD' }
{ currency: 'Euro', code: 'EUR' }
{ currency: 'British Pound', code: 'GBP' }
{ currency: 'Japanese Yen', code: 'JPY' }

Перебор NodeList

NodeList — это коллекция узлов, извлеченных из документа веб-страницы. Например, предположим, что на нашей странице есть <ul> элементов <li>:

<ul class="languages">
      <li>Python</li>
      <li>JavaScript</li>
      <li>Ruby</li>
    </ul>

Мы можем использовать атрибут querySelectorAll, чтобы получить NodeList, содержащий такие элементы.

const listItems = document.querySelectorAll('.languages li')

Затем используйте концепцию цикла for, чтобы получить textContent каждого элемента.

const listItems = document.querySelectorAll(".languages li");
for (const item of listItems) {
  console.log(item.textContent);
}

Заключение

Какие функции ES6 вы используете почти каждый день? Позвольте мне знать в комментариях ниже.

Спасибо за прочтение

Источник

#JavaScript #React

Войти на сайт