Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

Sterowanie przepływem

Przepływ kontrolny to kolejność, w jakiej interpreter JavaScript wykonuje działanie wyciągów. Jeśli skrypt nie zawiera instrukcji zmieniających jego przepływ, jest wykonywane od początku do końca, po jednym wierszu. Struktury kontrolne są służy do określenia, czy zbiór instrukcji został wykonany na podstawie określonego zestawu kryteriów, wielokrotnie wykonywać zestaw instrukcji lub przerywać ciągu instrukcji.

Instrukcje warunkowe

Instrukcje warunkowe określają, czy kod powinien być wykonywany na podstawie więcej warunków. Instrukcja warunkowa wykonuje zawarty w niej kod, jeśli powiązany warunek (lub zestaw warunków) zwraca wartość true. W przeciwnym razie czy kod został pominięty.

`if`…`else`

Instrukcja if ocenia warunek w nawiasach pasujących do wyrażenia, które obserwuj. Jeśli warunek w nawiasie przyjmuje wartość true, w argumencie instrukcja lub blokada za pasującym do niej nawiasem jest wykonywany:

if ( true ) console.log( "True." );
> "True."

if ( true ) {
    const myString = "True.";
    console.log( myString );
}
> "True."

Jeśli warunek w nawiasie przyjmuje wartość false, wyrażenie, które jest ignorowany:

if ( false ) console.log( "True." );

Słowo kluczowe else bezpośrednio po instrukcji if i jej Warunkowo wykonywana instrukcja wskazuje instrukcję do wykonania, jeśli Warunek if przyjmuje wartość false:

if ( false ) console.log( "True." )''
else console.log( "False" );
> "False."

Aby połączyć kilka instrukcji if, możesz utworzyć warunkowo wykonana instrukcja po else innej instrukcji if:

const myCondition = 2;
if ( myCondition === 5 ) console.log( "Five." );
else if ( myCondition === 2 ) console.log( "Two." );

Zdecydowanie zalecamy użycie składni instrukcji blokowych z uwzględnieniem warunków warunkowych, poprawia czytelność, ale klauzule else if są często wyjątkiem od tej reguły:

if ( myCondition === 5 ) {
    console.log( "Five." );
} else if ( myCondition === 3 ) {
    console.log( "Three" );
} else {
    console.log( "Neither five nor three." );
}
> "Neither five nor three."

Operator potrójny

if warunkowo wykonuje instrukcję. Operator potrójny (dokładniejszy ale rzadziej nazywany potrójnym operatorem warunkowym). warunkowego wykonania wyrażenia. Jak sama nazwa wskazuje, potrójny to jedyny operator JavaScript, który korzysta z trzech operandów:

Warunek do sprawdzenia, a po nim znak zapytania (?).
Wyrażenie, które ma zostać wykonane, jeśli warunek jest zwracany jako true, po którym następuje znak dwukropek (:).
Wyrażenie, które zostanie wykonane, jeśli warunek przyjmuje wartość false.

Często używa się go do warunkowania lub przekazywania wartości:

const myFirstResult  = true  ? "First value." : "Second value.";
const mySecondResult = false ? "First value." : "Second value.";

myFirstResult;
> "First value."

mySecondResult;
> "Second value."

`switch`…`case`

Używaj instrukcji switch do porównywania wartości wyrażenia z listą potencjalne wartości zdefiniowane za pomocą co najmniej jednego case słowa kluczowego. Ta składnia jest niespotykaną, ponieważ pochodzi ona z najwcześniejszych decyzji związanych z projektowaniem JavaScript. Składnia switch...case zawiera słowo kluczowe switch, a po nim wyrażenie ujęte w nawiasy, a po niej dopasowane nawiasy klamrowe. Treść switch może zawierać case słów kluczowych, zwykle jedno lub więcej, po którym następuje wyrażenie lub wartość oraz dwukropek (:).

Gdy interpreter osiągnie wartość case z wartością pasującą do wyrażenia oceniane w nawiasach po słowie kluczowym switch, wykonuje ono dowolne instrukcje po tej klauzuli case:

switch ( 2 + 2 === 4 ) {
  case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "True."

Wszystkie instrukcje po pasujących case są wykonywane, nawet jeśli są zawarte w instrukcji block.

switch ( 2 + 2 === 4 ) {
    case false:
    console.log( "False." );
  case true:
    let myVariable = "True.";
    console.log( myVariable );

}
> "True."

Jedną z pułapek korzystania z funkcji switch…case jest to, że po znalezieniu dopasowania Interpreter JavaScript wykonuje dowolną instrukcję, która następuje po dopasowanej instrukcji case, nawet te zawarte w innych klauzulach case. Jest to tzw. „przełamanie”. do następny case:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "False."
> "True."

Aby tego uniknąć, zakończ każdy przypadek słowem kluczowym break, które natychmiast zatrzymuje ocenę treści switch:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
    break;
  case true:
    console.log( "True." );
    break;
}
> "False."

Jeśli żaden element case nie pasuje do wartości warunkowej, funkcja switch wybiera default klauzuli, jeśli występuje:

switch ( 20 ) {
    case 5:
    console.log( "The value was five." );
    break;
  case 10:
    console.log( "The value was ten." );
    break;
  default:
    console.log( "The value was something unexpected." );
}
> "The value was something unexpected."

Reklamy zastępcze mają jednak zastosowanie również do zdarzenia default, co może prowadzić do nieoczekiwane rezultaty. Aby rozwiązać ten problem, zakończ wyrażenie default wyrażeniem break, lub umieścić je na ostatnim miejscu na liście zgłoszeń.

switch ( 20 ) {
  default:
    console.log( "The value was something unexpected." );
  case 10:
    console.log( "The value was ten." );
    break;
  case 5:
    console.log( "The value was five." );
    break;
}
> The value was something unexpected.
> The value was ten.

Ponieważ klauzule case nie wymagają parametru Instrukcja block do grupowania jeśli jest wiele instrukcji, klauzule case i default nie tworzą zakres leksykalny samodzielnie:

let myVariable;
switch ( true ) {
  case true:
    let myVariable = "True.";
    break;
  default:
    let myVariable = "False.";
    break;
}
> Uncaught SyntaxError: redeclaration of let myVariable

Aby zarządzać zakresem, użyj instrukcji blokowania:

let myVariable;
switch ( true ) {
  case true: {
    let myVariable = "True.";
    break;
  }
  default: {
    let myVariable = "False.";
    break;
  }
}

Pętle i iteracja

pętle umożliwiają powtarzanie zestawu instrukcji tak długo, jak długo spełniony jest warunek; do momentu spełnienia warunku. Wykonuj zapętlone instrukcje zestawu instrukcji do uzyskania określonego wyniku lub do momentu, gdy tłumacz dochodzi do końca iteracyjnej struktury danych (np. ostatniego elementu w argumencie tablica, mapa lub zbiór, końcowa właściwość obiektu lub ostatni znak w argumencie ciąg znaków).

Pętle przecinają ruch „od góry do dołu” przebieg wykonania skryptu przez iterację w zbiorze instrukcji do momentu spełnienia co najmniej jednego z warunków lub w zależności od składni użytej do utworzenia pętli. Po zakończeniu pętli, będzie kontynuowane do następujących po nim instrukcji. W poniższym przykładzie instrukcje w treści pętli są wykonywane 3 razy przed tłumacz przechodzi dalej:

let iterationCount = 0;
console.log( "Pre-loop." );
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( "Loop iteration." );
}
console.log( "Continuing on." );
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Continuing on."

Jeśli warunki nie zostaną spełnione podczas wykonywania pętli, pętla będzie kontynuowana bez ograniczeń czasowych. Te pętle nieskończone to typowa pułapka programowania, która może powoduje główny wątek wykonania. aby wstrzymać ją na stałe, a nawet zawiesić kartę przeglądarki.

Ten przykład jest wykonywany tak długo, jak pozostaje wartość logiczna true true Wartości logiczne są stałe, spowoduje to nieskończoną pętlę.

console.log( "Pre-loop." );
while( true ) {
console.log( "Loop iteration." );
}
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
…

Unikaj pozostawiania w kodzie produkcyjnym nieskończonych zapętleń. Jeśli przypadkowo utworzysz w trakcie programowania, możesz rozwiązać problem, zamykając kartę przeglądarki, w której działa. zaktualizowanie kodu, tak aby pętla nie była już nieskończona, i ponowne uruchomienie stronę.

`while`

Pętla while jest tworzona za pomocą słowa kluczowego while, po którym następuje parę w nawiasach znajduje się warunek do sprawdzenia. Jeśli określony warunek przyjmuje początkowo wartość true, wyrażenie (lub instrukcja blokowa), która następuje po nawiasy są wykonywane. W przeciwnym razie pętla nigdy się nie uruchamia. Po każdym powtórzenia, warunek jest sprawdzany ponownie, a jeśli ma on nadal wartość true, pętla i powtarzania.

let iterationCount = 0;
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( `Loop ${ iterationCount }.` );
}
> "Loop 1."
> "Loop 2."

Jeśli tłumacz znajdzie instrukcję continue w pętli while, zatrzymuje ją powtórzenia, ponownie ocenia warunek i, jeśli to możliwe, kontynuuje pętlę:

let iterationCount = 0;
while( iterationCount <= 5 ) {
  iterationCount++;
  if( iterationCount === 3 ) {
    continue;
  }
  console.log( `Loop ${ iterationCount }.` );
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Loop 4."
> "Loop 5."
> "Loop ended."

Jeśli tłumacz znajdzie instrukcję break w pętli while, oznacza to, że iteracja zatrzymuje się, a warunek nie jest sprawdzany ponownie, dzięki czemu tłumacz może przejść dalej:

let iterationCount = 1;
while( iterationCount <= 5 ) {
  if( iterationCount === 3 ) {
    console.log(`Iteration skipped.``);`
    break;
  }
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Iteration skipped.
> "Loop ended."

Za pomocą while możesz wykonać określoną liczbę powtórzeń, tak jak widać w w poprzednim przykładzie, ale najczęstszym przypadkiem użycia funkcji while jest pętla nieokreślona długość:

let randomize = () => Math.floor( Math.random() * 10 );
let randomNum = randomize();
while( randomNum !== 3 ){
  console.log( `The number is not ${ randomNum }.` );
  randomNum = randomize();
}
console.log( `The correct number, ${ randomNum }, was found.` );
> "The number is not 0."
> "The number is not 6."
> "The number is not 1."
> "The number is not 8."
> "The correct number, 3, was found."

`do`…`while`

do...while to wariant pętli while, w której funkcja warunkowa ocena ma miejsce na końcu każdej iteracji pętli. Oznacza to, że treść pętli jest zawsze wykonywana co najmniej raz.

Aby utworzyć pętlę do...while, użyj słowa kluczowego do, a po nim instrukcji (lub instrukcji blokowania), wykonywane przy każdej iteracji pętli. Bezpośrednio po tym wyrażeniu dodaj while i dopasowane nawiasy zawierające warunek do sprawdzenia. Kiedy ten warunek nie jest już zwracany jako true, pętla się kończy.

let iterationCount = 1;
do {
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
} while ( iterationCount < 3 );
> "Loop 1."
> "Loop 2."
> "Loop 3."

Podobnie jak w przypadku pętli while, najczęstszym przypadkiem użycia funkcji do...while jest pętla nieokreślona długość:

let randomNum;
do {
  randomNum = ( () => Math.floor( Math.random() * 10 ) )();
  console.log( `Is the number ${ randomNum }?` );
} while ( randomNum !== 3 );
console.log( `Yes, ${ randomNum } was the correct number.` );
> "Is the number 9?"
> "Is the number 2?"
> "Is the number 8?"
> "Is the number 2?"
> "Is the number 3?"
> "Yes, 3 was the correct number."

`for`

Użyj pętli for, aby iterować ponad znaną ilość. W starszych bazach kodu było to często używane do iteracji elementów w tablicy.

Aby utworzyć pętlę for, użyj słowa kluczowego for, a następnie zestawu nawiasów które akceptuje 3 poniższe wyrażenia w kolejności i oddzielone znakiem średniki:

Wyrażenie do sprawdzenia po rozpoczęciu pętli
Warunek określający, czy pętla ma być kontynuowana
wyrażenie do wykonania na końcu każdej pętli.

Po nawiasach dodaj wyrażenie (zwykle instrukcja blokowa), która ma być wykonywane w trakcie pętli.

for( let i = 0; i < 3; i++ ) {
  console.log( "This loop will run three times.")
}

Pierwsze wyrażenie inicjuje zmienną, która działa jak licznik. Ten jest oceniane raz przed pierwszą iteracją pętli. Dostępne opcje zainicjuj tę zmienną za pomocą algorytmu let (lub wcześniej var) jak dowolnego innego zmienną, a jej zakresem jest treść pętli. Te zmienne mogą mieć dowolne prawidłowy, ale często nazywa się go i ze względu na „iteracja” czy „indeks”. Wydaje się to sprzeczne z przyjętym sprawdzone metody tworzenia przewidywalnych nazw identyfikatorów, ale konwencja jest na tyle dobrze ugruntowana, aby inni programiści mogli wystarczy spojrzeć. Ponieważ zindeksowane kolekcje nie są indeksowane, te zmienne niemal zawsze mają początkową wartość 0.

Podobnie jak w przypadku innych form pętli, warunek jest wyrażeniem określającym, czy pętla ma zostać wykonana. Najczęściej używa się go do ustawienia górna część dla licznika iteracji. Tłumacz ocenia warunek przed wykonując pętlę for po raz pierwszy.Jeśli warunek nie zostanie do true, treść pętli nie jest wykonywana.

Ostatnie wyrażenie jest wykonywane na końcu każdej iteracji w pętli. Zwykle służy do zwiększania identyfikatora o 1.

Najczęściej występujące pętle for powtarzają się przez tablice w starszych wersjach w postaci baz kodu. W tych przypadkach warunek kontynuacji pętli jest liczba iteracji mniejsza od lub równa długości iterowanej tablicy przez telefon. Zmienna używana do śledzenia bieżącej liczby iteracji jest używana do wyszukiwania wartość powiązaną z tym indeksem w tablicy, umożliwiając każdemu elementowi tablicę, na której należy podjąć działanie w kolejności:

var myArray = [ true, false, true ];
for( let i = 0; i <= myArray.length; i++ ) {
  console.log( myArray[ i ] );
}
> true
> false
> true

Takie podejście przestało być wykorzystywane i zaczęło obowiązywać bardziej nowoczesne podejście do zapętlanie się iteracjonalnych struktur danych.

`for` [...] `of` [...]

Pętle for...of... umożliwiają iterację wartości zapisanych w elastyczną strukturę danych, np. tablica, zbiór czy mapa.

Pętla for...of... używa słowa kluczowego for, po którym następuje zestaw nawiasów zawiera zmienną, a po niej ciąg of i powtarzaną strukturę danych ponad. Zmienną może być deklaracją wykonaną tutaj za pomocą funkcji let, const lub var, zmienna zadeklarowana wcześniej w bieżącym zakresie, obiekt usługi lub przypadkiem wystąpienia niszczenie przypisania. Zawiera wartość elementu, który odpowiada bieżącej iteracji w pętli.

const myIterable = [ true, false, true ];
for( const myElement of myIterable ) {
  console.log( myElement );
}
> true
> false
> true

W tym przykładzie użycie parametru const w parametrze myElement działa, mimo że myElement to otrzymuje nową wartość w każdej iteracji pętli. To dlatego, że zmienne zadeklarowane za pomocą funkcji let lub const mają zakres ograniczony do instrukcji block w w pętli. Zmienna jest inicjowana na początku każdej iteracji i usuwana na na końcu tej iteracji.

`for`...`in`...

Używaj pętli for...in... do iteracji według wyliczanych właściwości obiektu, również wszystkie odziedziczone właściwości. Podobnie jak w przypadku pętli for...of..., for...in... pętla używa słowa kluczowego for, po którym następuje zestaw nawiasów zawierającej zmienną zawierającą wartość klucza właściwości odpowiadającego z bieżącą iteracją pętli. Po tej zmiennej następuje określenie in, a następnie powtarzany obiekt:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  console.log( myKey );
}
> "myProperty"
> "mySecondProperty"

I znów, mimo że wartość myKey zmienia się z każdym wystąpieniem pętli, możesz użyć zmiennej const bez błędów, ponieważ zmienna jest w praktyce odrzucana na końcu każdej iteracji, a potem odtworzyć na początku.

Wartość powiązana z każdym kluczem usługi nie jest bezpośrednio dostępna dla for...in... składnia. Ponieważ jednak pętla ma dostęp do klucza właściwości w przy każdej iteracji możesz użyć tego klawisza jego wartość:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "mySecondProperty : false"

Właściwości odziedziczone z wbudowanych konstruktorów są niewyliczalne, co oznacza, że for...in... nie wykonuje iteracji za pomocą właściwości dziedziczonych z Object za pomocą konstruktora. Jednak wszystkie wymienne właściwości w argumencie łańcuch prototypów:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "protoProperty : true"

JavaScript udostępnia wbudowane metody określania, czy usługa jest bezpośrednią właściwość obiektu, a nie właściwości prototypu obiektu; łańcuch: nowoczesny Object.hasOwn() i starszych metod Object.prototype.hasOwnProperty(). Te metody sprawdzają, czy określona właściwość jest dziedziczona (czy niezadeklarowana), zwracanie funkcji true tylko w przypadku natychmiastowych właściwości określonego obiektu:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  if ( Object.hasOwn( myObject, myKey ) ) {
    console.log( `${ myKey } : ${ myValue }` );
  }
}
> "myProperty : true"

Istnieją również trzy metody statyczne, które zwracają tablicę składającą się z klucze wyliczalne (Object.keys()), wartości (Object.values()) lub pary klucz-wartość (Object.entries()):

const myObject = { "myProperty" : true, "mySecondProperty" : false };
Object.keys( myObject );
> Array [ "myProperty", "mySecondProperty" ]

Umożliwia to powtarzanie kluczy, wartości lub par klucz-wartość obiektu (za pomocą niszczenia przypisania) bez uwzględniania właściwości należących do prototypu tego obiektu:

const myPrototype = { "protoProperty" : "Non-enumerable property value." };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: "Enumerable property value.",
    enumerable: true
    }
});

