Press "Enter" to skip to content

map for async iterators in JavaScript


buon lunedì mattina stai guardando un
serie su iteratori in JavaScript in
il video della scorsa settimana abbiamo esplorato il
concetto di iteratori di ordine superiore o il
concetto di avere un iteratore
dove abbiamo trasformato i contenuti
in qualcos’altro come possiamo
utilizzare la mappa e filtrare la matrice su
trasforma il contenuto dell’array in
il video della scorsa settimana abbiamo creato una funzione
chiamato in ritardo che ha appena preso un
iterabile e restituisce un nuovo iterabile il
come il robot ma dove c’era il flusso
ritardato di un paio di secondi questo è un
concetto che stiamo andando a continuare
esplorando oggi e oggi stiamo andando a
scrivere una funzione mappa ma per iterables
invece di matrici hmm io sono mpj e tu
stanno guardando la fun fun function
[Musica]
bene disclaimer è che oggi sono io
estremamente stanco ed estremamente caldo sono
così tutto sudato è caldo svedese
estate e sono tipo oh ma non importa voi
non può sempre avere livelli di energia super
a volte basta appoggiarsi nella
problema comunque, come ben sai ormai
questo spettacolo è sponsorizzato da pusher pusher
elimina il dolore aggiungendo in tempo reale
funzionalità di collaborazione e comunicazione
alla tua app chiusa pub / sub feeds mobile
spingere è il nome di lui check out annuncio pusher
dot fun for action.com che è anche link
nella descrizione dell’episodio, va bene
farlo qui siamo al osservabile
quaderno del video della scorsa settimana
andando a sborsare questo in modo che non lo facciamo
sovrascrivi quello ora abbiamo un nuovo
versione del notebook che stai cercando
abbiamo finito qui, troverai un
link a questo quaderno nel
descrizione dell’episodio in modo da poter giocare
in giro con questo te stesso e prima di noi
entrare nella creazione della mappa che stiamo per
risolvere un problema che è stato di disturbo
me per un po ‘e questo è il
fatto che questa cosa è a volte
lampeggiante puoi vederlo a volte e
a volte non piace quello là là
lampeggia come c’è e quello è
perché le immagini vengono caricate
al volo e cosa mi piacerebbe che facesse
è precaricare l’immagine prima di essa
lo mostra in modo che ce ne siano alcuni lì
non è un prodotto flash , ma semplicemente tocco
il modo in cui lo faremo è che noi
stanno andando a implementare allo stesso modo
abbiamo una funzione ritardata che crea
una versione ritardata dei gatti il
ricerca di tag flicker che siamo creati
creeremo una funzione che è
chiamato pre-caricato che crea un flusso
dove tutte le immagini sono pre-caricate
prima che siano o ceduti andiamo
per creare una funzione immagine precaricata e
Quello che fa è che sta andando a
prendere e
un conte e sta andando a fare in modo che
che il conte di quell’immagine è
precaricato nella cache del browser e
poi restituisce una promessa che lo farà
risolvi a quel conte oh yeah fatto io
non entrerà troppo in questo codice così com’è
non proprio legato al problema in
mano
ma semplicemente precarica un’immagine e la mette
nella cache del browser è questo che tu
bisogno di sapere ora creiamo in realtà
la funzione funzione precaricata
precaricato questa funzione sta per
prendi un iterabile iterabile qui
presume che sia un iterable di erbe
e quegli URL sembrano essere immagini e
quindi si suppone che precaricato restituisca a
nuovo iterabile in cui ogni immagine è
garantito per essere precaricato, facciamo solo
fallo per un peso costante SRC di mangiare il tuo
ciotola se per un peso tutto ti confonde
questo perché hai saltato
episodi in questa serie c’è un
prima versione della serie in cui parliamo
sulla parola chiave 408 off che puoi controllare
là fuori abbiamo il loro peso
parola chiave qui significa che è necessario
rendere questa funzione uno zinco o l’attesa
la parola chiave non funzionerà probabilmente
chiama questo URL forse o no e poi
potremmo semplicemente chiamare ogni modo ogni volta che ci
ottenere un conte dal nostro iteratore di sincronizzazione
qui che sono gli URL stiamo andando a pre
carica l’immagine e stiamo andando carina
basso danno a quel conte e tu
sì, intendo che non abbiamo davvero bisogno di farlo
qualsiasi peso qui perché l’ immagine del precarico è
intenzione di restituire una promessa comunque così hmm
Penso che sia questo proviamo
oh aspetta che la chiave sia resa delle parole chiave
riservato sì
non puoi semplicemente usare la resa a caso tu
in realtà devo farlo all’interno di a
generatore e aggiungiamo una piccola stella qui
per designare che questo è un generatore
va bene, vediamo se funziona
andiamo da Katz qui e poi completiamo
questa cosa in un pre-caricato ci andiamo
sì ha fatto quel lavoro no no non è stato tutto
c’è un debug ben noto
tecnica tra i programmatori senior che
è chiamato come frustrato e
cliccando intorno oh sembra che sia
iterando sopra gli URL va bene come
come una stringa in modo hmm hmm sì, questo è dovuto
per essere osservabile più utile e noi
voglio che sia o è molto bello
è così utile che non va bene per
gli scopi di questo da parte mia spiegando
cose l’ultima funzione che abbiamo fatto noi
abbiamo fatto la funzione ritardata eccoci qui
creando manualmente un iteratore asincrono con
codice ma nella nostra nuova cosa precaricata noi
stavamo usando useremo una sincronizzazione
generatori per creare l’iteratore asincrono
e osservabile ha alcune cose che esso
usa per riconoscere che qualcosa è e
un generatore di sincronizzazione e ne fa un po ‘
trasformazione utile tutto ciò che sembra
non ci rende necessario questo per questo
il che significa che siamo una specie di EE per
ognuno come stiamo iterando sopra
qualcosa che è già un compito aa
iterated over ed è per questo che siamo
farti sembrare qui è così
perché è il parsing è forza tutti
il tempo quindi cosa farò solo per
finire tutta la sua confusione che farò
è il modo osservabile e ho intenzione di farlo
cancella tutto questo sì il bordo più infelice
il codice HTML qui e io sono solo andando write
i gatti qui colpiscono entrano quindi sono i gatti qui
e i gatti qui so che funziona
è qui che mi piace non c’è lampeggiante
andare avanti è solo
Interruttori scattanti mentre ci sei , facciamolo
in realtà refactoring questa funzione ritardata
in un generatore anche perché la
sincronizza la creazione manuale degli iteratori
è stato bello farlo per farlo
sicuro che tu capisca che noi siamo
Il generatore di Hera viene da ma
generalmente vuoi fare questi dove il
sincronizzare i generatori perché la sintassi è
sarà molto più bello che ho intenzione di
refactor questo solo generatore di messaggi
[Musica]
ci si, come si vede in questo confronto
a questo molto più corto tutto bene quindi andiamo
inizia a pensare al tag flicker della mappa
cerca qui non ci sono molti dati da mappare
perché la ricerca di tag flicker è proprio ora
sta restituendo solo un tipo di fonte
fonte Earl I e ​​questo è un po ‘limitante
perché i prodotti a sfarfallio possono essere molti
diverse dimensioni quindi sarebbe bello se
la ricerca del tag flicker in realtà no
solo restituire un sacco di URL che sarebbe
solo restituire ciò che ha detto oggetti di ritorno
che aveva URL per rappresentare diversi
le dimensioni delle foto, quindi facciamo il refactoring
attacca la ricerca per farlo
[Musica]
va bene così ora sta tornando un
oggetto con un Earl quadrato e un mezzo
Earl giusto e poi quaggiù che avevamo
come questo ha senso è vero manzo
foto foto e ora che abbiamo questo
ciò significa che tutto è rotto
questo è precaricato perché questo è
andare ora assume come questo presuppone
che si ottiene che l’iteratore abbia un
un mazzo di frecce che non funzionerà è
sta per essere foto foto e non appendere
foto foto ciascuna così – stiamo andando a
precaricare l’ Europa ok e ora funziona
tuttavia questo è un po ‘ stranamente precaricato
è ora a conoscenza di come le foto appaiano
significa che il pre-caricato ne è a conoscenza
molto più cose che volevamo essere
consapevole che era così bello quando era giusto
come operare su un iterabile di URL
ora è solo a conoscenza di foto in like
che il quadrato della foto così sarebbe
bello se potessimo poterci inserire in una mappa
funzione qui che potrebbe filtrare o
come mappare solo gli URL in modo che
pre-caricato può operare su quelli così noi
stanno andando a scrivere una mappa, quindi ricorda
quella mappa è come un concetto in funzione
programmarlo ed è un metodo su
array in realtà ho un interessante
episodio sulla mappa qui che è possibile
guarda cosa stiamo per fare è che siamo
andando a scrivere la mappa per gli iteratori e
proprio come lavorano su una gara sono
fondamentalmente una funzione che restituisce una nuova
matrice in cui ogni oggetto è stato
alimentato attraverso una mappa una funzione mapper e
stato trasformato e allo stesso modo
questo sta per creare un iteratore
dove ogni elemento è stato alimentato attraverso a
natura un mappatore e trasformare così è a
funzione che richiede un mappatore e
ci vuole un iterable mangiare la ciotola e
sai cosa possiamo effettivamente afferrare il
funzione precaricata precaricata qui
e come base per questo perché lo è
molto simile quindi lo chiamerò solo
mappa e invece di foto ci sono
iterando sopra e genericamente il
ruotabile
iterabile e per ogni oggetto in a
tavolo che stiamo per non dargli da mangiare
attraverso un mappatore il mappatore di riga dell’articolo e
rendilo così sì, questo è tutto e
ora posso aggiungere questo qui e questo
questo sta diventando un po ‘confuso e io
so che questo è troppo NASA
andando a che fare con che poi ho
prometto che ti mostrerò un bel modo di
trattare con quello ma per ogni foto
stiamo per estrarre i punti foto s
piazza e ora abbiamo bisogno di tornare a
precaricato e intenzione di gettare il revert
torna a usare solo queste fonti
e condivisione pre-caricata che lo fa sì
bello, quindi ora eravamo tornati e lo siamo ora
usando la mappa per alimentare come trasformare ogni
foto in soli URL quadrati che è
quindi andando nella trasformazione ritardata
e poi quella cosa è pre-caricando ciascuno
questa immagine è super disordinata da leggere però
anche se comincio a indentarlo in modo intelligente
modi come questo questo non lo è ancora
come se fosse solo difficile da seguire
e la cosa è come questa si da un
punto di vista architettonico è carino
bello è come se fosse un flusso
dove ci limitiamo a nutrire da una funzione a
un altro
è come strutturalmente sembra
qualcosa che vogliamo fare è solo
che la sintassi qui solo rende
così difficile da leggere e questa cosa in cui noi
basta avere queste funzioni a cui dare da mangiare
l’un l’altro è molto comune in
programmazione funzionale e quindi ci sono
funzioni di supporto per questo in tutto
librerie funzionali quindi siamo veramente
andando a tirare in un funzionale
linguaggio di programmazione chiamato lambda
lambda è che ha un sacco di funzioni e
è facile cadere facilmente in
anche questa trappola dell’uso di Ram differisce
molte cose e procrastinare semplicemente
trovare o kübra sotto metodo ma uno
Ram molto utile la funzione è pipe e
risolve il nostro problema esatto qui lo farò
mostrarti come funziona
[Musica]
[Musica]
va bene, lo rifattero usando
pipe così come vedi qui chiamiamo semplicemente
scorri un gatto cerca un uccello Kirk un tag
cerca gatti e questo è un iterable e
quello è alimentato nella funzione che è
creato da pipe e pipe è proprio come
queste sono le stesse funzioni che è
solo che li abbiamo messi nell’involucro
funzioni per ora dove abbiamo solo il
iterable è smazzato qui attraverso il
prima uno e poi, come si chiama con
mappa e poi tutto ciò che viene restituito lì
è è è va qui e poi
è pronto a rimandare e qualunque cosa sia
restituito da questa funzione è qui
andando qui e sta andando qui così
è molto di cui ricorda un po ‘
promette e poi sai come
tutto è alimentato attraverso il
dopo, questo è ancora molto prolisso e
Noi non stiamo andando a semplificare un po ‘
Ti sto solo guidando attraverso ogni passo
qui intervallo qui quando lo vedi
questo significa che questo è un è
questa funzione un po ‘superfluo non lo facciamo
in realtà possiamo passare solo precaricati
immediatamente questo però non lo è
non necessario, dobbiamo effettivamente passare
l’iterabile da ritardare in qualche modo
come noi non si può fare fare questo o possiamo
questo è dove ti mostrerò a
tecnica chiamata curry quindi stiamo cercando
in ritardo qui posso solo aprire in ritardo e
se solo facciamo invece ritardare make
ritardato in una funzione che richiede a
numero di secondi
giocato o così ritardo secondi e poi
restituire questa funzione in modo che possiamo rimuovere
questo argomento qui perché abbiamo ora
spostato qui
quindi vediamo ma non creiamo il
disfunzione che fa un’altra funzione
e questo è chiamato così chiamato
portando o applicazione parziale non lo faccio
sapere esattamente come si chiama ma è un
la tecnica di costruzione funziona
gradualmente questo significa che questa cosa
Qui
scusa vai in coma ora sta creando un
funzione che creerà l’iterabile
quindi è come ritardare qui è ora
creando una funzione che è molto
adatto per il passaggio in tubi come
questo e faremo lo stesso per la mappa
qui in realtà ho intenzione di fare una mappa
la mappa di kuriboh è uguale al mappatore e noi siamo
rimuoverlo da lì perché noi
ho spostato il mapper qui e io sono
salvarlo o aggiornare quello che
significa che ora posso rimuovere questo wrapper
qui e ora siamo buoni oh scusa, facciamo
andare Affrettati
e ora dovrebbe funzionare sì, quindi è un
molto più leggibile e la cosa che abbiamo visto
prima così il modo in cui funziona è questo
cosa qui come il iterable che siamo
creando dalla ricerca di tag flicker che è
passato in mappa e poi è stato
in ritardo e quindi è stato precaricato
ad alcune persone piace nominare queste cose così
se ho appena creato, forse estrarre indietro
url e lasciandomi afferrare e io torno indietro
qui e mi piace così perché quello
crea come questa cosa auto-documentante
con piccole funzioni un po ‘di una questione di
gusto e anche come una questione di contesto
Penso che questo sia probabilmente un po ‘
un po ‘eccessivo perché questo ha così poco
la complessità è abbastanza chiara cosa
sta facendo io
probabilmente lascialo in riga per essere
onesto ma è qualcosa che puoi
fai una cosa che potresti aver notato
mentre stavamo copiando il pre-caricato
la cosa è che questo è sembrato come
matematica e pre-caricato era un po ‘simile
forse possiamo usare la mappa per implementare
pre-caricato possiamo farlo che facciamo solo
commentalo per un po ‘e vediamo se siamo noi
possiamo fare quel prezzo pre-caricato che possiamo solo
forse possiamo usare do map e poi
immagine di precarico hahaha
entra e funziona, potrei cancellarlo
quindi in questo caso forse mi piace questo extra
piccola variabile qui forse è a
un po ‘inutile forse potremmo
in realtà in linea che in linea che qui
e di sbarazzarsi di questa cosa in più qui
sapere in ritardo forse possiamo possiamo fare
anche questo qui non è questo tipo di
un po ‘ della stessa cosa che puoi effettivamente fare
basta rompere il ritardo nella sua stessa cosa
sbarazzati di questo qui così che facciamo
certo che lo stiamo usando e questo è
non è esattamente la stessa cosa, proviamo
implementandolo con la mappa e vedere dove
stavamo andando
vediamo la mappa in ritardo ed è questo
cosa che abbiamo ottenere un’isola e abbiamo attesa
per i secondi di ritardo e tutti se il ritardo
secondi e poi rendiamo l’oggetto in attesa
aspetta aspetta tutto questo deve essere un lavandino
affondare voce la resa della parola chiave è la ricerca
oh sì, ha bisogno
– no, non ti servono tutti e tre
distinto l’oggetto classificato bro yeah I
penso che sia un po ‘ come perché è
si sta confondendo cosa dove
aspettando penso che dobbiamo fare questo o
forse no
forse tutto è un no no no no è
o oggetto oh che funziona così posso farlo io
rimuovi i loro genitori di cui non hanno bisogno
che lo faccio bene va bene così
ora lo abbiamo sostituito con con la mappa
e questo ti mostra davvero perché la mappa è così
incredibilmente potente e funzionale
la programmazione del codice usato evapora
è questo passaggio in più inutile
possiamo solo metterlo in linea nei gatti
Ha senso proviamo che un –
sì, suppongo che potremmo non è così
molto simile a questo è un sacco di errori è
non leggibile come sembra
a me sembra semplice
semplice me questo mmm non così tanto
Penso che mantenere questo qui faccia
Sento che questo è abbastanza chiaro per a
bel flusso così come fa un’estrazione
senso
Penso che tarderai a rimanere, non lo sono
andando in fila tu e quella è la mappa per a
sink iterators Spero che questo si allarghi
i tuoi orizzonti un po ‘ spero che sia stato
interessante e ti ha mostrato un po ‘
quello che possiamo quanto potente un lavandino
gli iteratori sono e cosa possiamo fare con
loro è molto funzionale
programmazione e anche lì ti ha mostrato
un po ‘di pipa un po’ di
portando tecniche se questo episodio
ti ho confuso che è completamente normale
significa che stai imparando
posta un commento in basso chiedendo il tuo
domande o chiedendo
confusione o se vuoi supportare il
mostra che puoi diventare un patron del divertimento divertente
funzione per i tuoi dollari Scala e quello
ti dà accesso al forum Fun Fun
che è un luogo fan friendly e divertente
dove puoi discutere di codice e vita e
roba in questo episodio con me e altri
programmatori come un collegamento al tema per
questo episodio nel forum dei fan
la descrizione assoluto fare il check-out
e non dimenticare il nostro sponsor pusher
funzione di ventola del ventilatore di punto comlink come
nella descrizione dell’episodio tu hai
ho appena guardato un episodio divertente
funzione li rilascio ogni lunedì
mattina o aspetta centinaia di GMT puoi
iscriviti qui per non perderti
oppure puoi guardare un altro episodio giusto
ora cliccando qui sono mpj fino al prossimo
Lunedì mattina resta curioso
Please follow and like us: