Oto nowe wbudowane metody i funkcje w JavaScript

W ciągu ostatnich kilku lat JavaScript pojawił się z wieloma nowymi wydaniami. Wprowadzili nowe funkcje, szczególnie w składni i jej rdzeniu. Te aktualizacje uczyniły JavaScript bardziej czytelnym i inteligentnym. Przedstawię nam nowe metody dla tablic, obiektów i ciągów znaków. Te nowe metody mogą obsługiwać dane w elegancki i wydajny sposób, pisząc mniej kodu. To właśnie wyjaśnimy w tym artykule.

Nowe metody obiektów

Obiekt jest tym, co sprawia, że ​​JavaScript jest potężnym językiem programowania. Obiekty umożliwiają grupowanie różnych typów danych. Jeśli chcesz nauczyć się nowego frameworka JavaScript, takiego jak React, Vue lub Angular, musisz wiedzieć, jak używać Objects i jego metod. Te struktury używają obiektów do pobierania i obsługi danych wejściowych użytkownika. Nowe wydania JavaScript wprowadzają nowe metody do obiektów, które sprawiają, że są bardziej zabawne. Oto nowe metody Object:

object. assign ()

Metoda Object. assign () ma wiele zadań. Może kopiować obiekt, klonować z innego obiektu lub łączyć dwa lub więcej obiektów.

  • skopiuj wartości z innego obiektu:
  • Sklonuj obiekt do nowego obiektu
  • Możesz również scalić zduplikowane właściwości za pomocą Object. assign (), ustawiając dwa puste nawiasy jako pierwszy argument:

Object.entries ()

Metoda Object.entries () zwraca klucze i wartości obiektu jako tablicę.

Object.getOwnPropertyDescriptors ()

Object.getOwnPropertyDescriptors pozwalają nam uzyskać deskryptor właściwości dla obiektu.

Naprawdę pomocne jest sprawdzenie właściwości deskryptora obiektu, na przykład sprawdzenie, czy jest on zapisywalny, czy wyliczalny.

Nowe metody Array

W nowych wydaniach JavaScript udostępniono nowe metody dla tablic. Oto nowe metody tablicowe:

Array.includes ()

Array.includes () pozwala nam sprawdzić, czy właściwość istnieje w tablicy. Możesz zobaczyć różnicę między starym kodem a nową składnią (ES6). Nowa metoda jest krótka i bardziej czytelna.

Array.find ()

Array.find () pomaga nam znaleźć element w tablicy. Pobiera funkcję zwrotną jako argument. Funkcja wywołania zwrotnego zapewnia więcej opcji wyszukiwania i wyodrębniania złożonych danych.

Jeśli poszukiwana właściwość istnieje, zwraca znalezioną wartość. W przeciwnym razie zwraca undefined.

Array.findIndex ()

Array.findIndex () zwraca indeks znalezionego elementu zamiast wartości.

Array.values ​​()

Ta nowa metoda zwraca iterator wartości Array, więc możemy uruchomić pętlę for, aby wyodrębnić każdą wartość Array.

Array.entries ()

Array.entries () zwraca klucz i wartość w formacie Array.

Array.from ()

Array.from () została wprowadzona w wersji ES6. Może robić wiele rzeczy, uruchamiając funkcję map () na danych. Może przekonwertować ciąg znaków na tablicę lub nawet utworzyć nową tablicę z danych.

Array.keys ()

Jak sama nazwa wskazuje, ta metoda zwraca klucze Array.

Nowe metody String

Nowe wersje JavaScript zapewniły nowe metody String. Oto nowe metody typu String:

String.repeat ()

Metoda String.repeat () umożliwia powtórzenie łańcucha.

String.includes ()

String.includes () działa podobnie jak Array.includes (). Zwraca wartość logiczną, jeśli wprowadzona wartość istnieje.

Nowe metody liczbowe

Nowe wersje JavaScript zapewniły nowe metody liczbowe. Oto nowe metody liczbowe:

Number.isNaN ()

Ta metoda została wydana w aktualizacji ES6. Sprawdza przekazaną wartość Number i zwraca prawdę, jeśli wartość to NaN. W przeciwnym razie zwraca fałsz. Ta metoda jest inspirowana klasyczną funkcją isNAN () w JavaScript.

Number.isInteger ()