for ( const propKey of Object.keys( myObject ) ) {
  console.log( propKey );
}
> "myProperty"

for ( const propValue of Object.values( myObject ) ) {
  console.log( propValue );
}
> "Enumerable property value."

for ( const [ propKey, propValue ] of Object.entries( myObject ) ) {
  console.log( `${ propKey } : ${ propValue }` );
}
> "myProperty : Enumerable property value."

`forEach()`

metody forEach() udostępniane przez tablica, Mapa, Plan, a konstruktory NodeList to przydatny skrót do iteracji danych w kontekście funkcji wywołania zwrotnego. W przeciwieństwie do innych form pętli pętla utworzona za pomocą dowolnej metody forEach() nie może zostać przerwana za pomocą metody break lub continue

forEach to metoda należąca do prototypu każdej struktury danych. Co forEach oczekuje funkcji wywołania zwrotnego jako argumentu, chociaż różni się ona nieco w argumentach uwzględnionych przy wywołaniu tej funkcji. Druga, opcjonalna określa wartość this, która ma być używana jako kontekst wywołania dla funkcji funkcji wywołania zwrotnego.

Funkcja wywołania zwrotnego używana z Array.forEach udostępnia parametry zawierające wartość bieżącego elementu, indeks bieżącego elementu oraz tablicę, dla której została wywołana metoda forEach:

const myArray = [ true, false ];
myArray.forEach( ( myElement, i, originalArray ) => {
  console.log( i, myElement, originalArray  );
});
> 0 true Array(3) [ true, false ]
> 1 false Array(3) [ true, false ]

Funkcja wywołania zwrotnego używana z Map.forEach udostępnia parametry zawierające wartość powiązaną z bieżącym elementem, klucz powiązany z bieżącym elementem , a metoda Mapa forEach została wywołana w dniu:

const myMap = new Map([
  ['myKey', true],
  ['mySecondKey', false ],
]);
myMap.forEach( ( myValue, myKey, originalMap ) => {
    console.log( myValue, myKey, originalMap  );
});
> true "myKey" Map { myKey → true, mySecondKey → false }
> false "mySecondKey" Map { myKey → true, mySecondKey → false }

Wywołanie zwrotne Set.forEach zawiera podobne parametry. Ponieważ zestaw nie zawiera indeksów lub kluczy różniących się od wartości, drugi argument zamiast tego zapewnia zbędnej, nieistotnej wartości, ściśle aby zachować spójność składni innych metod forEach.

const mySet = new Set([ true, false ]);
mySet.forEach( ( myValue, myKey, originalSet ) => {
  console.log( myValue, myKey, originalSet  );
});
> true true Set [ true, false ]
> false false Set [ true, false ]

Iteratory

Eterowalność to dowolna struktura danych składająca się z pojedynczych elementów, które można i dokonania kolejnych iteracji przy użyciu metod opisanych wcześniej. iterator to element możliwy do powtórzenia obiekt zgodny z protokołem iteratora, co oznacza, że musi implementować metody next(), która przechodzi kolejne elementy w elementach, które zawiera, przy każdym wywołaniu tej metody zwracany jest obiekt dla każdej sekwencji w określonym formacie.

