niedawno miałem Wywiad kodujący, który obejmował ocenę jednego schematu przeciwko drugiemu. Szczegóły nie są tak ważne, ale jedną rzeczą, która z tego wyszła (w środku wywiadu), było to, że nie można wyrwać się z pętli forEach(). Zapomniałem o tym małym drobiazgu i prawdopodobnie zepsuło mi to szanse na zatrudnienie. Po przeczytaniu tego, mam nadzieję, że nie popełnisz tego samego błędu, co ja! Nie bądź taki jak ja.
jeśli wolisz oglądać niż czytać, sprawdź wersję wideo tego!
MDN zna wszystkie
:
nie ma innego sposobu na zatrzymanie lub złamanie pętli forEach () niż rzucenie wyjątku. Jeśli potrzebujesz takiego zachowania, metoda forEach() jest złym narzędziem
to jakiś hardkorowy sass pochodzący z dokumentów MDN. Mają jednak rację, ważne jest, aby wiedzieć, które narzędzie wybrać.
zanim zagłębimy się w to, dlaczego nie możesz wyrwać się z forEach(), przyjrzyjmy się, co to jest pętla i skąd pochodzi forEach().
co to jest pętla
pętla w programowaniu rozwiązuje dość powszechny problem: Muszę uruchomić ten sam kod z tymi wszystkimi danymi. Mówiąc prościej, jest to:
powtarzanie tego samego kodu w kółko (w pętli), aż osiągniemy określony stan końcowy.
Problem
dla porównania, rozwiążemy ten sam problem używając różnych typów pętli. Oto problem:
Porównaj dwie tablice i sprawdź, czy elementy w nich są takie same.
oto dane, które będziemy porównywać:
const jedis = const sith = mamy dwie tablice, obie z kilkoma nazwiskami. Prawdopodobnie zauważysz, że Anakin jest zarówno Jedi, jak i Sithem. Jest to banalny przykład, jednak nie daleki od tego, na czym byłem testowany podczas rozmowy kwalifikacyjnej.
stary sposób
nie chcę, żebyś wyciągnął z tego artykułu to, że jedna pętla jest lepsza od drugiej. Wszystkie oferują unikalne rozwiązania programistyczne i mają miejsce dla konkretnych przypadków użycia. Sztuką jest wiedzieć, który z nich użyć kiedy.
tradycyjna pętla For
jeśli kiedykolwiek brałeś udział w jakimkolwiek kursie programowania, prawdopodobnie spotkałeś się z naszym dobrym przyjacielem pętlą for. Od dawna jest przydatnym narzędziem dla programistów i nadal jest przydatny do dziś. Rozwiążmy nasz problem używając go.
// Our data again, for referenceconst jedis = ;const sith = ;// start our loop, define our iterator variablefor (let i = 0; i < jedis.length; i++) { // create a variable we can reference const thisJedi = jedis; // see if the item in the array we are testing exists if (sith.includes(thisJedi)) { // If it does exist, then that jedi is also a sith console.log(`${thisJedi} is also a Sith`); // we can exit out break; } console.log(`${thisJedi} is not a Sith`);}pętla for oferuje całkiem poręczny sposób wyjścia z naszego kodu, jeśli spełnia on wybrany przez nas warunek. Jest to niezwykle pomocne podczas zapętlania mnóstwa danych. Był bardzo pomocny w rozwiązaniu niektórych problemów projektu Euler, a konkretnie tego.
Nowy inny sposób
między innymi forEach() został wybity w specyfikacji w 2009 roku wraz z wszystkimi innymi dobrociami, które zostały nam dane w ES5. Służy jako poręczna metoda do pisania czystego kodu, który łatwo iteruje nad elementami w tablicy.
Co to robi?
pętla forEach() jest funkcją, która uruchamia inną funkcję (callback) na każdym elemencie tablicy. Definiujemy, co dzieje się w tej funkcji zwrotnej. JS jest na tyle miły, że daje nam trzy parametry w tej funkcji:
- pozycja w tablicy
- indeks pozycji
- cała tablica
spójrzmy na nasz problem używając pętli forEach(). Włączyłem wszystkie trzy parametry w funkcji, ale używamy tylko pierwszego, elementu, który nazywam jedi
// We have to create a global state variable to keep track of what is happening let matching // loop over array jedis.forEach((jedi,index,array) => { // check to see if jedi is in sith if(!sith.includes(jedi)) { // if it isn't, set global variable to false matching = false } // it keeps going... }) console.log(matching) // falsejeśli ma to większy sens, możesz przekształcić funkcję zwrotną w funkcję nazwaną. Myślę, że to czyni go bardziej czytelnym. Pozwala nam również na ponowne użycie tej funkcji w dowolnym miejscu. Yay Programowanie funkcyjne!
let matching function isJediAlsoSith(jedi,index,array) { if(!sith.includes(jedi)) { matching = false } } jedis.forEach(isJediAlsoSith)nasze rozwiązanie zasadniczo robi to samo. Jedyną różnicą jest to, że działa, aż dotrze do końca tablicy jedis. Jak na tablicę o tak małych rozmiarach, wątpię, że zrobi to dużą różnicę w wydajności.
Ale Dlaczego?
to w końcu prowadzi nas do odpowiedzi na nasze pytanie, dlaczego nie możemy wyrwać się z pętli forEach()? Dzieje się tak dlatego, że pętla uruchamia tę funkcję zwrotną nad każdym elementem, więc nawet jeśli napiszesz return, to zwraca tylko tę instancję funkcji. To trwa. W przypadku funkcji forEach() nie robi ona nic ze zwracanym kodem. Należy pamiętać, że nie ma to miejsca w przypadku niektórych innych metod tablicowych.
dodatkowo, z tego powodu break lub continue nie są poprawnymi oświadczeniami.
inne sposoby
istnieje sporo różnych typów pętli. Wszystkie mają różne cele i polecam przyjrzenie się każdemu z nich. Nie zawsze potrzebujesz pętli forEach().
foreach () vs map ()
prawdopodobnie najczęstszymi metodami tablicowymi pojawiającymi się w samouczkach są forEach() i map() . Największą różnicą między nimi jest to, że map zwróci nową tablicę, podczas gdy forEach() nie.
tradycyjne pętle
podczas gdy pętla
metody tablicy
tablica.forEach ()
Array.map()
Array.filter ()
Array.reduce ()
Array.reduceRight ()
Array.every ()
Array.niektóre ()
Array.indexOf ()
Array.lastIndexOf ()
Array.find ()
Array.findIndex()
iteracyjne pętle obiektów (w tym tablice)
for in
for of
to jest sposób
jak wspomniano wcześniej przez niesamowicie bezczelne dokumenty MDN, wybierając odpowiedni narzędzie jest najważniejsze dla sukcesu. Liczba opcji może wydawać się nieco przytłaczająca na początku, ale lubię przyjąć podejście: „jeśli to działa, jest to właściwe narzędzie.”
Ogólnie rzecz biorąc, możesz zmienić kod na śmierć, ale potem tracisz tylko czas, możesz budować rzeczy. W przypadku mojego wywiadu używałem właściwego narzędzia, w niewłaściwy sposób. Gdybym wiedział, że nie można wyrwać się z pętli forEach, to pewnie wszystko potoczyłoby się inaczej.
jeśli masz jakieś dodatkowe informacje, upuść je w komentarzach poniżej!
jak zawsze, szczęśliwego kodowania.
wtyczki
piszę książkę o projektowaniu graficznym i jak to się odnosi do tworzenia oprogramowania! Jeśli jesteś zainteresowany, zapisz się tutaj, aby otrzymywać aktualizacje.
https://digitalnutt.substack.com/p/coming-soon?r=34slo&utm_campaign=post&utm_medium=web&utm_source=copy
Muzyka
ja też piszę muzykę! Sprawdź to tutaj: Spotify / Youtube / Apple Music
wsparcie
Jeśli podoba Ci się ten artykuł i chcesz zobaczyć więcej, najlepszym sposobem na to jest subskrypcja / Obserwuj mnie tutaj! Jeśli czujesz się łaskawy, możesz postawić mi kawę!
