Często zadawane pytania i odpowiedzi dotyczące wywiadu JavaScript

Posiadanie JavaScript w swoim portfolio zwiększa szanse na zdobycie roli programisty. To powiedziawszy, sprawdźmy często zadawane pytania dotyczące rozmowy kwalifikacyjnej JavaScript.

JavaScript jest jednym z najczęściej używanych języków w tworzeniu stron internetowych. Obecnie jest używany do tworzenia prawie każdego rodzaju aplikacji.

Zanim przejdziemy do pytań na rozmowie kwalifikacyjnej, zobaczmy zalety nauki języka JavaScript.

JavaScript jest lekkim, interpretowanym lub kompilowanym na czas językiem programowania. Jest to jeden z podstawowych języków światowej sieci WWW. Znasz pozostałe dwa podstawowe języki www. Lepiej ich poszukaj, jeśli nie.

JavaScript jest tworzony głównie dla sieci. Ale teraz nie dotyczy to tylko sieci. Z pomocą środowisk typu Node, Deno itp. możemy go uruchomić na niemal każdej platformie.

Sprawdźmy, jakie ma to zalety.

Zalety JavaScriptu

1. Łatwo zacząć. Możesz się tego nauczyć nawet bez znajomości kodowania.
2. Wokół niego duża społeczność. Otrzymasz wszelką potrzebną pomoc, jeśli utkniesz w dowolnym miejscu.
3. Istnieje wiele bibliotek/frameworków zbudowanych przy użyciu JavaScript, co pomaga szybciej tworzyć aplikacje.
4. Możemy tworzyć aplikacje frontendowe, backendowe, androidowe, iOS itp. z JavaScriptem. Możemy stworzyć za jego pomocą niemal każdy rodzaj aplikacji. Ale jest bardziej niezawodny w tworzeniu stron internetowych.

Jakie są typy danych w JavaScript?

Typy danych służą do przechowywania różnych typów danych. Typy danych będą się różnić w zależności od języka programowania. W JavaScript mamy 8 typów danych. Zobaczmy je jeden po drugim.

• Numer
• Strunowy
• logiczne
• Nieokreślony
• Zero
• BigInt
• Symbol
• Obiekt

Wszystkie typy danych oprócz Object są nazywane wartościami pierwotnymi. I są niezmienne.

Jakie są wbudowane metody w JavaScript?

Wbudowane metody w JavaScript są różne dla każdego typu danych. Możemy uzyskać dostęp do tych wbudowanych metod przy użyciu odpowiedniego typu danych. Zobaczmy kilka wbudowanych metod dla różnych typów danych i struktur danych.

1. Numer
   • doNaprawiono
   • do Ciągu
   • …
2. Strunowy
   • do małych liter
   • zaczynać z
   • wykres o godz
   • …
3. Szyk
   • filtr
   • mapa
   • dla każdego
   • …

Istnieje wiele wbudowanych metod dla każdego typu danych. Możesz sprawdzić referencje dla wszystkich wbudowanych metod różnych typów danych i struktur danych.

Jak utworzyć tablicę w JavaScript?

Tablice są jedną z podstawowych struktur danych w JavaScript. Tablice mogą zawierać dowolne dane, ponieważ JavaScript jest dynamiczny. Zobaczmy, jak tworzyć tablice w JavaScript.

Możemy utworzyć tablicę za pomocą nawiasów kwadratowych [] . Tworzenie obiektów jest proste i szybkie

 // Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);

Możemy utworzyć tablicę za pomocą konstruktora Array . Ludzie rzadko używają konstruktora do tworzenia tablic w ogólnych projektach.

 // Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);

Tablice JavaScript są zmienne, tzn. możemy je dowolnie modyfikować po ich utworzeniu.

Jak stworzyć obiekt w JavaScript?

Poza tablicą, obiekt jest kolejną podstawową strukturą danych w JavaScript. Obiekty używają magazynu par klucz-wartość. Klucz musi być niezmienną wartością, podczas gdy wartość może być dowolna. Zobaczmy, jak tworzyć obiekty w JavaScript.

