Witam, dzisiaj chcę porozmawiać o npm o nazwie Lodash.

Zanim zaczniemy, myślę, że powinniśmy wspomnieć o „Stercie i stosie”. Są to pamięci silnika JavaScript.

Stos: statyczna alokacja pamięci

Stos to struktura danych używana przez JavaScript do przechowywania danych statycznych. Dane statyczne to dane, których rozmiar zna silnik w czasie kompilacji. W JavaScript obejmuje to wartości pierwotne (łańcuchy, liczby, wartości logiczne, wartości niezdefiniowane i null) oraz odniesienia, które wskazują na obiekty i funkcje.

Sterta: dynamiczna alokacja pamięci

Sterta to inna przestrzeń do przechowywania danych, w której JavaScript przechowuje obiekty i funkcje.

W przeciwieństwie do stosu, silnik nie przydziela tym obiektom stałej ilości pamięci. Zamiast tego w razie potrzeby zostanie przydzielona większa ilość miejsca.

Odniesienie w JavaScript

Wszystkie zmienne najpierw wskazują na stos. W przypadku, gdy jest to wartość inna niż pierwotna, stos zawiera odwołanie do obiektu na stercie.

Pamięć sterty nie jest w żaden sposób uporządkowana, dlatego też musimy zachować odniesienie do niej na stosie.

Po uzyskaniu tych wszystkich informacji możemy je dogłębnie zbadać.

Kiedy coś opracowujemy, być może będziemy musieli manipulować danymi w odpowiedzi API. W takim przypadku powinniśmy skopiować te dane (mogą to być tablica lub obiekt) bez odniesienia. Do tego wymagania możemy użyć Lodash.

Lodash kopiuje dane bez odniesienia i jeśli zmienimy cokolwiek w skopiowanych danych, oryginalne dane będą chronione.

Aby nie mylić z aktualizacją wszystkich danych na ekranie, nie powinniśmy bezpośrednio używać danych odpowiedzi API, jeśli musimy nimi manipulować.

Moglibyśmy także mieć więcej wymagań dotyczących manipulacji danymi tylko na jednym obiekcie. W takim przypadku musimy skopiować główne dane, aby z nich skorzystać. Jeśli tego nie zrobimy, prawdopodobnie nie będziemy korzystać z głównych danych w kolejnym kroku.

Zanim skorzystamy z Lodash, musimy zainstalować ten pakiet

npm install lodash

Po załadowaniu musimy go zaimportować do pliku ts naszego komponentu.

import { cloneDeep } from "lodash";

Mamy dwa dane, które mają różne odniesienia.

 
const copiedData = cloneDeep(this.originalData);

Po wykonaniu tych wszystkich kroków możemy pracować na skopiowanych danych i pokazać je na ekranie.

Mam nadzieję, że ten artykuł był pomocny. Aby uzyskać więcej treści, śledź mnie.

Bibliografia: