Некоторые заметки, которые я сделал во время изучения React — это без предварительного изучения JavaScript (JS). Итак, мы начинаем с некоторых основ JS. Это 2 часть из 3 или 4.
Часть 2 продолжается с того места, где мы остановились в части 1, которую можно увидеть здесь
Связывать
Поскольку JS — это ООП, функции — это объекты. Все есть объект! Используя метод bind, как показано ниже, мы можем установить значение this (ранее упомянутое в части 1) на постоянной основе.
Вызов bind для функции обхода даст нам новую функцию обхода. Значение this в этой функции walk будет основано на значении thisArg, которое мы указали в bind.
const walk = person.walk.bind(person) walk();
С приведенным выше кодом вы увидите, что на выходе будут два одинаковых объекта. Один первый объект находится внутри нашей константы person в функции walk, а второй объект связан с тем, что мы создали привязку константы walk человекк нему.
Стрелочные функции
Создание функции в JS сильно упростилось. В примере у нас будет функция квадрата числа. Ниже приведен первоначальный способ создания и возврата значения функции. Это довольно легко понять.
const square = function(number) {
return number * number;
}
Теперь мы можем значительно упростить приведенный выше код, используя «стрелочные функции».
const square = number => number * number;
Выше вы увидите точно такую же функцию square, как и выше, только упрощенную до одной строки. Здесь есть несколько крутых трюков.
Если ваша функция принимает только один параметр, вам не нужны круглые скобки вокруг параметра, как показано в нашей упрощенной функции square .
Если тело вашей функции состоит только из одной строки и что-то возвращает — например, с нашей исходной функцией square, то мы можем фактически исключить 'return ' и эти фигурные скобки. Даем нам нашу красивую вторую функцию квадрат . Намного лучше!
Просто чтобы вы тоже знали — если вашей функции не нужны никакие параметры, вам просто нужно поставить несколько пустых скобок вместо параметра. Вот как это будет выглядеть в качестве примера.
const square = () => number * number;
Вернемся к нашей упрощенной функции. Его использование будет выглядеть примерно так.
const square = number => number * number; console.log(square(5));
Возврат в консоли:
Вот отличный сценарий использования:
const jobs = [
{id: 1, isActive: true},
{id: 2, isActive: true},
{id: 3, isActive: false},
];
const activeJobs = jobs.filter(job => job.isActive)
console.log(activeJobs)
Выше мы создали список из трех вакансий. Два из них активны, а один нет. Мы хотим вывести в консоль задания, которые активны. Итак, мы создали функцию activeJobs. При этом используется метод filter для выполнения перечисления по списку в jobs, и возвращаются только те задания, которые активны. Ниже то, что мы получаем обратно в консоли.
Деструктуризация объекта
Определение объекта address с несколькими значениями внутри него — позже в нашем коде мы можем захотеть извлечь значения из этого объекта address.
const address = {
street: 'Hacker Way',
city: 'San Francisco',
country: 'United States of America',
};
const street = address.street;
const city = address.city;
const country = address.country;
Выше вы можете видеть, что нам пришлось использовать 3 строки, чтобы извлечь значения из нашего объекта address. Вместо этого — мы можем использовать деструктуризацию объекта.
const { street, city, country} = address;
console.log(street);
console.log(city);
console.log(country);
То, что вы видите выше, эквивалентно трем строкам, которые мы использовали, за исключением того, что это намного аккуратнее и представляет собой впечатляющий один лайнер! Ниже то, что будет напечатано в консоли
Если вы хотите получить доступ только к свойству city и, возможно, изменить имя свойства, вот как это сделать:
const { city: ci} = address;
console.log(ci);
Вывод в консоли как это:
Прекрасные вещи! На сегодня все дружище. Настройтесь снова, чтобы узнать больше и учиться вместе со мной! 🤙🏼
Любые комментарии, рекомендации, исправления или даже просто желание сказать, что случилось — все это можно сделать в комментариях :)