Możemy tworzyć obiekty za pomocą nawiasów klamrowych {} . Tworzenie obiektów jest proste i szybkie.

 // Empty object const object = {}; // Object with some random values const randomObject = { 1: 2, one: "Two", true: false }; console.log(object, randomObject);

Możemy tworzyć obiekty za pomocą konstruktora Object . Ludzie rzadko używają tego w ogólnych projektach.

 // Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);

Obiekty JavaScript są zmienne, tzn. możemy je modyfikować po utworzeniu, jak widać w drugim przykładzie.

Jak debugować kod JavaScript?

Debugowanie kodu nie jest proste. Różni się to w zależności od języka programowania, projektu od projektu itd.; zobaczmy typowe rzeczy używane do debugowania JavaScript.

# 1. Logowanie

Możemy użyć instrukcji console.log w wielu miejscach naszego kodu, aby zidentyfikować błąd. Kod przestanie uruchamiać kolejne wiersze kodu, gdy w poprzednim wierszu wystąpi błąd.

Rejestrowanie jest jedną ze starych metod debugowania, która jest dość skuteczna w przypadku małych projektów. Jest to powszechna technika debugowania dla dowolnego języka programowania.

#2. Narzędzia deweloperskie

JavaScript jest najczęściej używany do tworzenia aplikacji internetowych. Tak więc prawie wszystkie przeglądarki mają teraz narzędzia programistyczne, które pomagają debugować kod JavaScript.

Jedną z najczęściej używanych metod debugowania jest ustawianie punktów przerwania w narzędziach programistycznych. Punkty przerwania zatrzymują wykonywanie JavaScriptu i podają wszystkie informacje o wykonywaniu w danym momencie.

Możemy ustawić wiele punktów przerwania wokół miejsca, w którym pojawiają się błędy i zobaczyć, co je powoduje. Jest to najskuteczniejszy sposób debugowania aplikacji internetowych JavaScript.

#3. IDE

Możemy użyć IDE do debugowania JavaScript. VS Code obsługuje debugowanie z punktami przerwania. Funkcja debugowania może się różnić w zależności od używanego środowiska IDE. Ale większość IDE będzie miała tę funkcję.

Jak dodać kod JavaScript w pliku HTML?

Możemy dodać plik JavaScript HTML za pomocą tagu script . Możesz sprawdzić poniższy przykład.

 <!DOCTYPE html> <html lang="en"> <head> <title>Geekflare</title> </head> <body> <h1>Geekflare</h1> <script> // JavaScript code goes here console.log("This is JavaScript code"); </script> </body> </html>

Co to są pliki cookie?

Pliki cookie to pary klucz-wartość używane do przechowywania niewielkich informacji. Informacja może być dowolna. Możemy ustawić czas wygaśnięcia plików cookies, które zostaną usunięte po upływie terminu ważności. Są one szeroko stosowane do przechowywania informacji o użytkownikach.

Pliki cookie nie zostaną usunięte, nawet jeśli odświeżymy stronę, dopóki ich nie usuniemy lub nie wygasną. Możesz sprawdzić pliki cookie dowolnej aplikacji internetowej/strony internetowej w dowolnej przeglądarce, otwierając narzędzia programistyczne.

Jak czytać ciasteczko?

Możemy odczytać plik cookie w JavaScript za pomocą document.cookie . Zwróci wszystkie utworzone przez nas pliki cookie.

 console.log("All cookies", document.cookie);

Zwróci pusty ciąg, jeśli nie ma plików cookie.

Jak utworzyć i usunąć plik cookie?

Możemy utworzyć pliki cookie, ustawiając parę klucz-wartość na document.cookie . Zobaczmy przykład.

 document.cookie = "one=One;";

W powyższej składni one klucz cookie i One to jego wartość. Możemy dodać więcej atrybutów do pliku cookie, takich jak domena, ścieżka, data wygaśnięcia itp.; każdy z nich powinien być oddzielony średnikiem (;) . Wszystkie atrybuty są opcjonalne.

Zobaczmy przykład z atrybutami.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;";

W powyższym kodzie dodaliśmy datę wygaśnięcia i ścieżkę do pliku cookie. Jeżeli data ważności nie zostanie podana, ciasteczko zostanie usunięte po zakończeniu sesji. Domyślną ścieżką będzie ścieżka do pliku. Format daty wygaśnięcia powinien być w formacie GMT.

Zobaczmy, jak utworzyć wiele plików cookie.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";

Pliki cookie nie zostaną nadpisane, jeśli klucz lub ścieżka będą różne podczas ustawiania wielu plików cookie. Jeśli klucz i ścieżka są takie same, poprzedni plik cookie zostanie zastąpiony. Sprawdź poniższy przykład, który zastąpi poprzedni ustawiony plik cookie.

 document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";

Usunęliśmy datę ważności z pliku cookie i zmieniliśmy wartość.

Użyj daty wygaśnięcia jako daty przyszłej podczas testowania kodu, aby działał poprawnie. Jeśli zachowasz tę samą datę 31 stycznia 2023 r. nawet po 31 stycznia 2023 r., pliki cookie nie zostaną utworzone.

Widzieliśmy, jak tworzyć i aktualizować pliki cookie. Zobaczmy, jak usunąć pliki cookie.

Usuwanie plików cookie jest łatwe. Po prostu zmień datę ważności pliku cookie na dowolną datę przeszłą. Sprawdź poniższy przykład.

 // Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";

Ostatniego pliku cookie nie znajdziesz w plikach cookie, ponieważ jest on usuwany w ostatnim wierszu kodu. To tyle w samouczku dotyczącym min cookie.

Jakie są różne frameworki JavaScript?

Istnieje wiele frameworków JavaScript. React, Vue, Angular itp. do tworzenia interfejsów użytkownika. Express, Koa, Nest itp. do programowania po stronie serwera. NextJS, Gatsby itp. do generowania statycznych witryn. React Native, Ionic itp. do tworzenia aplikacji mobilnych. Wspomnieliśmy tutaj o niektórych frameworkach JavaScript. Możesz znaleźć więcej frameworków, których zbadanie zajmie dużo czasu. Odkrywaj, kiedy ich potrzebujesz.

Zamknięcia w JavaScript

Zamknięcie to funkcja powiązana z zakresem leksykalnym i nadrzędnym środowiskiem leksykalnym. Dzięki domknięciom możemy uzyskać dostęp do danych z zakresu zewnętrznego. Zamknięcia są tworzone podczas tworzenia funkcji.

 function outer() { const a = 1; function inner() { // We can access all the data from the outer function scope here // The data will be available even if we execute this function outside the outer function // as inners' closure formed while creating it console.log("Accessing a inside inner", a); } return inner; } const innerFn = outer(); innerFn();

Zamknięcia są szeroko stosowane w aplikacjach JavaScript. Być może używałeś ich wcześniej, nie zdając sobie sprawy, że są zamknięciami. Jest o wiele więcej do nauczenia się o zamknięciach. Upewnij się, że całkowicie nauczyłeś się tego pojęcia.

Podnoszenie w JavaScript

Hoisting to proces w JavaScript, w którym deklaracja zmiennych, funkcji i klas przesuwa się na górę zakresu przed wykonaniem kodu.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "Geekflare";

Jeśli uruchomisz powyższy kod, nie zobaczysz żadnego błędu. Ale w większości języków pojawi się błąd. Dane wyjściowe będą undefined , ponieważ podnoszenie przenosi tylko deklaracje na górę i nie inicjalizuje ich do linii numer 3.

Zmień var na let lub const w następujący sposób i ponownie uruchom kod.

 // Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "Geekflare";

Teraz pojawi się błąd odniesienia mówiący, że nie możemy uzyskać dostępu do zmiennej przed jej zainicjowaniem.

 ReferenceError: Cannot access 'name' before initialization

Tak więc tutaj let i const są wprowadzane w ES6, do których nie można uzyskać dostępu przed zainicjowaniem, jak sugeruje błąd. Dzieje się tak, ponieważ zmienne zadeklarowane za pomocą let lub const będą znajdować się w martwej strefie czasowej (TDZ) do momentu zainicjowania linii. Nie mamy dostępu do zmiennych z TDZ.

Curry w JavaScript

Currying to technika konwersji funkcji z wieloma parametrami na mniej parametrów z wieloma wywołaniami. Dzięki niemu możemy przekonwertować wywoływalną funkcję add(a, b, c, d) na add(a)(b)(c)(d) wywoływalną. Zobaczmy przykład, jak to zrobić.

 function getCurryCallback(callback) { return function (a) { return function (b) { return function (c) { return function (d) { return callback(a, b, c, d); }; }; }; }; } function add(a, b, c, d) { return a + b + c + d; } const curriedAdd = getCurryCallback(add); // Calling the curriedAdd console.log(curriedAdd(1)(2)(3)(4));

Możemy uogólnić funkcję getCurryCallback , która będzie używana w różnych funkcjach do konwersji na wywołania curry. Możesz odnieść się do JavaScript Info, aby uzyskać więcej informacji na ten temat.

Różnica między dokumentem a oknem

window jest najwyższym obiektem w przeglądarce. Zawiera wszystkie informacje o oknie przeglądarki, takie jak historia, lokalizacja, nawigator itp.; jest globalnie dostępny w JavaScript. Możemy użyć go bezpośrednio w naszym kodzie bez żadnego importu. Możemy uzyskać dostęp do właściwości i metod obiektu window bez window.

document jest częścią obiektu window . Cały kod HTML ładowany na stronie internetowej jest konwertowany na obiekt dokumentu. Obiekt document odnosi się do specjalnego elementu HTMLDocument, który będzie miał inne właściwości i metody, jak wszystkie elementy HTML.

window w którym obiekt reprezentuje okno przeglądarki, a document reprezentuje dokument HTML załadowany w tym oknie przeglądarki.

Różnica między stroną klienta a stroną serwera

Strona kliencka odnosi się do użytkownika końcowego korzystającego z aplikacji. Strona serwera odnosi się do serwera WWW, na którym wdrożono aplikację.

W terminologii frontendowej możemy powiedzieć, że przeglądarka na komputerach użytkowników jest po stronie klienta, a usługi w chmurze po stronie serwera.

Różnica między innerHTML a innerText

Zarówno innerHTML , jak i innerText są właściwościami elementów HTML. Za pomocą tych właściwości możemy zmienić zawartość elementu HTML.

Możemy przypisać ciąg HTML do innerHTML właściwości renderowanej jak normalny HTML. Sprawdź poniższy przykład.

 const titleEl = document.getElementById("title"); titleEl.innerHTML = '<span style="color:orange;">Geekflare</span>';

Dodaj jeden element z title id do swojego HTML i dodaj powyższy skrypt do pliku JavaScript. Uruchom kod i zobacz dane wyjściowe. Będziesz Geekflare w kolorze pomarańczowym. A jeśli sprawdzisz element, będzie on wewnątrz tagu span . Tak więc innerHTML pobierze ciąg HTML i wyrenderuje go jako zwykły HTML.

innerText po drugiej stronie przyjmie normalny ciąg i wyrenderuje go tak, jak jest. Nie będzie renderować żadnego kodu HTML, takiego jak innerHTML . Zmień innerHTML na innerText w powyższym kodzie i sprawdź dane wyjściowe.

 const titleEl = document.getElementById("title"); titleEl.innerText = '<span style="color:orange;">Geekflare</span>';

Teraz zobaczysz dokładny ciąg, który podaliśmy na stronie internetowej.

Różnica między let i var

Słowa kluczowe let i var służą do tworzenia zmiennych w JavaScript. Słowo kluczowe let zostało wprowadzone w ES6.

let ma zasięg blokowy, a var jest ograniczony do funkcji.

 { let a = 2; console.log("Inside block", a); } console.log("Outside block", a);

Uruchom powyższy kod. Otrzymasz błąd w ostatnim wierszu, ponieważ nie możemy uzyskać dostępu do let a poza blokiem, ponieważ ma on zasięg blokowy. Teraz zmień go na var i uruchom go ponownie.

 { var a = 2; console.log("Inside block", a); } console.log("Outside block", a);

Nie pojawi się żaden błąd, ponieważ możemy uzyskać dostęp a zmiennej również poza blokiem. Teraz zastąpmy blok funkcją.

 function sample() { var a = 2; console.log("Inside function", a); } sample(); console.log("Outside function", a);

Otrzymasz błąd odniesienia, jeśli uruchomisz powyższy kod, ponieważ nie możemy uzyskać dostępu do var a it poza funkcją, ponieważ ma ona zakres funkcji.

Możemy ponownie zadeklarować zmienne za pomocą słowa kluczowego var , ale nie możemy ponownie zadeklarować zmiennych za pomocą słowa kluczowego let . Zobaczmy przykład.

 var a = "Geekflare"; var a = "Chandan"; console.log(a);

 let a = "Geekflare"; let a = "Chandan"; console.log(a);

Pierwszy fragment kodu nie zgłosi żadnego błędu, a wartość a zostanie zmieniona na ostatnią przypisaną wartość. Drugi fragment kodu zgłosi błąd, ponieważ nie możemy ponownie zadeklarować zmiennych za pomocą let .

Różnica między przechowywaniem sesji a przechowywaniem lokalnym

Pamięć sesji i pamięć lokalna służą do przechowywania informacji na komputerach użytkowników, do których można uzyskać dostęp bez Internetu. Możemy przechowywać pary klucz-wartość zarówno w pamięci sesji, jak i pamięci lokalnej. Zarówno klucz, jak i wartość zostaną przekonwertowane na łańcuchy, jeśli podasz inny typ danych lub strukturę danych.

Pamięć sesji zostanie wyczyszczona po zakończeniu sesji (po zamknięciu przeglądarki). Pamięć lokalizacji nie zostanie wyczyszczona, dopóki jej nie wyczyścimy.

Możemy uzyskiwać dostęp, aktualizować i usuwać pamięć sesji i pamięć lokalizacji odpowiednio za pomocą obiektów sessionStorage i localStorage .

Co to jest NaN w JavaScript?

NaN jest skracane jako Not-a-Number . Reprezentuje, że coś nie jest legalną/prawidłową liczbą w JavaScript. W niektórych przypadkach otrzymamy NaN jako dane wyjściowe, takie jak 0/0 , undefined * 2 , 1 + undefined , null * undefined itd.,

Co to jest zakres leksykalny?

Zakres leksykalny odnosi się do dostępu do zmiennych z zakresu ich rodziców. Powiedzmy, że mamy funkcję z dwiema funkcjami wewnętrznymi. Najbardziej wewnętrzna funkcja może uzyskać dostęp do zmiennych zakresu swoich dwóch funkcji nadrzędnych. Podobnie funkcja drugiego poziomu może uzyskać dostęp do najbardziej zewnętrznego zakresu funkcji. Zobaczmy to na przykładzie.

 function outermost() { let a = 1; console.log(a); function middle() { let b = 2; // `a` are accessible here console.log(a, b); function innermost() { let c = 3; // both `a` and `b` are accessible here console.log(a, b, c); } innermost(); } middle(); } outermost();

JavaScript używa łańcucha zasięgu, aby znaleźć zmienną, gdy uzyskujemy do niej dostęp gdzieś w kodzie. Najpierw sprawdzi zmienną w bieżącym zakresie, a następnie w zakresie nadrzędnym, aż do zasięgu globalnego.

Co jest przekazywane przez wartość, a co przez referencję?

Przekazywanie przez wartość i przekazywanie przez referencję to dwa sposoby przekazywania argumentów do funkcji w JavaScript.

Przekaż według wartości: tworzy kopię oryginalnych danych i przekazuje ją do funkcji. Tak więc, kiedy wprowadziliśmy jakiekolwiek zmiany w funkcji, nie wpłynie to na oryginalne dane. Sprawdź poniższy przykład.

 function sample(a) { // changing the value of `a` a = 5; console.log("Inside function", a); } let a = 3; sample(a); console.log("Outside function", a);

Zobaczysz, że pierwotna wartość a nie została zmieniona, mimo że zmieniliśmy ją wewnątrz funkcji.

Przekaż przez referencję: przekazuje referencję danych do funkcji. Tak więc, gdy wprowadzimy jakiekolwiek zmiany w funkcji, zmieni ona również oryginalne dane.

 function sample(arr) { // adding a new value to the array arr.push(3); console.log("Inside function", arr); } let arr = [1, 2]; sample(arr); console.log("Outside function", arr);

Zobaczysz, że pierwotna wartość arr zostanie zmieniona, gdy zmienimy ją wewnątrz funkcji.

Uwaga: wszystkie prymitywne typy danych są przekazywane przez wartość, a nieprymitywne przez referencję.

Co to jest zapamiętywanie?

Zapamiętywanie to technika, która przechowuje obliczone wartości w pamięciach podręcznych i wykorzystuje je, gdy ich potrzebujemy ponownie, bez ponownego ich obliczania. Przyspieszy to wykonanie kodu, jeśli obliczenia są bardzo ciężkie. Istnieje kompromis w zakresie przechowywania, który nie jest dużym problemem w porównaniu z czasem.

 const memo = {}; function add(a, b) { const key = `${a}-${b}`; // checking whether we computed the value already or not if (memo[key]) { console.log("Not computing again"); return memo[key]; } // adding the newly computed value to cache // here cache is a simple global object memo[key] = a + b; return memo[key]; } console.log(add(1, 2)); console.log(add(2, 3)); console.log(add(1, 2));

To prosty przykład demonstrujący zapamiętywanie. Tutaj dodanie dwóch liczb nie jest trudnym zadaniem obliczeniowym. To tylko na demo.

Jaki jest parametr reszty?

Parametr rest służy do zbierania wszystkich pozostałych parametrów w funkcji. Powiedzmy, że mamy funkcję, która zaakceptuje co najmniej 2 argumenty i może przyjąć maksymalnie dowolną liczbę parametrów. Ponieważ nie mamy maksymalnej liczby argumentów, możemy zebrać pierwsze 2 parametry ze zmiennymi normalnymi, a wszystkie pozostałe z parametrem rest za pomocą operatora rest .

 function sample(a, b, ...rest) { console.log("Rest parameter", rest); } sample(1, 2, 3, 4, 5);

Parametr rest będzie tablicą trzech ostatnich argumentów w powyższym przykładzie. Dzięki temu możemy mieć dowolną liczbę parametrów dla funkcji.

Jedna funkcja może mieć tylko jeden parametr reszty. A parametr reszty powinien być ostatnim w kolejności parametrów.

Co to jest destrukturyzacja obiektów?

Destrukturyzacja obiektów służy do uzyskiwania dostępu do zmiennych z obiektu i przypisywania ich do zmiennych o takich samych nazwach jak klucze obiektów. Zobaczmy przykład.

 const object = { a: 1, b: 2, c: 3 }; // Object destructuring const { a, b, c } = object; // Now, a, b, c will be used as normal variables console.log(a, b, c);

Możemy zmienić zmienne zdestrukturyzowanych zmiennych w tej samej linii w następujący sposób.

 const object = { a: 1, b: 2, c: 3 }; // Changing the names of `a` and `b` const { a: changedA, b: changedB, c } = object; // Now, changedA, changedB, c will be used as normal variables console.log(changedA, changedB, c);

Co to jest destrukturyzacja tablicy?

Destrukturyzacja tablicy służy do uzyskiwania dostępu do zmiennych z tablicy i przypisywania ich do zmiennych. Zobaczmy przykład.

 const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);

Co to jest przechwytywanie zdarzeń i propagowanie zdarzeń?

Przechwytywanie zdarzeń i propagacja zdarzeń to dwa sposoby propagacji zdarzeń w HTML DOM. Załóżmy, że istnieją dwa elementy HTML, jeden w drugim. A zdarzenie zachodzi w elemencie wewnętrznym. Teraz tryb propagacji zdarzeń będzie decydował o kolejności wykonywania tych zdarzeń.

Bąbelkowanie zdarzeń: najpierw uruchamia procedurę obsługi zdarzeń na elemencie, następnie na jego elemencie, a następnie przechodzi aż do najwyższego elementu. Jest to domyślne zachowanie wszystkich zdarzeń.

Przechwytywanie zdarzeń: musimy określić w zdarzeniu, że musimy użyć tego typu propagacji zdarzeń. Możemy to określić podczas dodawania detektora zdarzeń. Zdarzenia będą wykonywane w następującej kolejności, jeśli mamy włączone przechwytywanie zdarzeń.

1. Zdarzenia rozpoczynają się od najwyższego elementu do elementu docelowego w dół.
2. Zdarzenie na elemencie docelowym zostanie wykonane ponownie.
3. Propagacja zdarzenia propagacji bąbelków będzie się powtarzać, dopóki najwyższy element nie zostanie podniesiony.

Możemy zatrzymać propagację zdarzenia, wywołując metodę event.stopPropogation w procedurze obsługi zdarzeń.

Czym są obietnice w JavaScript?

Obiekt Promise the służy do operacji asynchronicznych, które w przyszłości zakończą się sukcesem lub niepowodzeniem.

Promise może znajdować się w jednym z następujących stanów.

1. w pending – gdy operacja jest nadal w toku.
2. fulfilled – gdy operacja zakończy się pomyślnie. Będziemy mieć wyniki (jeśli są) w stanie sukcesu.
3. rejected – gdy operacja zakończy się niepowodzeniem. Będziemy mieli przyczynę (błąd), dlaczego się nie powiodło.

Zobaczmy dwa przykłady przypadków sukcesu i niepowodzenia.

 // Promise which will complete successfully const successPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve({ message: "Completed successfully" }); }, 300); }); successPromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }); // Promise which will complete with failure state const failurePromise = new Promise((resolve, reject) => { setTimeout(() => { reject(new Error("Failing the promise for testing")); }, 300); }); failurePromise .then((data) => { console.log(data); }) .catch((error) => { console.log(error); });

Możesz mieć więcej niż jeden, then połączyć w łańcuch, jeśli to konieczne. Wcześniej zwrócone dane zostaną zaakceptowane w then wywołaniu zwrotnym.

Wyjaśnij różne typy zasięgu w JavaScript

W JavaScript istnieją dwa rodzaje zasięgu. Zasięg globalny i zasięg lokalny .

Być może słyszałeś również o zakresie funkcji i zakresie bloku. Są to lokalne zakresy odpowiednio dla var i let , const .

Co to są funkcje samowywołujące się?

Funkcje samowywołujące są funkcjami bezimiennymi, które zostaną wykonane natychmiast po utworzeniu. Zobaczmy kilka przykładów.

 // Without any parameters (function sayHello() { console.log("Hello, World!"); })(); // With parameters (function add(a, b) { console.log("Sum", a + b); })(1, 2);

Możemy nawet przekazać argumenty do samowywołujących się funkcji, jak widać w przykładzie.

Co to są funkcje strzałek?

Funkcja strzałki jest cukrem składniowym do normalnej funkcji z pewnymi zmianami. Zachowują się jak normalne funkcje w ogólnych przypadkach użycia. Funkcje strzałek przydają się, gdy musimy mieć wywołania zwrotne. Zobaczmy jego składnię.

 // arrow functions will return by default if it doesn't have any brackets let add = (a, b) => a + b; console.log(add(1, 2));

Istnieją pewne różnice między funkcjami strzałek a normalnymi funkcjami.

• Funkcje strzałek nie mają własnego this powiązania. Słowo kluczowe this wewnątrz funkcji strzałki odnosi się do jej zakresu nadrzędnego this .
• Funkcji strzałek nie można używać jako funkcji konstruktora

Czym są wywołania zwrotne?

Wywołanie zwrotne to funkcja przekazywana do innej funkcji, która jest wywoływana wewnątrz tej funkcji. Używanie wywołań zwrotnych jest powszechną rzeczą w JavaScript. Zobaczmy przykład.

 function sample(a, b, callback) { const result = a + b; callback(result); } function finished(result) { console.log("Finished with", result); } sample(1, 2, finished);

finished funkcja jest przekazywana jako wywołanie zwrotne do sample . finished funkcja jest wywoływana z wynikiem po wykonaniu jakiejś akcji. Zobaczysz użycie wywołań zwrotnych głównie w operacjach asynchronicznych, takich jak obietnice, setTimeout itp.,

Jakie są różne rodzaje błędów?

Sprawdźmy kilka błędów w JavaScript.

ReferenceError : ten błąd wystąpi, jeśli zmienna, do której uzyskujemy dostęp, jest dostępna.

TypeError: JavaScript zgłosi ten błąd, jeśli błąd nie pasuje do innych typów błędów. Stanie się tak również wtedy, gdy spróbujemy wykonać czynność, która nie jest zgodna z danymi.

SyntaxError: ten błąd wystąpi, jeśli składnia JavaScript jest niepoprawna.

Istnieją również inne rodzaje błędów. Ale to są typowe typy błędów w JavaScript.

Jakie są różne zakresy zmiennych w JavaScript?

W JavaScript istnieją dwa zakresy zmiennych. Zmienne zadeklarowane za pomocą słowa kluczowego var będą miały zasięg funkcji, a zmienne zadeklarowane za pomocą let i const będą miały zasięg blokowy .

Więcej informacji na temat zakresu tych zmiennych znajduje się w pytaniu 17.

Czym są znaki specjalne w JavaScript?

Ukośnik odwrotny to znak ucieczki w JavaScript. Służy do drukowania niektórych znaków specjalnych, których ogólnie nie możemy wydrukować. Powiedzmy, że chcemy wydrukować apostrophe (') wewnątrz łańcucha, czego nie możemy zrobić normalnie, ponieważ łańcuch zakończy się na drugim apostrofie. W takim przypadku użyjemy znaku ucieczki, aby uniknąć zakończenia łańcucha w tym miejscu.

 const message = 'Hi, I\'m Geekflare'; console.log(message);

Możemy osiągnąć powyższe wyniki bez użycia znaku ucieczki, zastępując zewnętrzne pojedyncze apostrofy podwójnymi apostrofami. Ale to tylko przykład użycia znaku ucieczki. Istnieją inne znaki, dla których zdecydowanie potrzebujemy znaku ucieczki, takie jak \n , \t , \\ itd..,

Czym są BOM i DOM?

Browser Object Model (BOM): wszystkie przeglądarki mają BOM reprezentujący bieżące okno przeglądarki. Zawiera nasz najwyższy obiekt okna, który służy do manipulowania oknem przeglądarki.

Document Object Model (DOM): przeglądarki tworzą DOM, gdy HTML jest ładowany do struktury drzewa. Możemy manipulować elementami HTML za pomocą DOM API.

Co to jest obiekt ekranowy?

Obiekt ekranu jest jedną z właściwości globalnego obiektu okna. Zawiera różne właściwości ekranu, na którym renderowane jest bieżące okno przeglądarki. Niektóre właściwości to szerokość , wysokość , orientacja , pixelDepth itp.

Wniosek

Mogą istnieć pytania uzupełniające do wszystkich powyższych pytań. Musisz więc przygotować koncepcje dotyczące wszystkich powyższych pytań.

Możesz także zapoznać się z często zadawanymi pytaniami i odpowiedziami na rozmowy kwalifikacyjne dotyczące języka Java.

Miłej nauki