wbudowane iteracyjne struktury danych JavaScript (takie jak tablica, Mapa oraz Set) nie są iteratorami w same, ale wszystkie dziedziczą metodę iterator, dostępną za pomocą @@iterator znany symbol, , który zwraca obiekt iteratora utworzony na podstawie struktury danych iteracyjnej:

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterable;
> (3) [1, 2, 3]

myIterator;
> Array Iterator {}

Wywołanie metody next() w iteratorze powoduje przejście przez zawarte w niej elementy zawiera po jednym naraz, przy czym każde wywołanie zwraca obiekt zawierający dwa właściwości: value, który zawiera wartość bieżącego elementu, oraz done, jest to wartość logiczna wskazująca, czy iterator przekazał ostatni element w argumencie do struktury danych. Wartość done wynosi true tylko w przypadku wywołania next() powoduje próbę uzyskania dostępu do elementu poza ostatnim elementem lub iteratorem.

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: undefined, done: true }

Funkcje generatora

Zadeklaruj generator, używając słowa kluczowego function* (zwróć uwagę na gwiazdkę) lub zdefiniuj wyrażenie funkcji generatora:

function* myGeneratorFunction() { };

Podobnie jak iteratorzy funkcje generatorów zachowują stan. Wywołuję generator zwraca nowy obiekt generatora, ale nie od razu uruchom kod w treści funkcji:

function* myGeneratorFunction() {
  console.log( "Generator function body ")
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject;
> Generator {  }

typeof myGeneratorObject;
> "object"

Obiekty generatorów są zgodne z protokołem iteratora. Wartość każdego wywołania Wartość next() w przypadku zwracanej funkcji generatora jest określona przez wyrażenie yield, wstrzymujące wykonanie funkcji generatora i zwracające wartość funkcji generatora, zawierające słowo kluczowe yield. Późniejsze połączenia z numerem next() kontynuuj wykonywanie funkcji, wstrzymując się przy następnym wyrażeniu yield, a następnie zwracającą powiązaną wartość.

function* myGeneratorFunction() {
  yield "My first yielded value.";
  yield "My second yielded value.";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: "My first yielded value.", done: false }

myGeneratorObject.next();
> Object { value: "My second yielded value.", done: false }

Jeśli funkcja next() zostanie wywołana po nieokreśleniu kolejnych wartości za pomocą yield, return lub throw (w przypadku błędu) pozostałą część funkcji treść jest wykonywana, a zwrócony obiekt ma value o wartości undefined i done właściwość true:


function* myGeneratorFunction() {
    console.log( "Start of the generator function." );
    yield "First";
    console.log( "Second part of the generator function."  );
    yield "Second";
    console.log( "Third part of the generator function." );
    yield "Third";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> "Start of the generator function."
> Object { value: "First", done: false }

myGeneratorObject.next();
> "Second part of the generator function."
> Object { value: "Second", done: false }

myGeneratorObject.next();
> "Third part of the generator function."
> Object { value: "Third", done: false }

myGeneratorObject.next();
> Object { value: undefined, done: true }

Używaj next() tylko w przypadku obiektu zwracanego przez funkcję generatora, a nie generatora. W przeciwnym razie każde wywołanie funkcji generatora tworzy nowy obiekt generatora:

function* myGeneratorFunction() {
  yield "First";
  yield "Second";
};

myGeneratorFunction().next();
> Object { value: "First", done: false }

myGeneratorFunction().next();
> Object { value: "First", done: false }

Tak jak w przypadku każdej funkcji, funkcja generatora zatrzymuje się po napotkaniu funkcji return. słowa kluczowego. Następnie zwraca obiekt do kontekstu wywołania zawierającego zwróciło wartość i właściwość done o wartości true.

function* myGeneratorFunction() {
  yield 1;
  yield 2;
  return 3;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next().done;
> Object { value: 1, done: false }

myGeneratorObject.next().done;
> Object { value: 2, done: false }

myGeneratorObject.next();
> Object { value: 3, done: true }

Wyrażenie yield może przyjmować część semantyki identyfikatora, dwukierunkowa „komunikacja” z i z powrotem do zawieszonej części generatora. Kiedy wartość jest przekazywana do metody next() generatora jako zamiast argumentu, zastępuje wartość powiązaną z poprzednim, zawieszonym Wyrażenie yield:

function* myGeneratorFunction() {
    const firstYield = yield;
    yield firstYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

Pamiętaj, że spowoduje to zastąpienie całego wyrażenia powiązanego z poprzedni yield i nie tylko ponownie przypisuje wartość poprzedniego elementu yield do wartość określona we właściwości next():

function* myGeneratorFunction() {
    const firstYield = yield;
    const secondYield = yield firstYield + 100;
    yield secondYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 10 ); // Can be thought of as changing the value of the `firstYield` variable to `10
> Object { value: 110, done: false }

myGeneratorObject.next( 20 ); // Can be thought of as changing the value of the `secondYield` variable to `20`, _not_ `20 + 100;`
> Object { value: 30, done: false }

Każdy argument przekazany do pierwszego wywołania funkcji next() jest ignorowany, ponieważ nie ma poprzedniego wyrażenia yield, aby zaakceptować tę wartość. Tak jak w przypadku każdej innej funkcji, dostępne są argumenty przekazywane do początkowego wywołania funkcji generatora zakres treści funkcji generatora:

function* myGeneratorFunction( startingValue ) {
    let newValue = yield startingValue + 1;
    newValue = yield newValue + 10;
    yield startingValue + 20;
};
const myGeneratorObject = myGeneratorFunction( 2 );

myGeneratorObject.next( 1 );
> Object { value: 3, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

myGeneratorObject.next( 10 );
Object { value: 22, done: false }

Operator yield* (zwróć uwagę na gwiazdkę) jest używany z iteracjami, w tym: innej funkcji generatora do iteracji i uzyskania każdej wartości argumentu zwraca:

function* mySecondaryGenerator() {
  yield 2;
  yield 3;
}

function* myGenerator() {
  yield 1;
  yield* mySecondaryGenerator();
  yield 4;
  return 5;
}

const myIterator = myGenerator();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: 4, done: false }

myIterator.next();
> Object { value: 5, done: true }

Asynchroniczny JavaScript

Mimo że JavaScript jest zasadniczo synchroniczny to istnieją mechanizmy, które pozwalają programistom wykorzystać pętlę zdarzeń, która ma zostać wykonana asynchronicznych zadań.

Obietnice

Obietnica to obiekt zastępczy dla wartości, która nie jest znana, gdy obietnica jest Utworzono. To kontener, który dyktuje operację asynchroniczną, działania, które zostaną uznane za sukces lub niepowodzenie, w obu przypadkach i uzyskaną wartość.

Tworzenie instancji Promise za pomocą operatora new z wbudowanym Promise za pomocą funkcji konstruktora. Ten konstruktor akceptuje funkcję o nazwie wykonawca jako argumentu. Ta funkcja wykonawcy jest zwykle wykorzystywana do wykonywania asynchronicznych działań, a następnie dyktując warunki, według których powinna zostać złożona obietnica uznanych za zrealizowane lub odrzucone. Obietnica jest określona jako oczekująca. gdy jest uruchomiona funkcja wykonawcy. Po zakończeniu realizacji przez wykonawcy obietnica jest uznawany za zrealizowany (lub rozwiązany w niektórych źródłach dokumentacji), jeśli funkcja wykonawcy i wykonywane przez nią działanie asynchroniczne zostały zakończone i odrzucona, jeśli funkcja wykonawcy napotka błąd; wykonywane działanie asynchroniczne kończy się niepowodzeniem. Po spełnieniu obietnicy lub odrzucono, jest uznawane za rozstrzygnięte.

const myPromise = new Promise( () => { });

Konstruktor wywołuje funkcję wykonawcy za pomocą dwóch argumentów. Te argumenty to funkcje, które pozwalają ręcznie zrealizować lub odrzucić obietnicę:

const  myPromise = new Promise( ( fulfill, reject ) => { });

Funkcje służące do realizacji lub odrzucenia obietnicy są wywoływane z wynikiem wartość obietnicy jako argument (zwykle jest to błąd odrzucenia):

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was successful." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 10000);
});

myPromise;
> Promise { <state>: "pending" }

myPromise;
> Promise { <state>: "fulfilled", <value>: "This Promise was successful." }

Łańcuch obietnic

Na powstałym obiekcie Promise można wykonać działania za pomocą interfejsów then(), catch() i Metody finally() odziedziczone z konstruktora Promise. Każda z tych opcji zwraca obietnicę, dla której można natychmiast wykonać działanie za pomocą funkcji then(), catch() lub finally(), co pozwoli Ci połączyć wynikowe obietnice.

Funkcja then() udostępnia 2 funkcje wywołania zwrotnego jako argumenty. Wykorzystaj pierwsze z nich do realizacji wynikową obietnicę, a drugi ją odrzucić. Obie metody , który nadaje wynikowi Promise wartość.

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise.then( successfulResult => console.log( successfulResult ), failedResult => console.error( failedResult ) );
> "This Promise was successful."

Za pomocą polecenia then() możesz też obsługiwać tylko stan realizacji, a catch – do obsługi stanu odrzucenia. Wywołaj funkcję catch za pomocą jednego argumentu zawierającego wartość podana w metodzie odrzucenia obietnicy:

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = false;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise
  .then( fulfilledResult => console.log(fulfilledResult ) )
  .catch( rejectedResult => console.log( rejectedResult ) )
  .finally( () => console.log( "The Promise has settled." ) );
> "Error: This Promise has been rejected."
> "The Promise has settled."

W przeciwieństwie do funkcji then i catch, które umożliwiają uruchamianie funkcji obsługi, gdy obietnica zostanie wypełnione lub odrzucone, funkcja przekazana jako argument do funkcji finally jest wywoływana niezależnie od tego, czy obietnica została spełniona czy odrzucona. Funkcja obsługi jest wywoływana bez argumentów, ponieważ nie jest przeznaczona pracować z wartościami przekazanymi z obietnicy, tylko do wykonywania kodu po parametrze Obietnica skończona.

Równoczesność

Konstruktor Promise udostępnia 4 metody pracy z wieloma powiązanymi Obietnice – użycie parametru iterable zawierającego obiekty Promise. Te każda z tych metod zwraca obietnicę, która jest realizowana lub odrzucana na podstawie stanu z przekazanych mu obietnic. Na przykład Promise.all() tworzy obietnicę którą zostanie spełniony tylko wtedy, gdy zostanie spełniony każda obietnica przekazywana do tej metody:

const firstPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const secondPromise = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const thirdPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const failedPromise = new Promise( ( fulfill, reject ) => reject( "Failed.") );
const successfulPromises = [ firstPromise, secondPromise, thirdPromise ];
const oneFailedPromise = [ failedPromise, ...successfulPromises ];

Promise.all( successfulPromises )
  .then( ( allValues ) => {
    console.log( allValues );
  })
  .catch( ( failValue ) => {
    console.error( failValue );
  });
> Array(3) [ "Successful. ", "Successful. ", "Successful. " ]

Promise.all( oneFailedPromise  )
    .then( ( allValues ) => {
      console.log( allValues );
    })
    .catch( ( failValue ) => {
     console.error( failValue );
    });
> "Failed."

Metody Promise równoczesności są następujące:

Promise.all(): Zrealizowany tylko wtedy, gdy wszystkie podane obietnice zostaną spełnione.
Promise.any(): Wypełniona, jeśli którakolwiek z podanych obietnic zostanie spełniony, a odrzucona tylko jeśli wszystkie obietnice zostaną odrzucone.
Promise.allSettled(): Zrealizowane, gdy obietnice ustabilizują się, niezależnie od ich wyniku.
Promise.race(): Odrzucona lub zrealizowana na podstawie wyniku pierwszej obietnicy do rozliczenia, ignorując wszystkie obietnice zawarte w późniejszym czasie.

`async`/`await`

Jeśli używasz słowa kluczowego async przed deklaracją funkcji lub wyrażenie funkcji, dowolny zwracana przez funkcję wartość jest jako spełniona obietnica zawierająca . Dzięki temu możesz uruchamiać operacje asynchroniczne i zarządzać nimi przy użyciu w procesie programowania synchronicznego.

async function myFunction() {
  return "This is my returned value.";
}

myFunction().then( myReturnedValue => console.log( myReturnedValue ) );
> "This is my returned value."

Wyrażenie await wstrzymuje wykonywanie funkcji asynchronicznej, podczas gdy wiążąca obietnica jest wiążąca. Po uzgodnieniu obietnicy wartość wyrażenie await to zrealizowana lub odrzucona wartość obietnicy.

async function myFunction() {
  const myPromise  = new Promise( ( fulfill, reject ) => { setTimeout( () => fulfill( "Successful. "), 5000 ); });
  const myPromisedResult = await myPromise;
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "Successful."

Każda wartość inna niż obietnica zawarta w wyrażeniu await jest zwracana jako spełniona obietnica:

async function myFunction() {
  const myPromisedResult = await "String value.";
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "String value."

Sprawdź swoją wiedzę

Jakiego rodzaju pętli używasz, aby iterować według znanej ilości?

for

while

do...while