Podobnie jak poprzednia metoda, Number.isInteger () sprawdza, czy przekazana wartość jest liczbą całkowitą, czy nie. Zwróci true, jeśli wartość jest liczbą całkowitą, lub false, jeśli nie jest.

Number.isSafeInteger ()

Zawsze możesz chcieć zweryfikować dane wejściowe użytkowników, aby upewnić się, że jest to liczba. Number.isSafeInteger () sprawdza, czy liczba jest bezpieczną liczbą.

Dowiedz się więcej tutaj

Number.isFinite ()

Number.isFinite () sprawdza, czy przekazana wartość jest liczbą skończoną, czy nie.

Wsparcie przeglądarki

Nowe metody numeryczne są prawie obsługiwane przez większość przeglądarek, z wyjątkiem Opera Mini i IE-11. Wsparcie pokazano na poniższym obrazku:

Nowe określone obiekty

JavaScript zawiera nowe, specyficzne funkcje, które pozwalają nam pisać wydajniejszy kod. Oto nowe specyficzne metody obiektów:

Obiekt proxy ()

Proxy to jeden z najlepszych dodatków do JavaScript. Tworzy niestandardowe zachowanie dla naszego kodu. Z Proxy możesz obsłużyć:

  • walidacja danych użytkownika
  • korekta danych
  • wyszukiwanie właściwości
  • zadanie
  • wyliczenie
  • wywołanie funkcji

Sprawdź tutaj inne zastosowania proxy i jego metod.

Aby zrozumieć proxy, napiszemy dwa przykłady.

Przykład 1:

W tym przykładzie sprawdzamy dane podczas pobierania ich od użytkownika. Spróbujemy zdefiniować zachowanie nieokreślonego błędu.

Jak widać w powyższym przykładzie, zwraca userInfo.favCar undefined. Co jeśli chcemy obsłużyć ten komunikat o błędzie? Jeśli chcemy stworzyć niestandardowe zachowanie dla błędu, na przykład wyświetlenie innego komunikatu zamiast undefined, możemy w tym przypadku użyć Proxy.

Zdefiniowaliśmy nowe proxy i daliśmy mu dwa argumenty - obiekt i handler. Procedura obsługi uruchamia kod walidacyjny i sprawdza, czy właściwość istnieje w obiekcie. Zwraca właściwość, jeśli istnieje. W przeciwnym razie zwraca komunikat, który zdefiniowaliśmy i nazywa się to wyszukiwaniem właściwości.

Przykład 2:

W tym przykładzie utworzymy walidację dla określonej wartości w obiekcie za pomocą metody set .

W tym przykładzie możemy sprawdzić poprawność typu danych i zwrócić nowy TypeError (). To znacznie ułatwia debugowanie. Możesz zrozumieć więcej dzięki temu pomocnemu artykułowi.

Wsparcie przeglądarki

Proxy działa całkiem dobrze dla wszystkich głównych przeglądarek, jak widać poniżej:

Obiekt Set ()

Obiekt Set to nowa funkcja w JavaScript. Pozwala nam przechowywać unikalne wartości. Ma wiele metod, w które możesz grać. Metoda Object.add umożliwia dodanie nowej właściwości do obiektu. Object.delete usuwa właściwość z obiektu. Object.clear czyści wszystkie właściwości obiektu. Poniższy przykład wyjaśnia metody obiektów.

Dowiedz się więcej o obiekcie Set () tutaj.

Podsumowując

Właśnie omówiliśmy nowe wbudowane metody wprowadzone przez JavaScript. Dzięki tym nowym wspaniałym funkcjom nie używam już starej składni i metod w moim kodzie. Nowe metody pozwalają w elegancki sposób pisać sprawny i wydajny kod JavaScript.

Możesz również sprawdzić moje artykuły na temat nowej składni ES6, aby odświeżyć swoje umiejętności w JavaScript.

Możesz mnie znaleźć na Twitterze i Instagramie

Poprzednie artykuły:

  • JavaScript ES6 - pisz mniej, rób więcej
  • Naucz się Bootstrap 4 w 30 minut, budując Landing a Website
  • Angular 6 i nowe funkcje, wszystko wyjaśnione w trzy minuty
  • Jak korzystać z routingu w Vue.js, aby zapewnić użytkownikom lepsze wrażenia
  • Oto najpopularniejsze sposoby wysyłania żądań HTTP w JavaScript
  • Dowiedz się, jak stworzyć swoją pierwszą aplikację Angular w 20 minut