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:
- Głębiny JavaScriptu
- https://www.npmjs.com/package/lodash