Новички часто делают так в React, забывают про иммутабельность. Может вызвать непредвиденные ошибки или поведение приложения.
Раньше делали так (spread оператор):
Теперь же можно делать так:
#code #JavaScript #Array #methods
Раньше делали так (spread оператор):
[...people].sort()Теперь же можно делать так:
people.toSorted()#code #JavaScript #Array #methods
👍7
Функция для глубокого копирования объектов
1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли
Если
Здесь мы гарантируем, что функция будет применена только к объектам или массивам.
2️⃣ Обработка массивов
Устанавливаем, является ли
Создаем новый пустой массив
Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.
3️⃣ Обработка объектов
Если
Создаем пустой объект
Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.
#JavaScript #code #Objects #deepCopy
1️⃣ Проверка наличия и типа объекта
Проверяем, существует ли
obj и является ли он объектом.Если
obj равен null или его тип данных не 'object', функция возвращает obj, не производя дополнительных действий.Здесь мы гарантируем, что функция будет применена только к объектам или массивам.
2️⃣ Обработка массивов
Устанавливаем, является ли
obj массивом.Создаем новый пустой массив
arrCopy и проходим по всем элементам obj. Примитивные значения копируются напрямую, а для объектов вызывается функция deepClone рекурсивно.Этот этап обеспечивает глубокое копирование каждого элемента массива, включая вложенные объекты и массивы.
3️⃣ Обработка объектов
Если
obj не массив, но объект, начинаем процесс копирования объекта.Создаем пустой объект
objCopy. Для каждого свойства obj, проверяем, является ли оно собственным с помощью метода hasOwnProperty. Собственные свойства копируются. Если значение свойства - объект, функция deepClone вызывается рекурсивно.Так мы гарантируем, что все собственные свойства объекта, включая вложенные объекты, будут глубоко скопированы.
#JavaScript #code #Objects #deepCopy
👍4
В первом примере используется обычная функция, и this внутри setInterval не ссылается на экземпляр Person. По умолчанию (в строгом режиме) this будет undefined, а в нестрогом — глобальный объект. Поскольку undefined не имеет свойства age, попытка инкрементировать его приведет к NaN
Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.
#code #JavaScript #functions #this
Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.
#code #JavaScript #functions #this
👍3😢1
Создание и обработка промиса
Промис создаётся с использованием конструктора
Для обработки промиса используются методы then, catch и finally.
✅ then принимает функцию, которая будет вызвана, если промис выполнится успешно.
❌ catch принимает функцию, которая будет вызвана, если промис будет отклонён.
🏁 finally принимает функцию, которая будет вызвана в любом случае, независимо от того, был ли промис выполнен или отклонён.
#обучающийПост #JavaScript #promise #code
Промис создаётся с использованием конструктора
Promise, который принимает один аргумент — функцию с двумя параметрами: resolve и reject. Функция resolve вызывается, когда асинхронная операция завершается успешно, а функция reject — когда происходит ошибка.Для обработки промиса используются методы then, catch и finally.
✅ then принимает функцию, которая будет вызвана, если промис выполнится успешно.
❌ catch принимает функцию, которая будет вызвана, если промис будет отклонён.
🏁 finally принимает функцию, которая будет вызвана в любом случае, независимо от того, был ли промис выполнен или отклонён.
#обучающийПост #JavaScript #promise #code
🔥6✍2👍2
Задержка в коде
Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется
Решением этой проблемы может стать создание универсальной функции sleep, которая возвращает промис. Эта функция позволяет легко реализовывать задержку в любом месте кода, делая его более чистым и организованным.
Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".
#react #JavaScript #sleep #setTimeout #code
Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется
setTimeout, но при множественном использовании это может стать довольно громоздким и менее удобным. К тому же, оборачивание логики в setTimeout не всегда идеально сочетается с асинхронными операциями и обещаниями (promises).Решением этой проблемы может стать создание универсальной функции sleep, которая возвращает промис. Эта функция позволяет легко реализовывать задержку в любом месте кода, делая его более чистым и организованным.
Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".
#react #JavaScript #sleep #setTimeout #code
👍10✍2👨💻1
Хук useToggle
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.
#react #code #useToggle #hook
👏8👍4