Здравствуйте, сегодня я хочу поговорить о npm под названием Lodash.

Прежде чем мы начнем, я думаю, мы должны упомянуть «кучу и стек». Это хранилище движка JavaScript.

Стек: выделение статической памяти

Стек — это структура данных, которую JavaScript использует для хранения статических данных. Статические данные — это данные, размер которых движку известен во время компиляции. В JavaScript к ним относятся примитивные значения (строки, числа, логические значения, неопределенные значения и нулевые значения) и ссылки, указывающие на объекты и функции.

Куча: динамическое выделение памяти

Куча — это другое пространство для хранения данных, где JavaScript хранит объекты и функции.

В отличие от стека, движок не выделяет фиксированный объем памяти для этих объектов. Вместо этого по мере необходимости будет выделяться больше места.

Справочник по JavaScript

Все переменные сначала указывают на стек. В случае, если это не примитивное значение, стек содержит ссылку на объект в куче.

Память кучи не упорядочена каким-либо особым образом, поэтому нам нужно хранить ссылку на нее в стеке.

После получения всей этой информации мы можем изучить ее более подробно.

Когда мы что-то разрабатываем, нам может понадобиться манипулировать данными там, где находится ответ API. В этом случае мы должны скопировать эти данные (это может быть массив или объект) без ссылки. Для этого требования мы могли бы использовать Lodash.

Lodash копирует данные без ссылки, и если мы что-то изменим в скопированных данных, исходные данные будут защищены.

Чтобы не путаться с обновлением всех данных на экране, мы не должны использовать данные ответа API напрямую, если нам нужно ими манипулировать.

Кроме того, у нас может быть больше требований к манипулированию данными только для одних данных. В этом случае мы должны скопировать основные данные, чтобы использовать их. Если мы этого не сделаем, возможно, мы не будем использовать основные данные на следующем шаге.

Прежде чем использовать Lodash, нам нужно установить этот пакет

npm install lodash

После загрузки нам нужно импортировать его в ts-файл нашего компонента.

import { cloneDeep } from "lodash";

И у нас есть два данных, которые имеют разные ссылки.

 
const copiedData = cloneDeep(this.originalData);

После всех этих шагов мы можем работать с скопированными данными и отображать их на экране.

Я надеюсь, что эта статья была полезной. Для получения дополнительной информации, пожалуйста, следуйте за мной.

Использованная литература: