Co to jest składnia rozprzestrzeniania się w JavaScript | Wyjaśniono przykładami

Operator rozprzestrzeniania służy do rozszerzenia instancji tablicy lub instancji ciągów nad listą argumentów jako poszczególnych elementów, argumenty mogą również wynosić zero lub mniej niż długość tablicy/ciągu.

JavaScript wydał wiele funkcji wraz z wydaniem JavaScript ES6 w 2015 roku, jedną z funkcji, które były nowe w JavaScript, był operator rozprzestrzeniania się; Operator rozprzestrzeniania ma podobny identyfikator do parametrów odpoczynku, który jest potrójnym kropką „…” Przed nazwą zmiennej.

Operator rozprzestrzeniania (…)

Identyfikator potrójnego kropki, gdy jest używany przed zmienną nazwą w argumencie, jest znana jako składnia rozprzestrzeniania lub argument rozprzestrzeniania się. Argument rozprzestrzeniany przerywa iterabalny obiekt (tablica lub ciąg) i przekazuje go do argumentów.

Składnia

(… Nazwa VariableName)

Aby zrozumieć różnicę między wyjściem zmiennej normalnej a zmienną rozprzestrzeniania się, spójrz na poniższy rysunek:

Jak działa spread z konsolą.dziennik()

Aby zrozumieć podstawową funkcjonalność operatora rozprzestrzeniania się, po prostu utworzysz obiekt ciągów i przekazać go wewnątrz konsola.dziennik() funkcjonować. Następnie użyj operatora rozprzestrzeniania się, aby przekazać go wewnątrz konsola.dziennik() Aby zbadać zachowanie operatora rozprzestrzeniania się:

string = "Google";
konsola.log („normalny wynik składni:”+ ciąg)
konsola.log („rozłóż wynik składni:”);
konsola.log (… ciąg);

Otrzymasz następujące dane wyjściowe po wykonaniu fragmentu kodu powyżej:

Strzałka wskazuje na normalne wyjście ciągów, a czerwony prostokąt otacza wyjście składni rozłożonej. Możesz zauważyć szczeliny między każdym znakiem wyjścia składni rozprzestrzeniania, ponieważ każda postać jest traktowana jako inny element.

Przekazywanie składni rozprzestrzeniania się w argumentach funkcji

Całym celem składni rozprzestrzeniania i operatora rozprzestrzeniania się jest tworzenie argumentów rozprzestrzeniania i przekazanie ich w funkcji. Aby to zademonstrować, utworzysz funkcję, która przyjmie 5 argumentów i wydrukuje wynik wartości przekazywanych w argumentach z następującymi wierszami kodu:

funkcja printsum (a, b, c, d, e)
konsola.log (A+B+C+D+E);

Utworzysz tablicę z 5 wartościami całkowitymi w niej za pomocą następującego wiersza:

liczby = [1,2,3,4,5];

W ostatnim kroku wywołasz tę funkcję za pomocą argumentów rozprzestrzeniania się i przejść w liczby tablica za pomocą składni rozprzestrzeniania się jak pojedynczy argument z następującym wierszem:

printsum (… liczby);

Pełny fragment byłby:

funkcja printsum (a, b, c, d, e)
konsola.log (A + B + C + D + E);

liczby = [1, 2, 3, 4, 5, 6];
printsum (… liczby);

Po wykonaniu kodu otrzymasz następujące dane wyjściowe:

Wszystkie elementy wewnątrz tablicy liczb zostały przekazane jako indywidualne argumenty do funkcji, a następnie każdy argument został wydrukowany na konsoli.

Ale co, jeśli tablica liczb ma więcej elementów niż argumenty funkcji?; Cóż, w takim przypadku zostanie użyte tylko pierwsze 5 elementów tablicy, a inne zostaną odrzucone, w ten sposób zapobiegając wszelkim błędom.

Aby to zaprezentować, weź wyżej wymienioną funkcję i przejdź w następującą tablicę w niej:

Szyk:

Liczby = [3 52,6,7,1,3,5,3,1,5,3,6,7,3,3,5,6,1,2];

Korzystając z następującego polecenia:

printsum (… liczby);

Zobaczysz następujący wynik na konsoli:

Widać, mimo że mieliśmy więcej elementów w tablicy, które zostały przekazane na liście argumentu z składnią rozprzestrzeniania się, wszystkie dodatkowe elementy zostały odrzucone, a zatem nie otrzymaliśmy żadnych błędów.

Jak połączyć tablice za pomocą rozprzestrzeniania się?

Możemy nawet użyć składni rozprzestrzeniania lub operatora rozprzestrzeniania się do łączenia elementów tablicy z innymi elementami, przekazując pełną tablicę w jednym elemencie.

array1 = [2, 3, 4, 5, 6, 6, 7, 7];
array2 = [1, 10, 2, 44, 66, 22, 11, 33, 56];
finalArray = [… array1,… array2];
konsola.log (finalArray);

Otrzymasz następujące dane wyjściowe:

Możesz zobaczyć, że FinalArray ma oba Array1 I Array2 połączeni w nim i daliśmy tylko dwa elementy w „FinalArray”.

To dotyczy składni rozprzestrzeniania w JavaScript.

Wniosek

Składnia rozprzestrzeniania została wprowadzona w JavaScript jako nowa funkcja z wydaniem ES6. Składnia rozprzestrzeniania się lub powszechnie znana jako argument rozprzestrzeniania się służy do rozszerzenia elementów iteracyjnego obiektu -: tablica lub ciąg - nad listą argumentów funkcji poprzez indywidualne przekazywanie każdego elementu. Ta funkcjonalność języka programowania JavaScript ES6 pozwala na radzenie sobie z niektórymi scenariuszami, w których masz więcej argumentów niż parametry funkcji. Operator rozprzestrzeniania można również wykorzystać do połączenia elementów tablicy, które zbadaliśmy za pomocą przykładu.