Transcription
1. Introduction: Bonjour, bienvenue dans ce
cours sur ES6 JavaScript. Javascript est l'un des
langages
de programmation les plus demandés aujourd'hui. Et les compétences ES6 sont
très demandées. Si vous souhaitez travailler avec des
bibliothèques telles que React, Learning, ASL est un
élément essentiel de votre parcours. Au cours de notre parcours à travers
ES6, à travers des exemples, nous commencerons par les bases
telles que le travail avec let et const. Nous passons ensuite
à des sujets tels que les fonctions et classes de flèche structurant
D. Nous terminerons le cours
en examinant les promesses. L'un des aspects déroutants
lorsque vous apprenez ESX est de comprendre où
il correspond à un code plus ancien. Ce cours, nous allons vous
montrer deux exemples, comment les choses ont été faites auparavant
et nous avons aidé à répondre au pourquoi derrière les changements
et à la syntaxe. m'appelle Emma, et j'ai travaillé comme programmeur
lors de la journée des industries. J'adore travailler avec JavaScript. J'adore aider les autres
à apprendre la langue. J'espère que ce cours vous plaira.
2. laissez et const: Dans cette vidéo, nous allons
regarder let and const. Javascript a trois façons de
créer une variable depuis ES6, les deux premières sont en
utilisant le
mot-clé gauche ou const Latin comps a
été introduit dans ES6. Avant ES6, la seule façon de
créer une variable était d'
utiliser la barre de mots clés. Vous pouvez donc toujours voir du code qui utilise cela et c'est correct. Mais à l'avenir, il est
préférable de s'en tenir à différence de domaine const
latéral
entre l'utilisation de
this ou const est que
les variables créées avec le mot-clé constant ne peuvent pas être modifiées une fois qu'elles
ont été créées. Si vous créez une
variable et que vous savez que
la valeur de cette
variable ne changera pas, il est préférable d'utiliser const. exemples peuvent inclure les jours
de la semaine ou de l'année. Nous allons créer quelques variables
dans la console à l'aide de const. Nous allons commencer par créer
une variable appelée days. Je vais lui attribuer un
tableau contenant lundi, mardi, mercredi. Rappelons-nous des jours. Nous voyons le tableau de nos jours. Créons une autre variable
en utilisant le code const mon âge. Ce qui lui
a été attribué la valeur 100. Rappelons maintenant
la variable d'âge. Nous pouvons voir que 100 ont été
stockés
avec succès dans la variable. Si vous savez que la valeur de
la variable va changer, vous
devez utiliser gauche lorsque
vous déclarez la variable. Sinon, vous obtiendrez
une conférence d'erreur, un exemple en changeant la valeur de mon âge à neuf ans. Nous obtenons une erreur
de type non détectée de l'attribution du message
à une variable constante. Nous allons maintenant créer une
variable appelée Changer âge en utilisant et nous allons lui
attribuer la valeur deux. Nous allons maintenant rappeler la variable. Nous pouvons voir que la valeur de deux a été
stockée
avec succès dans la variable. Essayons maintenant de le mettre
à jour à trois. Nous disons donc que changer
d'âge équivaut à trois ans. Rappelons maintenant la variable d'âge
qui change. Nous pouvons voir qu'il a été mis à jour
avec succès.
3. Portée: Bonjour. Dans cette vidéo, nous allons
introduire la portée en JavaScript. Dans votre maison, il
se peut que vous ayez des objets, peut-être dans la cuisine
ou dans le couloir, accessibles à
tous ceux qui y vivent. Ensuite, dans votre chambre, il se peut que vous
ayez d'autres
objets personnels que vous préférez
utiliser uniquement par vous-même. Cet exemple illustre essentiellement le fonctionnement de scope en JavaScript. Il s'agit d'une définition des
rôles, de la façon dont les variables, les objets et les fonctions sont
accessibles lorsque le code est exécuté. portée en JavaScript définit le contexte actuel du code. Ainsi, au niveau de base, il existe deux étendues
au sein de JavaScript, portée
globale et la portée locale. En gros, la norme
définit quelles variables sont accessibles et visibles
lorsque le code est en cours d'exécution. Commençons par
répondre à la question : quelle est la portée globale des programmes
JavaScript a une portée globale, variables qui se trouvent à l'intérieur la portée globale ou accessibles, modifiables et visibles depuis
n'importe où dans notre code. Les variables de la portée
globale sont également disponibles pendant toute la durée de
vie que notre programme exécute. variables
déclarées en dehors d' une fonction ou d'un bloc en
dehors de la portée globale, il est important d'être attentif
lorsque nous déclarons des variables dans la portée
globale de la raison pour laquelle nous le faisons, la déclaration de variables
dans la portée globale peut consommer de la mémoire lorsque
le programme s'exécute. Et l'instance de dénomination peut
se produire lorsque des variables portant le même nom
sont déclarées séparément dans différentes
étendues de notre code. Allons de l'avant et
écrivons du code. Nous commencerons par
déclarer une variable à l'aide de laquelle nous appellerons
notre variable globale. va initialiser cela
avec la chaîne Hello. Prochaine. Ensuite, créez une déclaration de
fonction, que nous appellerons
une fonction. La fonction renverra simplement la valeur de notre variable
globale. Enfin, nous allons invoquer
cette fonction. Enveloppons cela dans un
journal de console et nous allons exécuter le code. Nous obtenons la valeur de la variable
globale renvoyée, qui est la chaîne Hello. Tout cela est possible
parce que la variable est
globale
dans la portée globale. Il est donc
accessible depuis n'importe où. Quelle est donc la portée locale ? Lorsque vous entrez dans une
pièce de votre maison, vous entrez une étendue
locale spécifique dans la programmation, chaque fois qu'une nouvelle étendue est créée à l'intérieur de la
portée globale, par exemple, chaque fois que vous créez
une fonction et puis une nouvelle
étendue locale est créée, toutes les variables créées à l'intérieur de
cette étendue locale ne
seront accessibles qu'à partir de
cette fonction. On pourrait penser à cela
un peu comme dire que vous ne pouvez ouvrir et fermer une fenêtre que depuis l'intérieur de la pièce. Les fenêtres de votre maison, les paramètres de
fonction sont également classés comme étant dans
la portée locale. Si vous essayez d'
y accéder depuis l'extérieur
de la fonction, JavaScript générera une erreur. Depuis ESX, nous pouvons diviser la portée
locale en deux parties, portée de
la fonction et la portée du bloc. Lorsque nous utilisons
des variables aujourd'hui, nous utilisons généralement left ou const, mais étant donné la quantité
de code écrite avant A6, il vaut toujours la peine
d'être familiarisé avec. Chacune de ces variables utilise des règles de portée
différentes. Ce sont les suivants. Loin est la portée de la fonction, const est une portée de bloc et la
gauche est portée de bloc. Commençons par
répondre à la question, qu'est-ce que la portée des fonctions ? Mais lorsqu'une variable est
définie à l'intérieur d'une fonction, on peut dire que la variable
est étendue de fonction. Si vous essayez d'accéder à
une variable locale depuis l'extérieur de la fonction
depuis laquelle elle a été définie. Une erreur, en particulier
une erreur de référence, sera générée lorsque
vous exécutez le code. Les variables définies avec les
mots-clés let et const se
comporteront de la même manière dans étendue de la
fonction
que dans le bloc scape. Regardons un peu de code. Nous allons commencer par créer une déclaration de fonction
appelée fonction somme. Dans cette fonction, nous
allons créer une variable en utilisant
notre variable locale. va initialiser cela
avec la chaîne bonjour. Enfin, nous voulons renvoyer la variable locale à
partir de la fonction. Maintenant, en dehors de la fonction, voyons ce qui se passe
lorsque la console déconnecte la valeur de la variable locale. Nous allons exécuter ce code. Nous revenons à l'
erreur de référence car nous essayons d'
accéder à une
variable à portée locale à partir de l'étendue globale. Répétons maintenant les
mêmes étapes, mais cette fois, nous allons
modifier la variable pour utiliser const comme constante. Laissez, euh, les deux blocs de chèvre, nous avons touché le même problème. Passons à l'examen de la portée du bloc. En JavaScript, un
bloc est un morceau de code imbriqué à l'intérieur
d'une paire d'accolades. Les instructions conditionnelles et
les boucles sont tous deux des exemples de bloc. portée du bloc signifie que
chaque fois qu'un bloc est créé en tant que nouvelle étendue locale. Lorsque nous créons une
variable dans un bloc, cette variable est ensuite
étendue à ce bloc. Cela signifie que
les variables ne sont
pas accessibles depuis
l'extérieur du bloc. Si vous essayez d'accéder à une
variable définie à l'intérieur du bloc de code
depuis l'extérieur du bloc. Javascript déclenche une erreur, particulier une erreur de référence. Mais notez que la
portée du bloc ne s'applique pas lorsque nous définissons des variables
avec le mot-clé var. Regardons un peu de code. Nous allons commencer par créer
une déclaration de fonction, et cette fois-ci, nous l'
appellerons notre exemple de portée. À l'intérieur de cela, nous
utiliserons une déclaration if. Nous dirons si c'est vrai. À l'intérieur du bloc, une variable sera
déclarée à l'aide de var. Et nous appellerons celui-ci, initialiserons avec
la chaîne que j'ai été créée en utilisant l'instruction after
the if. Nous allons consoles consigner
la variable. Exécutera ensuite également la
fonction, ah, l'exemple de portée. Lorsque le code s'exécute, nous obtenons la chaîne
de la variable imprimée sur notre écran. La raison pour laquelle cela fonctionne est
que la barre a une portée de fonction, aucun tableau de portée de bloc ne s'applique. Essayons encore une fois. Mais nous allons changer la
variable de var à utiliser. Nous allons également changer le nom de cette
variable par deux. Mettons également à jour
notre journal
de console exécuter à nouveau ce code. Cette fois, nous obtenons une erreur
de référence. Cela est dû au fait que LET est limité au
bloc et ne peut pas être accessible depuis l'extérieur du
bloc créé. Si nous
voulions exécuter ce code, nous devrions
déplacer notre journal de console dans le même bloc
que la variable. Maintenant, nous obtenons la chaîne que j'ai été créée à l'aide de l'impression
à l'écran. Sinon, nous pourrions
mettre la gauche en dehors de la portée du bloc et entrer la portée extérieure de la fonction. portée lexicale est la façon
dont une étendue de fonction peut accéder à des variables depuis une étendue
externe ou parente. La fonction interne ou enfant est liée
lexiquement à la fonction parent
externe. Cela signifie qu'une fonction peut
accéder à toutes les étendues de leur, puis jusqu'à la portée globale
incluse. Jetons un
coup d'œil à un exemple. Nous allons commencer par créer une déclaration de fonction
appelée parent externe. À l'intérieur du corps
de la fonction une
variable appelée 1 est créée. vais initialiser cela avec la chaîne que j'ai été
créée avec var. Nous allons ensuite créer
une autre variable. Mais cette fois, nous allons utiliser la gauche. Nous allons initialiser cela avec la chaîne que j'ai été
créée avec la gauche. Ensuite, nous allons créer une autre
fonction appelée « enfant intérieur ». Dans le corps de cette fonction un journal de console
sera créé. À l'intérieur, il y
aura une variable, mais créera également
un autre journal de console. Cette fois, nous allons mettre la variable en dehors de cette fonction, appellerons la fonction
enfant interne. Ensuite, en dehors de la fonction parent
externe, nous appellerons la fonction
parent externe. Mettez la vidéo en pause et voyez si vous pouvez deviner ce qui sera
imprimé sur la console. Maintenant, lançons ce code. Lorsque nous exécutons ce code, les deux journaux de la console sont
imprimés sur la console. La fonction enfant interne
tente d'accéder aux variables à partir
de la portée externe incluse. Cela signifie que nous pouvons accéder
aux valeurs de ces
variables sans erreur. Nous pourrions également déplacer
les variables vers la portée globale,
ce qui fonctionnerait. Cela fonctionnerait également si nous modifions la variable déclarée à
l'aide de led pour utiliser const.
4. C'est un grillage: Dans cette vidéo, nous allons
regarder le hissage. Lorsque nous utilisons le mot hisser
en anglais, nous décrivons l'action consistant soulever ou à tirer quelque chose. On peut dire qu'un
drapeau est hissé sur un bâtiment ou sur sa voiture
hissé hors d'une rivière. hébergement en JavaScript
décrit lorsque variables et des
fonctions déclarent le nom a
été levé ou hissé en haut de leur portée locale
avant l'exécution du code. Pour être clair, aucun code n'est physiquement déplacé, mais c'est la façon
dont le
compilateur JavaScript lit le code. Commençons par
examiner un exemple de base. Par conséquent, dans notre éditeur de texte, nous allons commencer par
créer un journal de console, qui affichera
le résultat à partir d'une variable que nous
n'avons pas encore créée,
mais qui s'appellera MyDog. Dans la ligne suivante, nous allons
créer cette variable, ce
qui va utiliser var. On va dire bar, mon chien. Je vais lui attribuer
le muffin à cordes. Maintenant, lançons ce code. Nous sommes indéfinis. hébergement est la
raison pour laquelle nous n'obtenons pas d'erreur
lorsque nous exécutons ce code, le JavaScript et
tapez simplement
la déclaration et
les étapes
d'affectation de la création de la variable. La déclaration est la VAR, partie de
mon chien, et l'affectation
est la méthode égale. La partie de déclaration est hissée en haut
de l'étendue actuelle avant l'exécution du code et attribue
initialement
la valeur non définie. Cela signifie que la variable MyDog peut être utilisée
avant d'être initialisée. Mais qu'en est-il de laisser et de const ? Nous avons examiné un exemple de cas où une variable est
déclarée avec var. Voyons maintenant ce qui
se passe lorsque nous déclarons une variable avec lead ou const. Lorsque vous déclarez une variable
avec lead ou const, deux variables sont en
fait toujours hissées. Cependant, la différence
réside dans le fait que lorsque nous utilisons bar, la valeur indéfinie est attribuée à
la déclaration initialement jusqu'à ce que la ligne où l'affectation que nous avons
définie se produise. À ce moment-là, la variable
se voit attribuer la valeur nous avons assignée avec let, la variable n'est initialement
affectée aucune valeur. Si nous répétons l'exemple que
nous avons utilisé avant d'utiliser gauche, nous pouvons voir comment cela fonctionne. Essayons cela dans
notre éditeur de texte. Nous allons créer un journal de console qui affichera mon chien. Ensuite, en utilisant la gauche, nous allons créer la variable MyDog et lui attribuer
le muffin à cordes. Maintenant, lançons ça. Nous obtenons une erreur de
référence non détectée. Cette fois, lorsque le code
exécute
la déclaration, la partie qui indique laisser mon chien est hissée au sommet de
la portée par le compilateur. Mais la variable est
initialement non initialisée. Contrairement à la barre, quand il a été initialisé
avec indéfini. Lorsque le code est exécuté,
le code s'exécute, le journal de la console
se produit avant
que nous ayons attribué
une valeur à la variable. Nous obtenons l'
erreur de référence ci-dessus. Dissuader les variables avec
const fonctionne de la même manière. La raison derrière
cette situation est appelée zone morte
temporelle. La zone morte temporelle décrit un état temporairement inactif dans lequel les variables
ne peuvent pas être utilisées. Cela se produit parce que JavaScript compile le code avant
d'exécuter le code. Si vous êtes à la caisse d'un
supermarché, vous êtes admis entre avoir compilé
vos produits d'épicerie, que vous avez probablement de
l'espace prêt à accueillir à la maison. Cependant, vous ne les possédez pas encore
physiquement, donc vous ne pouvez pas les utiliser
tant que vous n'avez pas terminé la phase de paiement
au supermarché. Finissons par quelques exemples.
5. pour ... et pour ...: Avant ESX, si nous voulions
parcourir certaines données, comme un tableau, nous pouvions utiliser une boucle for. C'est toujours une bonne option
pour nous, mais depuis ES6, nous avons des
choix supplémentaires lorsque nous
parcourons tout ce
qui est itérable. conséquent, les chaînes sont des tableaux, par
exemple, nous pouvons
utiliser une boucle for of. Cela évite de
devoir utiliser des indices pour incrémenter l'utilisation des
variables comme compteur. Lorsque nous utilisons quatre de la variable elle-même,
on pionne l'élément, pas l'index.
Jetons un coup d'œil. Déclarez une variable
appelée boissons. Attribuera à cela un tableau. À l'intérieur du tableau,
nous ajouterons les chaînes. Cola, thé, portier et soda. Maintenant, utilisez une boucle for pour imprimer chaque
élément du tableau. Nous utilisons le mot-clé pour et
à l'intérieur des parenthèses, nous créons une variable appelée i. Nous disons que je
consomme moins que la longueur du point. Ensuite, nous incrémentons i. À l'intérieur du corps de la boucle, nous consolons les boissons de journal de l'
IA à l'aide de crochets. Sauvegardons cela
et lançons le code. Toutes nos boissons sont
imprimées sur la console. Revenons à notre code, commenterons notre boucle for. Nous allons maintenant l'implémenter
à nouveau en utilisant une boucle for of. Nous utilisons donc le mot-clé pour et
un ensemble de parenthèses à
l'intérieur des parenthèses
dira que je ne peux pas boire de boissons. À l'intérieur de la boucle. Nous disons journal de console, buvez. Sauvegardons cela
et lançons le code. Nous faisons toujours
imprimer chaque boisson sur la console car les boucles ne fonctionneront si vous souhaitez
parcourir un objet. Si vous vouliez le faire, vous devriez utiliser pour n, Changeons notre
tableau de boissons pour qu'il s'agisse d'un objet. Nous allons ajouter les boissons. Je vais également
fixer des prix. Maintenant, utilisons-nous pour
n. Nous en disons quatre. Ensuite, entre parenthèses,
const, buvez, dans les boissons. À l'intérieur de
la console duplex. Nous sauvegarderons cela
et exécuterons le code. La clé est imprimée
sur la console. Si nous voulions imprimer la
valeur de chaque propriété, nous pouvons utiliser des crochets
dans le corps de la boucle. Cette fois, nous disons boissons, qui est le nom de l'
objet, crochets, boisson. Sauvegardons cela
et lançons le code. Nous obtenons la valeur de
chaque clé renvoyée
comme note de côté lors de la
chute et de la chute en boucles. Grâce à ESX, nous pouvons utiliser const pour la
variable de la boucle. En effet, chaque
fois que la boucle est itérée, une nouvelle portée est créée, ce qui signifie que nous pouvons utiliser des pistes
ou du contenu dans ces boucles. Et la constante est agréable
car nous ne modifions
généralement pas la
valeur de l'itérable. Cela ne fonctionnera pas dans une boucle
standard.
6. Présentation de modèles littéraux: Bienvenue de retour. Dans cette vidéo, nous allons voir
quels sont les littéraux de gabarits en JavaScript,
quels
sont nos littéraux de modèles. Eh bien, dans la
version ES6 de JavaScript, des littéraux de
gabarit ont été
introduits avant ES6. Si nous avions une variable que nous voulions utiliser
dans nos chaînes, nous devrions
utiliser la concaténation. Jetons un coup d'œil à cela. Nous allons créer une
déclaration de fonction qui pourrait imprimer une boisson. À l'intérieur de la
fonction utilisant var, nous allons créer une
variable appelée drink. Nous allons attribuer à
cela la chaîne t. Revenons
maintenant une chaîne
de notre fonction. Nous dirons que ma boisson
préférée est. Utilisez ensuite l'
opérateur de concaténation pour ajouter un espace. Ensuite, utilisez à
nouveau l'opérateur
de concaténation pour ajouter la variable
boisson. Appelons la fonction Print
Drink à l'intérieur d'un journal de console pour enregistrer cela
et nous allons exécuter le code. Nous recevons ma boisson préférée est
T imprimée sur la console. Cela fonctionne donc. Mais les littéraux de modèle
offrent un moyen propre d' interpeller ou d'
injecter les variables ou expressions dans la chaîne, au lieu de devoir
effectuer la concaténation. Un littéral de modèle
est inclus dans les baptistes au lieu
des guillemets doubles ou
simples habituels. L'interpolation de chaînes
décrit quand des variables sont injectées
dans une chaîne. La variable que vous souhaitez interpeller est enveloppée
dans des accolades bouclées, puis commence par un signe dollar. La variable elle-même est placée
à l'intérieur des accolades. Examinons l'exemple précédent, mais cette fois, en utilisant
un littéral de modèle, cela va changer notre
variable pour utiliser la gauche. Bien que cela
fonctionnerait avec le bar. Maintenant, changeons notre chaîne. Supprimera tout
après la première chaîne, changera ensuite
la chaîne pour utiliser coches
arrière afin qu'il s'agisse d'
un littéral de modèle. Maintenant, interpellons
dans la variable boisson. Nous utilisons le signe du dollar et
un ensemble d'accolades bouclées. À l'intérieur des accolades, nous ajoutons le nom de la variable
que nous voulons injecter. Sauvegardons cela
et lançons le code. Lorsque la fonction est appelée, nous obtenons la même valeur de retour. Mais notre code est beaucoup plus propre.
7. Plus de modèles littéraux: Une autre caractéristique utile des littéraux de gabarit est que nous pouvons couvrir l'autrichien sur
plusieurs lignes. Avant ES6, vous devez utiliser concaténation de chaîne
ou un caractère de saut de ligne
pour atteindre cet objectif. Voyons un exemple rapide. Je dirigerais notre code. Ensuite, l'utilisation de var ajoutera une
variable appelée notre chaîne. Attribuer à cette chaîne
dira première ligne. Ensuite, nous ajouterons le nouveau
caractère de ligne. Deuxième ligne. Le nouveau caractère de ligne, troisième ligne, le caractère de
saut de ligne. Ajoutons maintenant un journal de console
pour la variable progéniture. Nous allons enregistrer cela et
nous allons exécuter le code. Nous voyons chaque partie de la chaîne imprimée sur plusieurs lignes. Nous avons des littéraux gabarits. Nous n'avons plus à nous
inquiéter à ce sujet. Si nous voulions créer
une chaîne multiligne, nous pouvons le faire en insérant
la chaîne et coches
arrière et en
séparant les lignes, mettons à jour notre code. Nous allons commencer par supprimer tous les caractères
de saut de ligne. Nous mettrons à jour notre
variable pour l'utiliser. Ensuite, nous allons envelopper la
ficelle dans des backticks. Sauvegardons cela et
nous allons exécuter le code. Rien n'a changé. Nous obtenons le même résultat. Mais encore une fois, je vais coder
est beaucoup plus propre.
8. Fonctions de flèche: Dans cette vidéo, nous
allons examiner les fonctions et
paramètres des
flèches en JavaScript. Tout d'abord, prenons du
recul et discutons des expressions
fonctionnelles. Qu'est-ce qu'une expression de fonction ? Eh bien, une
expression de fonction décrit quand une fonction est stockée
dans une variable. Nous pouvons déclarer une expression de
fonction nommée dont la fonction porte un nom. Mais généralement, une
expression de fonction n'a pas de nom. Nous appelons cela une fonction
anonyme. Les fonctions anonymes sont particulièrement utiles lorsque notre principale utilisation de la fonction consiste à
transmettre la fonction en tant qu'argument à une
autre fonction. La raison pour
laquelle cela est possible est que les fonctions sont
des objets en JavaScript. Lorsque vous appelez ou appelez
une expression de fonction, vous utilisez le nom
de la variable, non le nom de la fonction. Lorsque vous utilisez une expression de
fonction, l'interpréteur JavaScript ne
fera rien avec la fonction tant qu'il la ligne où la
fonction est initialisée. Examinons un exemple d'expressions
de fonctions. Nous allons créer
une fonction qui
prendra le nom d'un
jeu sous forme de chaîne. Et à l'aide d'un littéral de modèle, il imprimera
le nom du jeu à l'écran. Mais commençons par créer la variable pour
contenir la fonction, que nous appellerons
mon jeu préféré. Ensuite, nous utilisons le signe égal. Le mot-clé fonction
définira le paramètre comme jeu. Dans le corps de la fonction, nous voulons renvoyer un littéral de
modèle, ce que nous allons juste dire. Mon jeu préféré est. Ensuite, nous
interpolerons le jeu. Appelle la fonction
dans le journal de la console. Et nous allons passer le
monopole de chaîne comme argument. Disons cela
et donnons un coup de main. Lorsque nous exécutons la fonction, nous imprimons notre chaîne
à l'écran avec le monopole du jeu
que nous avons transmis comme
argument dans lequel les fonctions de
flèche correspondent. Es6 a introduit la syntaxe de la fonction
flèche, ce qui signifie que nous pouvons omettre
la fonction de mot-clé. Revenons à notre code
et mis à jour en supprimant le mot-clé fonction ajoutera
la syntaxe de la fonction flèche. Nous recevons toujours la même
chaîne de caractères. Si nous n'avons besoin que de renvoyer
une valeur de la fonction, nous pouvons le simplifier
davantage et omettre les accolades et
le mot clé renvoyé. Nous n'utilisons qu'une
seule ligne de déclaration. C'est ce qu'on appelle une fonction de flèche à
ligne unique. Revenons à notre
code et mettons à jour cela. Il devient donc une fonction de flèche à
ligne unique. Nous allons enregistrer cela
et exécuter le code. Nous obtenons toujours la
même valeur de retour.
9. Propriété objet shorthand: Dans cette vidéo,
nous allons
examiner le raccourci des propriétés d'objet. Imaginons que nous
écrivions un programme qui nous
oblige à modéliser
des données sur certains vêtements. Pour ce faire, nous pouvons
utiliser un objet. Voyons comment résoudre
ce problème si nous le
faisions avant ES6, nous commencerons par créer
une déclaration de fonction, que nous appellerons
créer une garde-robe. L'intérieur de la
fonction créera quatre variables à l'aide de var. Et ils auront les
vêtements et le nombre de ces articles
que nous avons dans notre garde-robe. Commençons par créer
une variable appelée hat. Nous allons définir cela comme égal à un. Créons une autre
variable appelée « shots ». Nous allons fixer cette valeur à cinq. Nous allons créer une
variable pour le sauteur. Nous allons fixer cette valeur à huit. Enfin, nous allons créer
une variable pour les chaussettes, et nous allons définir
cette variable sur deux. Ensuite, nous allons créer
un objet littéral, que nous appellerons ma garde-robe. Il aura les mêmes clés
que les variables ci-dessus. Et définissez chaque valeur
sur les variables ci-dessus. Va mettre le chapeau à un chapeau, un short. Pour se présenter. Pull, pull, chaussettes. chaussettes. Retourne ensuite l'objet. Console consigne la valeur
de retour de l'exécution de l'eau de
création et la fonction exécute ce code. Nous obtenons chaque élément avec les valeurs que nous avons définies dans les variables
items. Lors de la création d'ES6, raccourci des propriétés d'
objet
a été introduit. raccourci de la propriété Object nous
permet de simplement transmettre le nom de la clé
plutôt que de répéter
le nom et la clé. Rien n'a changé dans la façon dont le code fonctionne sous le capot. Mais le raccourci
nous aide à écrire moins de code. C'est ce qu'on appelle
le sucre syntaxique. Prenons la fonction de création de
garde-robe et regardons à nouveau. Mais cette fois, nous utiliserons le raccourci de propriété d'
objet. Nous allons commencer par changer
la fonction pour qu'elle
devienne une expression de fonction ES6. mettrons ensuite à jour nos
variables pour les utiliser. Ensuite, nous allons mettre à jour notre littéral
d'objet pour l'utiliser à gauche. Nous pouvons également supprimer les paires clé-valeur et simplement
transmettre les noms de variables. Relançons ce code. La sortie du journal de la
console est la même, mais le code lui-même
est beaucoup plus simple.
10. Objets de congélation: Bonjour. Dans cette vidéo, nous allons
regarder le gel des objets. Es6 a introduit let et const
pour la déclaration de variables. Lorsque vous déclarez une
variable à l'aide de const, vous ne pouvez pas
réaffecter la variable. Jetons un coup d'
œil à un exemple de cela dans la console. Nous allons créer une
variable à l'aide de const. Nous appellerons cela une valeur. Nous allons initialiser cela
avec la valeur 1. Ensuite, nous allons essayer de modifier
cette valeur par la valeur deux. Nous obtenons une erreur de type non interceptée fonction de l'affectation
à une variable constante. Voyons un autre exemple. Cette fois dans notre éditeur de texte. Nous allons utiliser un
littéral d'objet pour créer un
objet à l'aide de CONST, et nous appellerons cela, notre objet, créera une propriété
appelée animal. Un. Cela donnera la valeur, le chat à cordes créera une deuxième propriété appelée animal pour lui donner le chien à cordes. Enfin, nous allons créer une troisième propriété
appelée Animal trois, qui donnera la valeur à
la forme des chaînes. Plus tard. Nous allons essayer
d'utiliser le signe égal pour réaffecter l'objet
en tant qu'objet vide. Lançons ce code. Une fois encore. Nous obtenons une erreur de type
non détectée. Essayons de comprendre pourquoi nous obtenons cette erreur plus profondément. Lorsque nous utilisons le terme mutable, nous décrivons quelque chose
qui peut être modifié. Objets en JavaScript
qui sont affectés à une variable à l'aide de
const a mutable. Cela inclut les objets,
les tableaux et les fonctions. Il est important de le comprendre
car l'utilisation const empêche uniquement
la réaffectation du nom de
la variable, de l'identificateur des variables, non de l'objet lui-même. Si nous voulions changer la
propriété de l'animal en une vache, nous pouvons procéder comme suit. Nous utiliserions le nom de l'objet, qui est notre objet. La clé de la propriété que
nous voulons changer, c'
est-à-dire animal. Ensuite, en utilisant le signe égal, nous définissons cette valeur égale
à la vache à cordes. Lançons ça. Nous faisons
imprimer l'objet R sur notre console et l'objet animal a été
remplacé par une vache. Soyez clair, cela ne
fonctionnerait pas avec l'un des types de données
primitifs, tels que les chaînes, car
les chaînes sont immuables. Jetons un coup d'
œil à cela dans la console. Nous allons créer une variable à l'aide CONST et l'appellerons notre chaîne. Nous allons initialiser cela
avec la chaîne Hi. Maintenant, nous allons
essayer de changer le deuxième élément de la
chaîne pour qu'il s'agisse de la lettre O. Nous allons
donc dire notre chaîne
, puis les crochets
avec l'index. Console consigne notre chaîne. Rien n'a changé et
la corde est toujours haute. Pour résumer, vous pouvez modifier ou muter
l'objet lui-même, mais vous ne pouvez pas
modifier le nom ou l'identificateur de la variable dans laquelle l'objet est stocké. C'est comme dire que vous pouvez modifier la
déclaration de votre maison, mais vous ne pouvez pas
modifier son adresse. Dans la vidéo suivante, nous allons voir comment arrêter de muter des objets.
11. Plus sur les objets de congélation: Bienvenue de retour. Comment
arrêter la mutation d'objets ? Nous avons pétrifié que vous ne pouvez pas
simplement empêcher les données d'un objet d'être mutées
simplement en utilisant const. Vous pouvez cependant utiliser
une méthode fournie par le gel du code JavaScript. Cette méthode fait partie de
l' objet
intégré standard de l'objet. Une fois que vous aurez utilisé cette méthode, vous ne pourrez pas
modifier l'objet. Et si vous exécutez votre
code en mode strict, une flèche sera lancée. La valeur renvoyée de la
méthode sera objet, qui a été
transmise à la fonction. La syntaxe
est la suivante. Phrase de points d'objet, parenthèses, puis le nom de votre objet. Essayons de l'utiliser avec l'objet d'art créé
dans la dernière vidéo. Une fois le littéral d'objet
créé, nous utiliserons la méthode de gel des
points d'objet et nous transmettrons l'objet. Sauvons ça et lançons ça. Nous recevons l'objet R qui nous
est renvoyé. Mais maintenant, essayons de changer la propriété de l'animal
pour qu'elle soit de nouveau une vache, comme nous l'avons fait
dans la dernière vidéo. Nous allons enregistrer cela et réessayer
d'exécuter le code. Rien n'a changé et l'objet
d'origine est renvoyé.
12. Déstructurer des tableaux: Le but de cette vidéo
est d'introduire un raid, la structuration et le JavaScript. Imaginez que vous visitiez un supermarché, que vous cueillez des articles et
que vous les emballez dans des sacs. Lorsque vous rentrez chez vous, un par un, vous déballez ces objets
et vous les rangez. Lorsque nous écrivons du code, nous pouvons utiliser la structuration
comme moyen de décompresser, sélectionner certains éléments des structures
de données, tels que les objets et les tableaux. Ensuite, nous pouvons placer
ces éléments dans leurs propres variables indépendantes. Avant ES6, si nous voulions choisir certains éléments d'une structure
de données, comme un tableau, nous
devons utiliser l'index de l'élément, puis l'
enregistrer dans une variable. Voyons comment nous
aborderions cela. Nous allons commencer par déclarer
une variable appelée Days et affectée
à ce tableau et à ce tableau. Ce tableau remplacera les sept jours de
la semaine en tant que chaînes. Ensuite, nous allons déclarer
trois variables. Premièrement, deuxièmement. Troisième. Nous voulons obtenir
les premiers deuxième, troisième éléments du Deseret. À l'intérieur du premier, en utilisant la notation entre
crochets, nous obtiendrons
le premier élément, l'élément à l'index 0. Le second recevra
le deuxième élément. C'est à l'index d'un. Le troisième obtiendra
le troisième élément, l'élément de l'index de deux. Ajoutons maintenant les journaux de console
pour la première seconde, troisième variable, et nous
allons procéder à cette opération. Nous obtenons les trois premiers
éléments du tableau de la journée, l'
imprimons sur notre écran. Bien que cette approche fonctionne, il existe un
moyen beaucoup plus simple de résoudre ce problème. Et cela utilise une structuration
radio. En utilisant la structuration,
nous pouvons choisir
les éléments requis
en une seule ligne de code. Pour ce faire, nous créons un tableau. Et à l'intérieur du tableau, nous avons placé les noms auxquels
nous souhaitons appeler les variables pour les
éléments à attribuer. Ensuite, nous utilisons l'
opérateur égal et le
définissons sur le nom du tableau dans lequel vous souhaitez sélectionner
les éléments. Les variables du tableau
seront définies sur la valeur
équivalente de l'élément dans le tableau initial fonction de la position
de cet élément. Jetons un coup d'œil à
l'exemple original, mais cette fois, en utilisant
la structuration, nous avons encore nos jours d'avance. Mais maintenant, en utilisant la structuration, nous allons créer un
tableau à l'aide de const. Nous allons définir cette valeur égale
au tableau du jour. À l'intérieur du tableau, nous ajouterons les
variables en premier,
deuxièmement , en troisième lieu, ce sont les noms des variables auxquelles
nous souhaitons attribuer
nos éléments. Lançons à nouveau ce code. Nous obtenons la même valeur de retour. Il y a quelques caractéristiques
supplémentaires d' une structure radio qui
mérite d'être comprise. La structuration
permet également de sauter un index et l'élément à l'
aide d'une virgule. Si nous voulions
choisir le premier, deuxième, le quatrième élément
du tableau du jour. Nous utiliserions cette approche. Revenons à notre
exemple et essayons ceci. Ajoute une virgule là où se trouvait
notre troisième élément, puis ajoute une variable
pour le quatrième élément. Ajoutons également un
journal de console pour cette variable. Relançons ça. Maintenant, comme vous pouvez le voir,
nous sommes imprimés jeudi à l'écran pour
le quatrième élément. Une autre chose que nous pouvons faire avec une structuration de rayon consiste à utiliser l'opérateur rest pour collecter les valeurs restantes
du tableau initial
en une seule variable. Allons y aller. Nous supprimerons tout d'abord
, sauf la variable. Et maintenant, utilisez l'
opérateur rest pour collecter tout le reste dans une variable
appelée jours restants. Mettez également à jour nos journaux de console. Ensuite, nous allons exécuter ce code. Cette fois, lundi
est le premier élément. La
variable jours restante contient désormais tout le reste du
tableau, sauf lundi.
13. destructuring des objets: Bienvenue de retour. Nous allons introduire la structuration des
objets. Commençons par
répondre à la question. Quelle est la structuration ? Imaginez que vous
visitiez un supermarché, vous choisissez des articles
et des sacs Pac-Men. Lorsque vous rentrez chez vous un par un, vous déballez ces articles
et vous les rangez. Lorsque nous écrivons du code, nous pouvons utiliser la structuration
comme moyen de décompresser ou sélectionner certains éléments ou
éléments de structures de données, tels que des objets et des tableaux. Ensuite, nous pouvons placer
ces valeurs dans leurs propres variables indépendantes lorsque nous utilisons ces
structures avec des objets, le nom des variables
auxquelles les valeurs d'objet sont affectées est basé sur le nom de la propriété objet
par opposition à l'index
de l'élément. Lorsque nous effectuons une structuration prête, lorsque nous perturbons que vous soyez un tableau, nous utilisons des crochets. Mais lorsque nous
structurons un objet, nous utilisons des accolades bouclées. Commençons par un exemple
très basique. Nous allons créer une
variable à l'aide de const, que nous appellerons l'objet R. Il s'agira d'un
littéral d'objet à
l'intérieur de l'objet qui aura
deux propriétés. Le premier, nous utiliserons la clé, et elle aura la valeur 1. la seconde, nous utiliserons la clé, et nous aurons la valeur deux. Maintenant, nous pouvons utiliser la
structuration va dire const, puis utiliser des accolades bouclées. Et nous allons définir cette
valeur égale à l'objet. À l'intérieur des
accolades bouclées ajouteront 12. Maintenant, consolons le journal 12. Nous allons enregistrer cela et
nous allons exécuter le code. Nous obtenons les valeurs des 12
propriétés de notre objet. Lorsque vous sélectionnez les
propriétés de l'objet que vous souhaitez sélectionner, la commande n'a pas d'importance. Si le nom de la propriété
se trouve dans l'objet
, une variable portant
cette valeur sera stockée en mémoire
avec le même nom. Jetons un coup d'œil à un exemple
plus concret. Nous allons commencer par créer une
nouvelle variable à l'aide de const. Nous appellerons ce chat, créera un autre
objet littéral. Nous allons définir une propriété name
et obtenir cette valeur de chaîne. Molly va alors définir une propriété propriétaire et
obtenir mal cette chaîne. Vous êtes Fred qui bloque. Ensuite, nous allons définir la couleur, donnera à cela la ficelle brune. Nous allons définir une propriété d'âge
et lui donner la valeur dix. Enfin, nous allons créer
une propriété chatons, lui
donnerons la valeur 0. Ensuite, nous pouvons utiliser une
structure D pour obtenir le
nom et le propriétaire. Nous allons donc commencer par utiliser
un ensemble d'accolades bouclées. Et nous allons définir cela comme
égal à notre
objet, appelé chat. À l'intérieur des accolades bouclées
placeront les noms des propriétés. Ajoutons des
journaux de console pour ces derniers. Nous allons dire console.log,
name, console.log. Sauvons ça. Et nous allons exécuter le code. Nous obtenons le Mali pour le nom
imprimé à l'écran, et Fred bloque pour le
propriétaire imprimé à l'écran. Dans la vidéo suivante, nous allons regarder cela un peu plus.
14. Plus de destructeurs d'objets: Bienvenue de retour. Que se passe-t-il avec les propriétés
non définies ? Eh bien, si vous essayez de
sélectionner une propriété qui n'existe pas dans
l'objet d'origine, une variable sera
créée avec ce nom, mais la valeur de la
variable ne sera pas définie. Il n'y aura pas
d'erreur générée moins étendre notre dernier
exemple pour montrer cela. Supprimerait le nom et le
propriétaire du destructeur. Pendant ce temps,
nous ajouterons des pieds. Feet n'est pas une propriété
de l'objet chat. Mais essayons de consoler le journal. Ceci. Je sauverai ça. Et nous allons y aller. Nous sommes imprimés à l'écran
sans définition. Il n'y a pas de propriété feet
dans l'objet chat, n'y a
donc aucune valeur à
attribuer à la variable. Examinons maintenant le
changement de nom des propriétés. Si vous souhaitez nommer les
variables, quelque chose de
différent de celui de la
propriété dans l'objet. Vous devez définir ce paramètre
lorsque vous structurez la propriété à partir de l'objet. Pour ce faire, vous utilisez le nom de la propriété
que vous souhaitez choisir parmi
les deux-points de l'objet et
le nom de la
variable dans laquelle vous
souhaitez stocker cette valeur. Voyons un exemple qui laisserait les pieds de
la structuration. Cette fois, nous allons
essayer d'accéder aux chatons, mais nous allons
le renommer en enfants. On dira des chatons, des enfants
du côlon. Ajoutons maintenant un
journal de console pour enfants. sauverai ça et on va y aller. Nous recevons 0 imprimé à l'écran, ce qui correspond à la valeur
de la
propriété chatons à l'intérieur de l'objet chat. Tout comme lorsque nous effectuons
une structuration de rayon, nous pouvons utiliser l'
opérateur reste pour collecter tout ce qui reste
dans une nouvelle variable. Examinons notre dernier
exemple pour rassembler toutes les
propriétés restantes dans une variable appelée enfants
civils restants. Mais parlez-en à l'aide
de l'opérateur de repos. Ajoute une variable
appelée restante. Ajoute ensuite un journal de console pour la variable restante. Sauvons ça. Et nous allons exécuter le code. Nous voyons 0 pour les
enfants retournés. Après cela, nous voyons toutes les autres propriétés et
valeurs de l'objet chat, l'exception de la propriété chatons
imprimée sur notre écran.
15. destructuring d'objets imbriqués: Dans cette vidéo,
nous allons
regarder le destructeur d'objets imbriqués. Dans la dernière vidéo, nous avons examiné le destructeur d'objets
et nous pouvons également utiliser la structuration lorsque
nous travaillons avec structures de données
imbriquées
telles que des objets imbriqués. Commençons par
examiner la structuration d'un objet imbriqué qui est
entouré d'un tableau. Nous allons créer une
collection de chats, déclarerons une variable appelée chats et affectée à ce tableau. Ensuite, nous allons créer un objet. À l'intérieur de cet objet,
le nom sera défini sur la chaîne Molly, la chaîne Fred chance en couleur. La chaîne brune, la valeur dix, et chatons les valeurs 0. Nous allons ensuite créer
un deuxième objet. À l'intérieur de cet objet. Définissez le nom, l'
ampoule sur Sally, la
couleur sur le noir et les chatons sur 0. Créons un autre objet. Cette fois, nous allons
définir le nom sur Poppy, phono, sur Alice Green. couleur. Taraudage. Trois chatons.
16. Plus de destructeurs d'objets imbriqués: Si nous voulions choisir
le nom du chat dans le deuxième
objet, c'est-à-dire Bob. Nous pouvons utiliser la structuration
pour atteindre cet objectif, étant donné que l'objet est
stocké dans un tableau, nous commençons par les
crochets que le tableau utilise. Nous définissons cela comme égal au nom de la structure
de données à partir de laquelle nous essayons de choisir
les propriétés. Nous voulons accéder
au deuxième objet. Ainsi, comme lorsque nous
structurons des tableaux plats, nous pouvons utiliser une virgule
pour ignorer un élément. Nous utilisons ensuite des accolades bouclées
parce que nous voulons entrer dans
l' objet et nous
utilisons
le nom de la propriété que nous voulons
choisir dans l'objet, tout comme lorsque nous détruisons des
valeurs d'un objet. Allons y aller. Nous utilisons donc const puis
un ensemble de crochets. Nous définissons cela comme égal au nom de notre objet imbriqué,
qui est le chat. À l'intérieur des crochets. Nous commençons par utiliser une virgule. Nous le faisons parce que nous voulons
passer au deuxième objet. Ensuite, nous ajoutons un ensemble
d'accolades bouclées. À l'intérieur des accolades, nous utilisons le nom de la propriété que
nous voulons, qui est nom. Ajoutons maintenant un journal de
console pour le nom. Nous allons sauver ça. Et nous allons exécuter le code. Bob renvoie Bob, qui est la valeur de la propriété name
du deuxième objet. Ainsi, tout comme pour la structuration de l'
objet, nous pouvons également donner à la variable un nom différent du nom de
la propriété. Mettons à jour notre code
pour y parvenir. Et nous utiliserons le nom du chat, le nom, le deux-points d'
échelle après le nom, puis nous ajouterons le nom du chat. Changeons également notre journal de
console en nom de chat. Nous allons enregistrer cela et
nous allons exécuter le code. Bob revient toujours. Si nous travaillions
avec un objet imbriqué entouré d'un objet, nous n'utiliserions pas de crochets lors de
la structuration D. Nous
utiliserions plutôt des accolades et le nom de l'objet dans lequel nous
voulons choisir l'élément, suivi du nom de la
propriété que nous voulons choisir. Mettons à jour notre structure de données, supprimerons les crochets, les
remplacerons par
des accolades. Ajoute également un
avant le premier objet avant le deuxième objet et trois avant
le troisième objet. Maintenant, dans notre restructuration changerions également les
crochets en accolades, car nous travaillons maintenant avec
des objets et des objets. Nous ajoutons ensuite la
clé de l'objet, qui dans notre cas est deux, suivie d'un deux-points. Enregistrez ceci et exécutez le code. Bob revient toujours. Il s'agit du nom de la
propriété dans le deuxième objet.
17. Déstructuration des paramètres de fonction: Bonjour. Dans cette vidéo, nous
allons examiner les
paramètres de la fonction structurante et JavaScript. Ces structures peuvent être utilisées entre parenthèses de la définition de
la fonction, là où vous placez les paramètres. Vous effectuez cette opération afin de sélectionner les valeurs des arguments
transmis à une fonction. Cela est très utile lorsque
vous souhaitez uniquement utiliser certaines propriétés d'un
objet au sein de la fonction. Cela ne fait aucune différence type de fonction que vous utilisez. Mais nous allons jeter un
coup d'œil à un exemple qui utilise une fonction flèche. Donc deux d structurent un objet à l'intérieur des paramètres de fonctions. Nous plaçons un ensemble d'accolades à l'intérieur des parenthèses
de la fonction. À l'intérieur des accolades bouclées, remplacez les propriétés de
l'objet que nous souhaitons choisir. Nous allons commencer par déclarer
une variable en utilisant const, que nous appellerons boissons, va attribuer à cela
un littéral d'objet. À l'intérieur de cet objet va créer
une propriété appelée cola. Prends ça. La valeur deux. Ajoutera de la limonade avec
la valeur 1, le lait. La valeur trois. T. Avec la valeur deux. Café de valeur deux, et vin d'une valeur huit. Ensuite, nous allons créer
une fonction flèche. Nous appellerons le prix des boissons
chaudes. Le corps de la fonction
retournera le total de l'
ajout de thé et
de café à partir des boissons. Objet. Pour choisir les propriétés du thé
et du café, nous utilisons les accolades frisées dans
les paramètres de la fonction, puis nous choisissons les propriétés du
thé et du café. Appelons maintenant la fonction. Nous allons passer l'objet de
boissons entier comme argument. Sauvons ça. Déplacez-vous dans le code. Nous en recevons quatre parce que
T avait la valeur deux, et le café
avait également la valeur deux. Ainsi, en les ajoutant ensemble, nous obtenons pour la prochaine vidéo, nous allons examiner la structuration
d'un tableau
à l'intérieur des paramètres des
fonctions.
18. Plus de paramètres de fonction destructeur: Bienvenue de retour. Alors que
la structuration à l'intérieur des fonctions, les paramètres sont le plus
couramment utilisés avec des objets, mais peuvent également utiliser la même approche lorsque nous
transmettons un tableau à une fonction. La seule différence est que dans les
parenthèses de la fonction, nous enfermons les éléments que
nous voulons choisir dans un tableau.
L'ordre compte ici. Tout comme lorsque nous effectuons une structuration prête en dehors
des paramètres de la fonction. Si nous voulons ignorer un élément, nous pouvons utiliser une virgule. Voyons un exemple. Nous allons commencer par déclarer
une variable appelée noms. Attribué à ce tableau. À l'intérieur de la baie. Nous ajouterons les cordes, Frank, Ben ,
Tony et Pete. Créons maintenant
une fonction flèche, que nous
appellerons le nom d'impression. Cette fonction renvoie
un littéral de modèle avec le deuxième troisième nom
du tableau Names. À l'intérieur des
parenthèses de la fonction. Nous avons arrêté d'utiliser
une virgule car nous voulons passer au
deuxième élément du tableau. Ensuite, nous déclarons
les variables du deuxième troisième
élément à stocker. Appelons maintenant la fonction de nom
d'impression. Nous transmettrons l'ensemble du tableau de
noms comme argument. Sauvegardons cela et
nous allons exécuter le code. Luke et Ben reviennent. Les deuxième et troisième noms
du tableau de noms.
19. Paramètres par défaut: Bienvenue de retour. Dans cette vidéo, nous allons
introduire les paramètres par défaut. Si nous définissons une fonction qui nous
oblige à utiliser
certains paramètres, lorsque nous invoquons ou
appelons la fonction, nous devons transmettre
les valeurs des paramètres sous forme d'arguments. Jetons donc un coup d'
œil à un exemple de base. Nous allons créer une
déclaration de fonction appelée mon nom. La fonction
prend deux paramètres, FirstName et LastName. À l'intérieur du corps de la fonction, un littéral de modèle sera
renvoyé. Nous devons utiliser les coches arrière, interpeller les paramètres FirstName,
LastName. Appelons maintenant la fonction. Nous transmettrons deux arguments, la chaîne Bob pour le paramètre FirstName et la chaîne du paramètre
nom de famille. Sauvegardons cela
et lançons le code. Bob MF revient. Cela fonctionne très bien, mais
que se passe-t-il si nous oublions de
transmettre l'un des arguments ?
Regardons un autre coup d'œil. Nous allons supprimer le deuxième argument de l'appel de fonction. Nous allons enregistrer cela,
réexécuterons le code. Cette fois, Bob
indéfini est renvoyé. Nous ne transmettons pas un deuxième
argument à l'appel de fonction. Lorsque la fonction s'exécute non définie, elle est renvoyée
pour le deuxième paramètre. Si nous faisions des calculs
mathématiques, cela causerait des
problèmes plus importants, car nous ne pouvons pas utiliser non défini pour
effectuer un calcul. Par conséquent, nous obtiendrions NaN
pas un numéro renvoyé. Voyons voir, c'est en action. Nous supprimerons notre code. Nous allons créer une nouvelle fonction, que nous
appellerons Awesome. Cela prendra deux
paramètres, tau1 et tau2. À l'intérieur de la fonction
retournera le total de addition par
un et deux. Lançons la fonction. Mais ce qui ne transmet qu'
un seul argument pour pow1, nous transmettrons la valeur 1. Sauvegardons cela et
nous allons exécuter le code. Nous ne recevons pas de numéro renvoyé. Javascript ne peut pas ajouter de valeur
non définie à un nombre, c'est
pourquoi cela se produit. Comment pouvons-nous
nous protéger contre cela ? Avant ES6, nous pouvions définir nous-mêmes des paramètres par défaut
pour les fonctions. Si nous utilisons à nouveau l'
exemple génial, nous pouvons voir comment cela fonctionne. À l'intérieur de la fonction géniale
va créer une déclaration if. Utilisera le type d'opérateur pour vérifier l'égalité stricte. Indique si le
paramètre Baotou est égal à non défini. convient de noter ici que le type d'opérateur
renvoie une chaîne, c'est
pourquoi, en utilisant une égalité
stricte, nous devons vérifier si la chaîne pas définie plutôt
que non définie. S'il est égal à non défini, nous allons définir le fichier
sur la valeur trois. Sauvegardons cela et
nous allons exécuter le code. Lorsque nous exécutons la fonction,
nous en recevons quatre. Nous ne passons que l'
argument pour val1. Val2 est défini sur la valeur
par défaut de trois. Le total est égal à quatre. Nous comprenons maintenant
pourquoi, dans la vidéo suivante, nous allons
passer à la façon d'utiliser les paramètres par défaut ES6.
20. Autres paramètres par défaut: Bienvenue de retour. Par conséquent, depuis CS6, nous avons pu
utiliser des paramètres par défaut, il suffit de définir la valeur
par défaut du paramètre. Lorsque nous définissons le paramètre entre parenthèses
de la fonction, si la valeur est transmise
pour ce paramètre, lorsque la fonction est appelée
, la
valeur par défaut ne sera pas utilisée. Mais si aucun argument pour
ce paramètre n'est transmis , la
valeur par défaut sera utilisée. Test jetez un coup d'œil
au dernier exemple, mais cette fois, nous
utiliserons des paramètres par défaut utilisant le même code que
l'exemple précédent. Nous allons définir
le paramètre val2 pour qu'il utilise une valeur par défaut de trois. Nous pouvons ensuite supprimer
l'instruction if du dernier exemple. Sauvegardons cela
et lançons le code. On en a encore quatre. Nous ne passons pas d'argument
pour le paramètre Baotou. La valeur par défaut de trois est donc utilisée et le
retour total est quatre. Essayons encore une fois. Mais cette fois, nous allons passer un argument pour le paramètre
Baotou. Nous allons passer en cinq. Sauvegardons cela et
nous allons exécuter le code. Nous en avons six, c'est la valeur de retour. Comme nous ne transmettons aucun
argument pour les deux paramètres, nous n'avons pas besoin de revenir aux des paramètres par défaut car
les valeurs des arguments que nous
transmettons dans lesquels on utilise un plus cinq équivaut à six. Nous pouvons utiliser des paramètres par défaut pour différents types de valeurs, y compris les chaînes et les tableaux. Revenons à notre code. Nous reviendrons sur un exemple
antérieur. Nous allons changer notre
fonction pour qu'on m'appelle mon nom. Les paramètres seront modifiés
pour qu'ils soient FirstName. Et LastName modifie le corps de la fonction pour
renvoyer un littéral de modèle. Nous allons donc utiliser des backticks. Interpellez les paramètres FirstName
et LastName. Définissons un
paramètre par défaut pour le nom de famille. Nous allons le définir comme égal à. Appelons maintenant la fonction
Mon nom. Nous allons transmettre un argument
pour le paramètre FirstName. Nous passerons à Bob. Nous ne transmettrons rien pour
le paramètre du deuxième nom. Sauvegardons cela
et lançons le code. Bob Murphy est tonique. Nous ne transmettons pas d'argument
pour le deuxième paramètre. Le paramètre par défaut est utilisé. Si nous avions une fonction qui
devait utiliser un tableau, nous pouvons l'utiliser comme
paramètre par défaut, supprimons notre code. Nous allons créer une fonction
appelée notre tableau. À l'intérieur des paramètres, un
paramètre appelé R donnera à cela la valeur par défaut
d'un tableau contenant un. 23 à l'intérieur de la fonction
renvoie le paramètre r. Appelons notre fonction. Nous ne transmettrons rien
pour l'argument. Sauvegardons cela
et lançons le code. Nous obtenons le tableau de
paramètres par défaut renvoyé contenant 123.
21. Répartition en fonctions: Bienvenue de retour. Dans cette vidéo, nous allons
voir comment utiliser spread dans les fonctions JavaScript. Mais commençons par répondre à la question : qu'est-ce qui se répand ? L'opérateur de propagation
a été introduit par ES6. Il se compose de trois points. En fonction de l'endroit et de la
façon dont vous utilisez le spread, vous pouvez réaliser un
certain nombre de choses. Les trois principales utilisations
de la diffusion ou au sein fonctions, d'objets et de tableaux. La plupart des définitions de l'état de
propagation, c'est-à-dire vous
permettent d'étendre un itérable à un autre endroit
tel qu'une variable. Un itérable est une structure de données laquelle vous pouvez parcourir une itération. Par exemple, lorsque nous
parcourons chaque élément
d'un tableau, nous effectuons une itération sur le tableau. Voyons pourquoi
vous pourriez utiliser du pain. Javascript dispose d'un ensemble de méthodes attachées à l'objet mathématique
intégré, ce qui permet
de trouver le nombre
minimum et maximal d'un ensemble de valeurs transmises. Lorsque nous utilisons ces méthodes. Ces méthodes et
math.max et math.min. Si nous voulions trouver la valeur minimale à partir
d'un ensemble de nombres, nous pourrions utiliser la méthode
Math.min. Jetons un coup d'œil
à la façon dont cela fonctionne. Nous commençons par l'objet mathématique. Nous appelons la méthode Min. Utilisez point et dites Min. À l'intérieur des parenthèses, nous
passons quelques arguments, nous passerons en 10987. Lançons ça. Nous en recevons sept.
Sous le capot. Javascript
parcourt ces valeurs et renvoie la valeur la plus basse. C'est génial. Mais que se passe-t-il si nos valeurs
sont stockées dans un tableau ? Essayons encore une fois. Mais cette fois, nous allons créer un tableau et
le transmettre comme argument. L'utilisation de const se produirait
une variable appelée valeurs affectées à ce
tableau avec les valeurs 10987. Reprenons maintenant la méthode
Min. Cette fois, nous transmettons
des valeurs comme argument. Nous recevons NaN pas un
numéro renvoyé. La raison en est
que la fonction
recevra l'ensemble du tableau
sous la forme d'un seul argument. Il a besoin des valeurs
du tableau en tant qu'arguments distincts. C'est ici que nous pouvons
utiliser spread car le tableau sera
divisé en éléments individuels. Essayons le même exemple, mais cette fois, en utilisant
l'opérateur spread, appellera à nouveau la méthode principale. Cette fois-ci, utilisez l'opérateur de
propagation. Nous transmettons des valeurs. Maintenant, nous en recevons sept. Si
la propagation est utilisée entre parenthèses d'
une fonction cool, en
tant qu'argument, l'
itérable transmis paramètres de
la fonction sera divisé en arguments individuels. Lorsque nous utilisons spread
avec notre exemple, la fonction reçoit
quatre arguments distincts.
22. Plus de diffusion dans les fonctions: Bienvenue de retour. Dans la dernière vidéo, nous avons
présenté l'opérateur de propagation. Nous sommes également en mesure d'utiliser le
spread à l'intérieur de la fonction. Jetons un coup d'œil à ça. Si nous listons les paramètres
seront utilisés à
l'intérieur des parenthèses de la fonction et transmettront un itérable en
utilisant spread. Lorsque nous appelons la fonction, nous pouvons accéder aux
différents éléments. Jetons un coup d'œil à ça. Nous allons commencer par utiliser une déclaration de
fonction. Pour une fonction appelée total. Cela prendra trois paramètres. Nous appellerons ça vite. Deuxièmement. Troisièmement, à l'intérieur du
corps de la fonction. Nous allons les résumer ensemble. Après la fonction. Créons un tableau qui sera affecté à une
variable à l'aide de contenu. Dans le tableau,
placera les valeurs 123. Appelons maintenant la
fonction totale dans un journal de console. L'utilisation de l'opérateur de propagation
passera dans le tableau de voyelles. Sauvegardons cela et
nous allons exécuter le code. Nous en obtenons six comme valeur de retour. Lorsque la
fonction totale est appelée, le tableau de valeurs est transmis à
la fonction totale en tant qu'argument. Il utilise l'opérateur de propagation. Le tableau est donc
divisé en éléments individuels. Lorsque la fonction est exécutée. Le premier est défini sur un, le second est défini sur et le troisième est défini sur trois. Par conséquent, six sont retournés.
23. Présentation de la propagation dans les objets: Bienvenue de retour. Dans cette vidéo, nous allons examiner l'utilisation de
spread dans les objets JavaScript. Commençons par une introduction
rapide. Lorsque nous utilisons l'
opérateur de propagation dans un objet, nous pouvons copier des propriétés un objet vers un autre objet, et nous pouvons combiner différents objets dans
un objet de destination. Nous pouvons également aller plus
loin et étendre l'objet de destination
pour qu'il contienne les objets copiés ainsi que des propriétés
supplémentaires. Jetons donc un
coup d'œil à un exemple. Utilisation de const. Nous allons créer une
variable appelée Alien. Nous allons attribuer à cette
propriété une espèce avec la valeur de chaîne. Alien lui donnera également une propriété d'armes
d'une valeur cinq. Ensuite, nous allons créer un autre
objet que nous appellerons OVNI. À l'intérieur de l'objet OVNI, nous utiliserons l'opérateur de propagation pour copier l'objet extraterrestre. Ajouterait également une
propriété legs avec la valeur cinq. Ajoutons maintenant un journal de
console pour UFO. Nous allons enregistrer cela et
nous allons exécuter le code. Lorsque nous exécutons le code, nous obtenons un objet qui possède
toutes les propriétés de l'objet extraterrestre et de la propriété legs
supplémentaire. Il y avait quelques éléments
à garder à l'esprit lorsque vous utilisez l'
opérateur de propagation avec des objets. Lorsque l'objet dans lequel
vous étirez et que l'objet
parent a
des propriétés conflictuelles, convient de rappeler que la propriété sera
écrasée. La valeur finale de
la propriété sera la dernière qui était
rouge lors de l'exécution du programme. Jetons un coup d'œil à ça. Ajoutons une propriété feat
à notre objet extraterrestre. Nous obtiendrons cette valeur neuf. Ajoutons également une
propriété feat à notre objet OVNI. Cette fois, nous allons donner à
cela la valeur de six. Sauvons ça. Et nous allons exécuter notre code. Lorsque le code s'exécute, l'objet renvoyé possède la propriété pieds
avec la valeur six. En effet,
lorsque le code s'exécutait, UFO était le dernier objet
à définir la propriété feet.
24. Étalement dans les objets: Lorsque vous travaillez avec l'opérateur de
propagation et les objets, vous pouvez copier des objets copiés. Jetons un coup d'œil à un exemple. Nous garderons nos objets extraterrestres et
OVNI identiques, mais nous ajouterons un autre
objet appelé OVNI copié. À l'intérieur de cet objet en utilisant
spread, nous copierons l'objet OVNI. Nous allons mettre à jour notre journal de console pour afficher l'objet OVNI copié. Sauvegardons cela
et lançons le code. L'objet UF copié
renvoie simplement une copie de
l'objet OVNI. Nous obtenons donc les mêmes
propriétés renvoyées lorsque nous utilisons un journal de console pour
l'objet OVNI copié. Il convient de noter ici que l'
opérateur de propagation avec des objets ne fait qu'une
copie superficielle de l'objet. L'adresse de l'
objet est copiée. Les deux objets
ne seront pas strictement égaux car ils sont stockés par
référence et non par valeur. Nous pouvons clarifier cela en modifiant notre
journal de console pour vérifier si l'OVNI est strictement
égal à l'OVNI copié. Sauvegardons cela
et lançons le code. On se fait faux. Pour cette raison, les instances imbriquées de l'objet
ne seront pas copiées. Jetons un coup d'
œil à un exemple du
fonctionnement de la copie superficielle. Après l'objet OVNI copié. Modifions les objets OVNI
comme propriété pour qu'ils soient égaux à un. Nous allons mettre à jour notre journal de console pour imprimer l'objet OVNI copié. Nous allons également ajouter un
journal de console pour afficher l'objet OVNI. Sauvegardons cela
et lançons le code. Lorsque nous mettons à jour la propriété
legs sur l' objet
UFO et la console, consignez l'objet OVNI copié. Nous pouvons constater que la propriété
legs de l'objet OVNI
n'a pas été affectée. Lorsque nous
déconnectons l'objet OVNI sur la console, nous pouvons voir qu'il s'agit maintenant d'un objet OVNI. Toutefois, si nous modifions la propriété dans
un objet imbriqué, les deux objets seront modifiés. Jetons un coup d'œil. Ajoutons une nouvelle propriété à notre objet OVNI appelée journey. Cela fera de cela un objet. À l'intérieur de cela, nous allons
définir une propriété de longueur. Nous allons donner la
valeur de 9 000. Après avoir mis à jour la propriété
UFO Legs, mettons également à jour notre propriété de longueur de
voyage. Nous disons la longueur du point de voyage OVNI, et nous la fixerons à dix. Console ne consignons que
l'OVNI copié cette fois. Sauvegardons cela
et lançons le code. Lorsque le code s'exécute, nous pouvons voir que même si les jambes ne sont pas modifiées
dans l'OVNI copié, la propriété length le fait.
25. Plus de propagation avec des objets: Nous connaissons maintenant l'opérateur
de propagation dans les objets. Voyons comment cela fonctionne avec différentes structures de données. Vous ne pouvez répartir
des objets que dans des objets. Vous ne pouvez pas étendre un
objet dans un tableau. Nettoyons notre code. nous reste donc que
l'objet extraterrestre. Maintenant, créons une
variable à l'aide de const. Est-ce que notre tableau pourrait. Nous allons attribuer à cela un tableau. L'utilisation de spread va essayer de
copier l'objet extraterrestre. Sauvegardons cela
et lançons le code. Nous obtenons une erreur
de type non capturée avec le message « alien » n'
est pas itérable. Ce que nous pouvons faire, c'est étendre un objet dans un
objet d'un tableau. Essayons donc ceci
et corrigeons notre code. À l'intérieur de notre réseau. Nous allons enrouler l'
opérateur à l'intérieur d'accolades bouclées. Sauvegardons cela
et lançons le code. Cela fonctionne. Nous obtenons un tableau avec l'objet
extraterrestre renvoyé. Vous pouvez également répartir un
tableau dans un objet, mais vous obtiendrez des paires
clé-valeur basées sur les
indices des éléments. Supprimons tout notre code. Nous allons créer une variable
en utilisant des lettres appelées const. À l'intérieur de ce tableau ajoutera a, B et C. Ensuite, créons
un autre tableau appelé Alphabet. Nous allons attribuer à cela un
objet à l'aide de spread. Nous allons copier des lettres. Ajoutons également un
journal de console pour Alphabet. Nous allons enregistrer cela et
nous allons exécuter le code. Nous recevons des paires clé-valeur
renvoyées avec chaque lettre.
26. Étalement dans des réseaux: Bonjour. Dans cette vidéo, nous
allons voir comment
utiliser le spread dans les tableaux JavaScript. Maintenant que nous avons
appris à utiliser l'opérateur de propagation
avec des fonctions, voyons comment utiliser l'opérateur spread avec des tableaux. Lorsque vous travaillez avec des baies, si vous souhaitez faire une copie d' un tableau ou combiner
plusieurs baies
, l'opérateur de propagation
est très utile. Lorsque vous utilisez l'
opérateur de propagation dans un tableau. Il répartira le contenu
dans un autre tableau. La ou les
baies d'origine restent inchangées. Voyons un exemple de base. Nous allons commencer par utiliser const pour créer une variable appelée en premier. Nous allons initialiser cela avec
un tableau contenant 13. Ensuite, nous allons créer une autre
variable à l'aide du code codons. Deuxièmement, initialisez ceci avec
un tableau contenant 456. Créons maintenant une
variable appelée compte six. Nous allons initialiser
cela avec un tableau. Mais à l'intérieur de ce tableau utilisera spread pour copier dans le rapide. Et aussi le deuxième effacement. Ajoutons un
journal de console pour compter jusqu'à six. Nous allons enregistrer cela et
nous allons exécuter le code. Nous obtenons un
tableau unique contenant tous les éléments des
premier et deuxième tableaux. Lorsque vous utilisez l'opérateur de
propagation avec la hausse, il convient de
noter que l'ordre
est important en fonction de la façon dont vous souhaitez que les éléments du
tableau soient classés. Nous pouvons également ajouter
des éléments
supplémentaires à ceux où nous
utilisons l'opérateur de propagation. Jetons un coup d'œil à cela
dans notre prochain exemple. Dans notre code, nous allons changer
notre nombre en six tableaux, appelé nombre à sept. À l'intérieur du tableau, nous
ajouterons la valeur sept. Mettons à jour notre journal
de console enregistrer cela et
nous allons exécuter le code. Cette fois. Nous obtenons les sept valeurs répertoriées dans le tableau de
compteurs sept. Si vous utilisez
spread pour copier les tableaux, ils ne seront pas égaux les uns
aux autres car les
tableaux sont stockés par
référence et non par valeur. Il s'agit donc d'une référence à la baie stockée dans la
mémoire de l'ordinateur. Ce n'est pas les valeurs
des tableaux eux-mêmes. Mais cela ne s'applique pas aux structures de données
imbriquées. Revenons à notre code
et supprimons tout. Nous allons commencer par déclarer une
variable à l'aide du code const. tableau initial
attribuerait à ce tableau un tableau qui contiendra les
lettres a, b et c. Ensuite, nous allons créer
une autre variable, cette fois le tableau
initial de copie de code. Nous allons attribuer à cela un tableau. À l'aide de l'opérateur
spread, copiera le
tableau initial dedans. Maintenant, en utilisant l'opérateur d'
égalité stricte, comparons le tableau initial et le
tableau initial de copie à l'intérieur d' un journal de console enregistrera cela
et nous allons exécuter notre code. On se fait faux. Et c'est parce que les tableaux sont stockés par référence et
non par valeur. Il s'agit d'une référence à la baie stockée dans la mémoire
de l'ordinateur, non aux valeurs de la
baie elle-même.
27. Présentation du paramètre de repos: Bienvenue de retour. Dans cette vidéo nous allons examiner
l'utilisation des paramètres de repos, mais commençons par
examiner les arguments de fonction. Lorsque nous créons une fonction, nous définissons souvent des paramètres à
utiliser dans le corps de la fonction, nous transmettons les valeurs ces paramètres lorsque nous
appelons ou invoquons la fonction, nous appelons ces arguments de valeurs. Jetons un coup d'œil
à un exemple de base. Nous allons commencer par créer une déclaration de fonction
appelée Add. Cela prendra deux
paramètres par un. Et val2. À l'intérieur du corps de la fonction, le total
de l'ajout par L1 et L2
sera renvoyé . Ensuite, nous appellerons la fonction. Nous allons en passer un. Et pour les arguments. Sauvons ça. Et nous allons exécuter le code. Nous obtenons cinq rendements est-ce que le total
en ajoutant 14 ensemble ? Javascript fournit un objet appelé objet arguments
, accessible depuis
l'intérieur d'une fonction. L'objet argument
ressemble à un tableau, mais il ne s'agit pas d'un tableau. Si vous ne pouvez pas utiliser de méthodes re moins de
le convertir en tableau, l'objet arguments est une liste. Les éléments ont des indices, et nous pouvons donc passer en boucle sur les éléments à l'aide d'une boucle for-loop. Jetons un coup d'œil à
l'exemple précédent. Au lieu d'additionner les
paramètres, vous ajouterez un journal de console pour l'objet
arguments. Sauvegardons cela
et lançons le code. Cette fois, nous voyons l'
objet arguments imprimé sur la console. Lorsque la
fonction d'ajout est appelée, nous transmettons deux arguments. Nous pouvons les voir
dans l'
objet arguments imprimé à partir du verrou de la
console dans la fonction. Si nous voulions
accéder aux arguments, nous pouvons le faire en utilisant les
indices des arguments. Essayons de mettre en
œuvre cela. À l'intérieur de la console, log
utilise les indices 01 pour accéder aux éléments. Maintenant, sauvegardons cela
et lançons le code. Cette fois, nous pouvons voir les
arguments que nous avons passés dans la fonction d'ajout 14
imprimés sur la console. Nous pourrions également utiliser une boucle pour
parcourir les arguments, comme nous le ferions
avec un tableau. Implémentons cela dans notre corps
de fonction pour ajouter une boucle, donc nous utilisons le mot-clé complet. Utilisera la variable I, et nous la définirons à 0. Nous dirons que je suis inférieur à la longueur du point d'
arguments, puis nous incrémenterons i. Chaque fois que la boucle s'exécute. Le corps de la boucle, nous consolerons
les arguments du journal de I. Sauvegardons cela et
nous allons exécuter le code. Chaque argument est
imprimé sur la console, un puis quatre. Dans notre cas, nous pourrions ajouter des arguments supplémentaires
à l'appel de fonction. Ainsi, même s'ils ne figurent pas
dans les paramètres de la fonction, ils seront toujours
imprimés sur la console. Ajoutons 56 autres. Enregistrez ça. Je suis en train de lancer le code. Tous les arguments que nous avons transmis sont imprimés
sur la console. Il convient de noter
que nous ne pouvons pas accéder à l'objet arguments lorsque
nous utilisons une fonction flèche. Si nous essayons de le faire,
nous obtiendrons une erreur. Voyons un exemple rapide. Nous allons donc changer notre fonction
en fonction de flèche. Maintenant, sauvegardons cela
et lançons le code. Cette fois, nous obtenons
une erreur de référence
indiquant que les arguments ne
sont pas définis. Dans la vidéo suivante, nous allons passer
au paramètre reste.
28. Utilisation du paramètre de repos: Bienvenue de retour. Es6 a introduit le paramètre
reste. Cela nous permet de résoudre
les mêmes problèmes que l'objet arguments, mais c'est beaucoup plus simple. La syntaxe du paramètre
rest est la même que celle de l'opérateur de
propagation. Nous utilisons donc trois points, mais cela fonctionne très différemment. Le paramètre rest
collectera tout dans un tableau unique si nous voulons utiliser une fonction qui accepte un nombre
quelconque d'arguments ou si nous avons une longue liste
d'arguments à transmettre à une fonction telle que l'alphabet. Il est très utile d'utiliser
le paramètre reste. Nous
le plaçons à l'intérieur des parenthèses des fonctions
à l'aide de trois points
suivis d'un nom afin de pouvoir accéder au tableau depuis l'intérieur
de la fonction. Jetons un coup d'œil à un exemple. Changeons notre fonction d'
ajout de la dernière vidéo à
une déclaration de fonction. Maintenant, utilisons le paramètre
rest, appellerons des valeurs
à l'intérieur des parenthèses des fonctions. Nous ajouterons également un journal de console pour les valeurs du corps de la fonction. Sauvons ça. Et nous allons exécuter le code. Lorsque le code s'exécute, nous obtenons un tableau. Il existe certaines différences avec le paramètre rest par rapport
à l'objet arguments. Le paramètre rest
renvoie uniquement les arguments restants
qui n'ont pas encore été mis en correspondance avec
le paramètre précédent. Par conséquent, si nous devions définir
un paramètre pour la valeur 1, les valeurs absentes ne contiendront désormais
qu'un seul élément. Jetons un coup d'œil à ça. À l'intérieur de la
fonction d'ajout, les paramètres ajouteront la valeur 1 pour
le premier paramètre. Gardons ensuite le
paramètre reste pour le
deuxième paramètre. Sauvons ça. Et nous allons exécuter le code. Cette fois. Lorsque le code s'exécute, nous n'en
obtenons que quatre comme valeur renvoyée car l'argument 1 est
défini comme valeur un paramètre. Par conséquent, le seul argument
restant concerne si vous souhaitez définir paramètres et utiliser
le paramètre reste, est important de considérer
que vous devez définir les paramètres avant
d'utiliser le paramètre rest, étant donné que le
paramètre reste renvoyé correspond aux valeurs restantes. Si vous utilisez d'
abord le paramètre rest , puis que vous définissez la
valeur un paramètre, vous obtiendrez une erreur de syntaxe. Changeons notre code, montrons comment cela se produirait. Nous allons modifier l'ordre
de nos paramètres. Le paramètre reste
est utilisé en premier. Sauvons ça. Et nous allons exécuter le code. Nous obtenons une erreur de syntaxe non détectée, qui indique que le paramètre rest doit
être le dernier paramètre formel. Enfin, nous sommes également en mesure d'utiliser
le paramètre rest à l'intérieur
d'une fonction de flèche. Contrairement à l'objet
arguments, modifions notre code
pour l'implémenter. Modifie la
déclaration de fonction pour qu'elle soit une fonction de flèche qui modifiera les paramètres pour utiliser uniquement le paramètre reste. Sauvegardons cela
et lançons le code. Cette fois, nous recevons
tous les arguments que
nous avons transmis lorsque le code s'exécute 14 sur notre écran.
29. Présentation pour chaque: Dans cette vidéo, nous allons
présenter la méthode FoReach. Javascript dispose d'un ensemble de méthodes d'assistance de
tableau
introduites dans ES6. Si vous connaissez
les bibliothèques telles que le soulignement ou le tiret bas, certaines de ces méthodes peuvent vous
être déjà familières. Dans ES6, ils ont été introduits dans le langage
JavaScript. bonnes
méthodes d'aide nous aident à manipuler et à utiliser les
données stockées dans un tableau. Dans cette vidéo, nous allons
présenter l'une de ces méthodes qui
est appelée pour chacun. Qu'est-ce que c'est pour chacun ? Eh bien, pour chaque fonction appelée
une fois par chaque élément d'
un tableau qui
commence par un exemple très basique
d'utilisation pour chacun, nous commencerons par déclarer
une variable utilisant const donnera à cela
le identificateur. Nos numéros vont initialiser
cela à l'aide d'un tableau. Et dans le tableau, nous allons
mettre quelques chiffres. Ensuite, nous utilisons la méthode FoReach. Nous appelons FoReach sur
notre tableau de numéros. Dans les paramètres de la méthode, nous passons une fonction
anonyme. Nous pouvons nommer le
paramètre de fonction
anonyme tout ce que nous voulons, mais il représente l'élément
individuel. Nous appellerons le paramètre
dans notre numéro d'exemple. À l'intérieur du corps, nous allons
consigner la valeur du paramètre de
numéro dans la console . Sauvegardons cela
et lançons le code. Lorsque le code s'exécute, nous récupérons chaque élément
du tableau de nombres impairs, l'
imprimons sur notre écran. Récapitulons quelques points
avant de passer à autre chose. Lorsque nous utilisons pour chacun, la fonction
de rappel
acceptée par la méthode est appelée une fois par chaque
élément
du tableau qui utilise
la méthode FoReach. Il est généralement logique
d'utiliser une fonction anonyme pour le rappel car le code
ne sera pas réutilisé. Mais nous pourrions passer à la méthode une fonction nommée si nous le voulions. Voyons comment
nous ferions cela, conserverons notre code actuel, mais après avoir créé le tableau de nombres impairs
utilisera une déclaration de fonction, que nous appellerons numéro d'impression. Plus d'ensemble de paramètres numériques. À l'intérieur de la fonction, nous allons consigner le paramètre
de numéro de la console. Maintenant, lorsque nous appelons chacun, nous transmettrons simplement
le numéro d'impression car le paramètre
supprimera tout le reste. Sauvegardons cela
et lançons le code. Nous obtenons la même valeur de retour. En guise de note, nous passons une référence à la
fonction pour, pour chacune d'elles. N'oubliez pas que nous n'
utilisons pas de parenthèses lorsque vous transmettez la
fonction comme celle-ci. Mais qu'en est-il des boucles ? Nous pourrions obtenir le
même résultat que dans notre exemple en utilisant une boucle. Comparons quelques exemples. Nous allons créer une boucle for of
après le tableau de nombres. Nous dirons donc que, à
l'intérieur des parenthèses, une variable sera
déclarée à l'aide de nums à gauche. Ensuite, nous parlerons des chiffres. À l'intérieur de la boucle, nous allons
consoler les numéros des journaux. Sauvegardons cela
et lançons le code. Nous obtenons le même
résultat à la fois du cool aussi pour chacun
et de notre boucle en utilisant à la fois une
boucle for et une
boucle for of fournit la même
sortie utilisée pour chacun. Le choix de celui
à utiliser se
résume vraiment à ce que
vous essayez de réaliser. Mais l'utilisation pour chacun d'entre eux est
généralement moins
sujette aux erreurs , car vous avez
moins de configuration à vous inquiéter. L'utilisation de FoReach
est souvent plus lisible. Dans la vidéo suivante, nous allons examiner
quelques exemples supplémentaires d'utilisation pour chacun d'eux.
30. Utilisation pour chaque: Dans cette vidéo, nous
allons examiner quelques
exemples supplémentaires d'utilisation de FoReach qui utilisera le même
code que l'exemple précédent. Mais cette fois, nous allons en
ajouter un à chaque élément. De retour dans notre code. Nous
disons simplement numéro plus un. Sauvegardons cela
et lançons le code. Nous obtenons chaque élément de nos chiffres avec un élément
ajouté à chaque valeur. Si nous voulions accéder à
l'index de l'élément, nous pourrions simplement lui passer un autre paramètre après le paramètre
number. Allons y aller. Nous ajouterons le paramètre d'index
après numéro, puis nous allons consoler le numéro de
journal et l'index. Sauvegardons cela
et lançons le code. Nous obtenons chaque numéro à partir
du tableau de nombres impairs imprimé, puis
de l'index de chaque élément également. Nous aimerions peut-être obtenir la somme
totale du
tableau de nombres impairs en utilisant pour chaque fois que nous pourrions atteindre cet objectif.
Allons y aller. Après avoir créé
le tableau de nombres impairs, nous créerons une
variable à l'aide de LED, que nous appellerons certains,
qui initialisera
avec les valeurs 0. Nous pouvons penser à cela un
peu comme un tracker, qui conservera le
total total de nos éléments au fur et à mesure que chaque
élément est total. À l'intérieur de chacun, nous ajoutons ensuite le numéro qui représente l'élément
actuel au soleil. Nous consignons ensuite
le total de la somme, qui est le total de
tous les éléments du
tableau de nombres impairs ajoutés ensemble. Sauvegardons cela
et lançons le code. Nous obtenons le total de tous les
éléments additionnés pour chacun d'entre eux est particulièrement utile lorsque nous travaillons
avec des données imbriquées. Voyons un exemple. Nous allons déclarer une variable
appelée étudiants. Attribuerait à cela un tableau à l'intérieur du
lieu d'arrivée trois objets. L'objet rapide que nous avons donné
son nom à Anna à 50 ans. Dans le deuxième objet, le nom
Pete
sera défini à 20 ans. Le troisième objet va définir le nom. Api, jusqu'à 12 ans. Utilisera ensuite pour
chacun des élèves. Nous disons donc les étudiants. Pour chacun d'entre eux. Nous passons au rappel. Et nous avons défini le
paramètre comme étudiant. Nous allons consigner
le nom de l'étudiant en consoles à l'aide de
la méthode ToupperCase. Faites ensuite glisser ceci
et exécutez le code. Chaque nom est imprimé
à l'écran à partir de la structure de données des étudiants
avec chaque nom en majuscules.
31. Présentation de la carte: Dans cette vidéo, nous
allons regarder la carte. Que fait la carte ?
Lorsque nous utilisons la carte, nous pouvons créer un nouveau tableau
à partir d'un tableau préexistant. Nous transmettons une fonction de rappel, et cette fonction est appelée sur chaque élément du tableau. À l'aide de cette méthode, vous pouvez créer un nouveau tableau en effectuant quelque chose sur
les éléments d'origine. Voici quelques exemples de ce que
vous pouvez faire avec la carte : choisir
certains éléments, simplement dupliquer le tableau. Bien que la propagation soit
plus simple pour cela, ou manipuler les données du
tableau d'une manière ou d'une autre. Il y a quelques
points clés lorsque vous
travaillez rapidement avec la carte, vous devez retourner quelque chose. Sinon, vous obtiendrez un nouveau tableau rempli de caractères non définis
pour chaque élément. Vous devez également stocker l'
appel à mapper dans une variable. Sinon, vous n'aurez aucune
référence au nouveau tableau. Le tableau initial n'
est pas modifié, mais un nouveau tableau est
créé lorsque nous utilisons la carte. Examinons quelques exemples. Si vous aviez un tableau de valeurs, mais que vous vouliez doubler
chacune des valeurs. La carte nous permet de le faire. Nous allons commencer par déclarer
une variable appelée valeurs. Et nous allons attribuer à cela
un tableau contenant dix, 20304050. Ensuite, nous allons déclarer une autre
variable appelée doublée. Cela stocke la
valeur renvoyée à partir de l'utilisation de mathématiques. Appelle la carte sur
le tableau de valeurs. Nous disons une carte de points de valeurs. Ensuite, nous passons le rappel. Nous allons définir le paramètre de
chaque élément comme étant une valeur. Nous retournons ensuite la valeur
multipliée par deux. Consolons maintenant les valeurs du journal. Nous allons également doubler le journal de la console. Sauvegardons cela
et lançons le code. Rien n'a été modifié dans
le tableau de valeurs car la méthode ne mutera ni ne
modifiera le tableau d'origine. Cependant, lorsque nous
regardons doublé, qui est le
tableau renvoyé à partir de l'utilisation de la carte, nous pouvons voir que les éléments
du tableau de valeurs ont
été doublés. Il convient de noter que nous passons une fonction anonyme
est le rappel à la carte. Vous pouvez passer une fonction
nommée ici. Mais comme nous ne
l'utilisons qu'une seule fois, une fonction anonyme
est souvent plus appropriée. Nous pourrions donc facilement obtenir le même résultat avec une boucle for-loop. Mais le code sera beaucoup plus compliqué et
donc sujette à des erreurs. Mais jetons un coup d'œil
à la façon dont nous faisons cela. Nous commenterons
le premier exemple. Nous garderons le tableau de valeurs créera également une
variable appelée doublée. Nous allons attribuer à cela
un tableau vide. Ensuite, nous allons
créer une boucle for-loop. À l'intérieur de la boucle, poussera chaque élément multiplié par deux dans
le tableau doublé. Enregistrez ceci et exécutez le code. Nous obtenons la même
sortie qu'avant, mais le code est un
peu plus complexe. Dans la prochaine vidéo, nous
allons revenir à la carte.
32. Utilisation de la carte: Bienvenue de retour. Dans cette vidéo, nous
allons examiner quelques autres exemples d'utilisation
de la carte. Nous pouvons utiliser la carte pour manipuler
un tableau de chaînes tout aussi facilement que lorsque nous avons travaillé avec un
tableau de nombres. Nous allons prendre un tableau de salutations
majuscules et les
renvoyer toutes en minuscules. Nous allons commencer par créer une
variable appelée salutations. Je vais attribuer
à cela un tableau contenant les chaînes
majuscules. Par quoi de neuf. Ensuite, nous allons créer une autre variable appelée salutations
formatées. Attribué à cela le résultat de l'
appel de la carte sur le tableau de
salutations. Nous disons une carte de points de salutation. Ensuite, nous passons le rappel. Nous allons définir le
paramètre « salutation ». Ensuite, nous tournerons le message
d'accueil en utilisant la méthode à deux minuscules. Ajoutons les
journaux de la console aux salutations. Et aussi des salutations formatées. Enregistrera cela et exécutera le code. Rien n'a changé pour le tableau de salutations car ce tableau n'est pas muté. Le tableau de salutations formaté, qui est le tableau
renvoyé par la carte, contient chaque message d'accueil du tableau
de salutations, mais avec chaque chaîne en minuscules, si nous n'avions pas imbriqué la structure de
données et souhaitait choisir l'une des propriétés, puis créer un tableau
avec ces valeurs. La carte est également idéale. Jetons un coup d'œil à ça. Nous allons créer une
variable à l'aide de const, que nous appellerons que les étudiants
affecteront à cette variable et à la matrice. Ce tableau
contiendra trois objets. Dans le premier objet, nous définissons une propriété name. Nous obtenons cette valeur. Anna fixerait également une propriété d'âge et
lui attribuerait la valeur 50. Le deuxième objet que nous avons défini le nom de Pete et l'âge de 20 ans. Le troisième objet, nous avons défini
le nom Abby et l'âge de 12 ans. Nous allons maintenant créer
une variable en utilisant âges des étudiants du code
const. Nous allons attribuer à cela le
résultat de l'utilisation de la carte. La structure de données des étudiants. Nous définissons le paramètre
du rappel en tant qu'étudiant. Ensuite, nous retournons la
valeur de l'étudiant. Ajoutons un
journal de console pour les âges des étudiants. Nous sauvegarderons cela
et exécuterons le code. Nous obtenons un tableau contenant les âges de la structure de données des
étudiants. Nous pourrions également renvoyer un tableau
d'objets à partir de la carte. Nous allons à nouveau utiliser le tableau des
étudiants. Mais le format des valeurs changera
le nom en minuscules. Et nous en ajouterons un à chacun
des âges des élèves. Modifions la
variable d'âge des étudiants pour qu'elle soit mise à jour. Supprimons le retour. Nous allons modifier cela pour
renvoyer un objet. À l'intérieur de l'objet, nous
ajouterons le nom de la clé en minuscules. Nous allons définir la valeur de
cela pour être étudiant. Nom du point, point deux minuscules. Nous allons également définir une autre
clé pour être h plus une. Nous définirons la valeur
de cette valeur comme point
étudiant plus un. Modifions notre journal de console
pour afficher les étudiants mis à jour. Enregistrera cela et exécutera le code. Nous obtenons un tableau contenant
trois objets avec les propriétés que nous avons définies dans notre rappel lorsque nous
utilisons la méthode de carte, nom en
minuscules et
l'âge plus un. J'ai discuté du fait de ne
rien renvoyer à l'intérieur de
la chauve-souris cool à la carte. Il entraîne le renvoi d'un tableau de
valeurs non définies. Voyons un
exemple de cela. Je dirigerais tout notre code. Nous allons créer une variable
appelée lettres. Cela a été attribué à un tableau, qui contiendra
les chaînes a, b et c. Créons une autre
variable appelée majuscules. Cela permettra de stocker notre
tableau renvoyé à partir de l'utilisation de la carte. Nous appellerons la carte des lettres. Nous allons passer le rappel. Nous allons définir le
paramètre sous forme de lettre. Ensuite, on dira lettre point. Toupper case. Sachez que nous n'
utilisons pas retour ici. Ajoutons un
journal de console pour les lettres. Ajoutons également un
journal de console en majuscules. Nous sauvegarderons cela
et exécuterons le code. Nous obtenons le
tableau de lettres comme prévu, car la carte ne
mute pas le tableau d'origine. Cependant, pour les majuscules,
nous obtenons un tableau renvoyé avec
indéfini pour chaque élément. Nous n'avons pas utilisé le retour, donc cela est attendu. Ajoutons le
retour à notre rappel. Enregistrera cela et exécutera le code. Cette fois, nous obtenons le tableau rempli de lettres
majuscules.
33. Utilisation du filtre: Bienvenue de retour. Dans cette vidéo, nous
allons examiner l'utilisation la méthode de filtrage en JavaScript lorsque nous
travaillons avec des baies L'
une des tâches courantes
que nous devrons peut-être
accomplir est de filtrer
certaines données de la baie. Peut-être voulons-nous simplement
renvoyer l'élément impair ou pair dans
un tableau de nombres. Peut-être voudrions-nous que le tableau
renvoie uniquement des chaînes
contenant certains caractères lorsque nous avons ce type de scénario, la méthode de filtre de tableau
peut être extrêmement utile. Comment utiliser la photo pour
utiliser la méthode de filtre, nous passons à la
méthode un rappel. Habituellement, il s'agit d'une fonction
anonyme, bien que nous puissions transmettre une
référence à une fonction, la fonction de rappel que
nous transmettons agit comme une fonction de test et doit
renvoyer une fonction booléenne
si vraie ou fausse. Si l'élément réussit cette fonction de test
et que la valeur est renvoyée, l'élément sera
ajouté au tableau renvoyé. Si l'élément ne
réussit pas la fonction
de test , l'élément ne sera pas
ajouté au tableau renvoyé. Le tableau d'origine n'est pas muté lorsque vous utilisez
la méthode de filtre. Comme pour les autres méthodes de santé des
rayons, nous pourrons peut-être atteindre résultat souhaité
en utilisant une boucle for-loop. En général, la méthode de
santé du tableau nous
permet d'écrire un code plus
lisible et extensible. Commençons par
regarder un exemple qui renvoie les nombres pairs
à partir d'un tableau de valeurs. Nous allons commencer par le faire
avec une carte for-loop. Déclarer une variable à l'aide de const, que nous appellerons des valeurs, va initialiser
cette variable avec un tableau. À l'intérieur de la baie, nous
ajouterons quelques chiffres. Ensuite, nous initialisons
une autre variable, que nous appellerons résultats. Nous utilisons ensuite une boucle for, qui parcourt
le tableau de valeurs. Dans la boucle for-loop,
si l'élément est égal, l'élément sera poussé dans
le tableau de résultats. Ajoutons un journal de console pour le tableau de résultats
en dehors de la boucle. Nous allons enregistrer cela
et exécuter le code. Nous voyons que le tableau
ne contient que les éléments pairs. Cela fonctionne, mais si nous
utilisons la méthode du filtre
, une partie du travail
serait fait pour nous et nous aurions un code
susceptible d'être moins sujet aux erreurs. Examinons le même exemple,
mais cette fois, à l'aide de
la méthode de filtre, nous utiliserons le même tableau stocké dans la variable de
valeurs, mais nous supprimerons le
reste du code. Ensuite, créez une autre
variable appelée résultats. Cela stocke le nouveau tableau qui sera renvoyé
à partir de l'utilisation du filtre. Nous appelons la méthode de filtre sur les valeurs et vérifions
si la valeur est égale. Sauvegardons cela
et lançons le code. Lorsque nous consignons les résultats de la console, nous recevons le même tableau que lorsque nous utilisons la boucle for. Il y a quelques éléments à prendre en
compte lorsque vous utilisez cette méthode, il convient de rappeler
que lorsque nous utilisons
le filtre, le tableau d'origine ne change pas ne change
donc pas. Nous pouvons comparer les baies
d'origine et les nouvelles baies de l'exemple ci-dessus, et nous verrons qu'elles sont
très différentes. Revenez à notre code et ajoutez un
journal de console pour les valeurs. Nous allons enregistrer et exécuter notre code. Nous obtenons le tableau de résultats. Et maintenant, nous pouvons également voir le tableau de valeurs d'origine
qui n'a pas été modifié. Nous pouvons donc nous référer à cela car
il n'a pas été muté. Nous devons également nous assurer,
lorsque nous
remettons le froid dans la méthode du filtre,
que nous retournons quelque chose. Sinon, le nouveau tableau
recevra un tableau vide renvoyé. Supprimons les données renvoyées de notre code ainsi que du journal de la console
des valeurs. Nous allons enregistrer cela
et exécuter le code. Nous recevons un tableau vide
car nous n'avons rien
renvoyé . Nous pourrions utiliser un filtre sur un tableau de chaînes tout aussi facilement. Voyons un
exemple de cela, retournera un tableau de chaînes contenant
la lettre A. Revenons à notre code
et supprimons tout. Nous allons créer une
variable appelée noms. attribué à ce tableau. À l'intérieur du tableau
, vous trouverez les cordes Sally, Bob, Lauren et Ted. Nous allons ensuite créer une variable
appelée noms filtrés. Cela stocke le tableau
renvoyé à partir du filtre. On dira donc des noms de filtre à points. Ensuite, nous allons passer un rappel
qui définira un paramètre de nom. Ensuite, nous retournerons tous les noms qui incluent la lettre A. Nous disons
donc nom. Le point inclut la passe
dans la chaîne a. Ajoutons un journal de console
pour les noms filtrés. Nous allons enregistrer et exécuter notre code. Nous obtenons un tableau contenant
Sally et Lauren, car ce sont
les éléments
du tableau Names qui
contiennent la lettre a. Enfin, examinons l'utilisation de la méthode de filtre sur une structure de données
imbriquée nous allons prendre un tableau
contenant des objets et renvoyer les objets dont la propriété scolaire
est supérieure à 90. Nous allons commencer par créer une
variable appelée résultats, et nous allons définir cette variable
égale à un tableau. À l'intérieur du tableau, cinq objets seront
créés. Le premier objet définira une propriété name,
lui attribuera la valeur. Billy établirait également une propriété de score et
lui attribuerait la valeur 90. Dans l'objet suivant
définira un nom et un score de 100. Le prochain, nous nommerons Laura et lui donnerons
un score de neuf. Ensuite, nous allons attribuer un nom à
Alice avec un score de 100. Ensuite, dans le dernier,
nous définirons le nom de peta avec un score de 98. Ensuite, nous allons créer une
variable appelée passé. Nous allons définir cette valeur égale aux résultats. Le filtre de points utilisera une fonction d'erreur de ligne
unique ici, puis renvoie implicitement un
score de point inférieur à 90. Ajoutons un
journal de console pour le passé. Nous allons enregistrer cela
et exécuter le code. Nous obtenons un tableau contenant tous les objets où l'
école était supérieure à 90.
34. Utiliser trouver: Dans cette vidéo, nous
allons examiner la méthode find dans
le passé avant ES6. Si vous souhaitez
trouver un élément d'
un tableau correspondant à
quelque chose de spécifique, vous pouvez utiliser une boucle for-loop. Jetons un coup d'œil
à la façon dont nous pourrions faire cela. Si nous voulions trouver
la pomme à cordes à partir d'un tableau de chaînes, nous commencerons par déclarer
une variable appelée fruits. Attribuera à cela un tableau
contenant les cordes fausses, orange, citron, pomme. Kiwi. Ensuite, nous allons créer une variable
en utilisant la gauche appelée fruit. Utilisera cela dans notre boucle for, va continuer à créer
la boucle for-loop. À l'intérieur de la boucle, l'utilisation d'une
instruction if vérifiera
en utilisant une égalité stricte. Si le fruit est égal à la pomme. S'il est égal au
fruit de la pomme à l'élément fruit, alors nous utiliserons la pause, car nous
n'aurions plus besoin de
continuer à faire une boucle. Ajoutons un
journal de console pour les fruits. Je sauverai ça. Et nous allons exécuter le code. La variable fruit
a été définie sur Apple car les fruits sont prêts
contiennent la ficelle de pomme. Cela fonctionne, mais c'est une approche
assez longue
pour atteindre notre objectif de trouver
l'élément pomme. La méthode d'assistance array find nous
aide à obtenir
le même résultat, mais beaucoup plus facilement, en
utilisant la méthode find, nous pouvons renvoyer la valeur du premier et du premier élément dans un
tableau donné qui correspond au résultat de la
fonction de rappel que nous transmettons, la méthode
renvoie ensuite cet élément. Lorsque nous utilisons find, la
fonction de rappel doit renvoyer un booléen vrai ou faux. Lorsque nous appelons la méthode find, elle sera exécutée une fois par
chaque élément du
tableau sur lequel elle a été appelée. Mais lorsqu'il trouve une correspondance, il cesse de fonctionner et renvoie
simplement la valeur
de l'élément. Pour clarifier, même
si le tableau que nous utilisons find on contient
plusieurs correspondances, seul le premier élément
renvoyant true sera renvoyé. Les autres éléments ne se sont
même pas trompés. Réimplémentons
l'exemple initial, mais cette fois en utilisant le tableau de fruits
peep off fund, mais nous supprimerons tout le reste. Ensuite, nous allons créer une variable
à l'aide de const. Code fruit. Attribuerait à cela le résultat
de l'utilisation de la méthode find. Nous passons une fonction anonyme
comme rappel. Dans défini. Nous allons définir un paramètre de fruit. Nous utilisons votre langue et vérifions si le fruit est strictement égal à la pomme. Ajoutons un
journal de console pour les fruits. Enregistrera et exécutera notre code. Nous recevons Apple renvoyé car le tableau de
fréquences contient l'élément apple. Le fruit à Ray ne contenait Apple que non défini,
il sera retourné. Enlevons les pommes,
ma gamme de fruits. Nous sauvegarderons et réexécuterons
le code. Nous n'avons pas défini votre tendance, car Apple n'est plus
dans la gamme de fruits. Si nous travaillions avec
une structure de données imbriquée avec des objets
contenant des utilisateurs, nous pourrions utiliser find pour choisir l'utilisateur qui
réalise quelque chose. Voyons un exemple
où nous avons trois utilisateurs,
mais nous voulons renvoyer le
nom de l'utilisateur rapide qui
a obtenu un score de 0 lors d'un test,
dirigerait tout notre code. Nous allons créer une variable
appelée résultats. Et nous allons définir cela comme
égal à un tableau. À l'intérieur du tableau, cinq objets seront
créés. L'objet rapide va
définir une propriété name. Et nous allons donner à cela
la valeur du ventre. Mais aussi satisfaire votre propriété, obtiendrez la valeur 90. L'objet suivant
définira le nom à tester. Note 100. Le prochain qui a mis le
nom à Laura et
lui donnera un score de neuf,
enverra un nom. Alice avec un score de 100. Ensuite, dans le
dernier, nous allons nommer Peter avec un score de 98. Créez ensuite une variable
appelée gagnant. Nous allons définir cette valeur égale à la valeur de
retour de l'utilisation de find. Nous disons que les résultats sont trouvés. Puis passez le rappel. Nous définissons le paramètre sur résultat, retournerons le résultat. Le score de résultat
est strictement égal à 100. Ajoutons un
journal de console pour le gagnant. Nom du point. Enregistrez ceci et nous allons
exécuter le code. Le score du premier
conteneur d'objets de 100 correspond à l'utilisateur tat. Nous consoles consignent le
nom de cet objet. Nous recevons donc TED car nous
utilisons ES6 car ce
cours est à peu près ESX moins complet
cette vidéo avec un exemple d'utilisation d'
une fonction de flèche avec un retour implicite. ne pas utiliser le mot-clé
retour mettra fait de ne pas utiliser le mot-clé
retour mettra
à jour l'exemple que nous venons de faire. Mettons à jour notre fonction
gagnante. Supprimez les parenthèses. Le retour va changer la fonction en fonction
de flèche. Sauvegardons cela et nous
lancerons à nouveau le code. Nous obtenons toujours la
même valeur de retour.
35. En utilisant certains et chaque: Dans cette vidéo, nous
allons examiner la somme et toutes les méthodes d'aide de
tableau. Ces deux méthodes d'aide
ont été introduites dans ES6. Ces deux méthodes renvoient des valeurs
booléennes, true ou false. Nous commencerons par regarder tous les points. Lorsque nous utilisons tous, nous transmettons une méthode de rappel, qui est généralement une fonction
anonyme. La méthode de rappel doit
renvoyer une valeur booléenne. Nous pouvons y penser un
peu comme une méthode de test. La méthode sera exécutée une fois par chaque élément
du tableau, selon le cas. Si tous les éléments réussissent
la méthode de rappel de test
, la valeur true sera renvoyée. Si un ou plusieurs
éléments ne réussissent pas la méthode de rappel
de test, false sera renvoyé. Voyons un exemple de base. Nous allons commencer par déclarer
une variable à l'aide de const, que nous appellerons des noms, affectera à ce tableau
contenant trois chaînes, API, Anna et Alice. Ensuite, nous allons utiliser
tous les tableaux Names. Nous disons que les noms pointent chaque
passe du rappel. Nous définissons un paramètre de nom. Le paramètre Name représente chaque élément
du tableau Names. Nous indiquerons si l'élément de nom
inclut la lettre A. Nous disons que le point de nom inclut. Nous transmettons la
lettre majuscule a comme argument. Sauvegardons cela
et lançons le code. Les éléments du
tableau Names contiennent la lettre a. La valeur true est
donc renvoyée. Comme nous travaillons avec ES6, mettons à jour la fonction
pour qu'elle devienne une fonction flèche. Nous avons supprimé les accolades, le mot-clé retour et
ajouté une fonction flèche. Sauvegardons cela
et lançons le code. Rien n'a changé, donc
nous revenons véritablement. Si nous avions des éléments dans notre tableau de noms qui
ne contenaient pas la lettre a, nous serions renvoyés faux. C'est parce qu'il ne
faut qu'un seul élément ne
passe pas la fonction de test
pour que tout ne passe pas. Nous allons ajouter le nom
Bob au tableau Names. Sauvegardons cela
et lançons le code. Nous recevons un faux retour. Si nous travaillions avec
une structure de données imbriquée, chaque méthode
peut être très utile pour évaluer certains
éléments de données. Par exemple, si nous avions une liste de résultats de tests d' étudiants
et que nous voulions savoir si tous nos
élèves qui réussissent le test, nous pouvions les utiliser tous. Mettons en œuvre cela. Déclarera une
variable à l'aide de const. Nous appellerons ça des résultats. Nous allons attribuer à cela un tableau
contenant trois objets. Les objets contiendront le nom et la partition d'un
étudiant. Le premier objet que nous avons
défini le nom de Billy. Et un score de 90. Le deuxième objet que nous avons défini
le nom pour toucher le score sur 100. Et dans le dernier objet, nom, Laura, score à 80, va maintenant déclarer une autre
variable en utilisant const, que nous appellerons dead pass. Nous allons attribuer à cela
le résultat de l'appel de tous les résultats de notre tableau de résultats. Nous disons des résultats. Tous les. Nous passons au rappel. Et nous allons définir
un paramètre étudiant et vérifier si le
score des points de l'étudiant est supérieur à 50. Ajoutons un
journal de console pour did pass. Enregistrez ceci et exécutez le code. Qu'est-ce que les élèves
de notre tableau
de résultats obtiennent une note
supérieure à 50 ? Nous recevons donc le retour de l'arbre. Si l'un des élèves
avait obtenu un score inférieur à 50, nous obtiendrions un faux retour. Passons donc à certains. Lorsque nous en utilisons,
nous transmettons une méthode de rappel, généralement une fonction
anonyme, la méthode de rappel doit
renvoyer un booléen. Comme pour tous, nous pouvons y penser comme une méthode
de test. La méthode sera exécutée une fois par chaque élément
du tableau, quelle chanson est appelée
si l'un des éléments réussit la méthode de rappel de test
que true sera renvoyée. Si aucun des éléments n'a réussi
la méthode de rappel de test, false sera renvoyé. Pour clarifier, certains retourneront true si l'un des éléments
a réussi la fonction de test, alors que tous retournent true uniquement si tous les éléments
réussissent la fonction de test. Si vous ne cherchez pas tout
pour réussir la fonction de test et
seulement un seul élément, alors certains sont une
méthode utile à utiliser. Examinons un exemple basique de certains vont supprimer tout notre code. Nous allons créer une
variable à l'aide de CONST, et nous l'appellerons des âges. Qu'est-ce qui a été attribué à
cela. Et déjà. À l'intérieur du tableau, vous placez
les valeurs de 1 à 101. Créons maintenant
une autre variable en utilisant const appelée supérieure à cinq, stockera dans ce résultat le résultat de
l'utilisation de certains sur le tableau de l'âge est. Nous disons la somme des points d'âge, et à l'intérieur des parenthèses, nous définissons le paramètre âge. L'utilisation d'un retour implicite permettra vérifier si l'âge est
supérieur à cinq ans. Ajoutons maintenant un
journal de console pour plus de cinq. Sauvegardons cela
et lançons le code. Un élément de l'âge
du rayon est supérieur à cinq. Nous sommes donc véritablement retournés. Si nous modifions le tableau des âges pour
qu'il ne contienne que des nombres inférieurs à cinq, nous deviendrions faux. Cela est dû au fait que
rien à l'âge du rayon ne réussirait la fonction
test. Donc, dans notre code, modifions la valeur
dix par trois. Enregistrez ceci et réexécutez
le code. Nous sommes maintenant faux.
36. Notation constructeur d'objets: Bonjour. Dans cette vidéo, nous
allons regarder les constructeurs
d'objets
en JavaScript. Javascript offre plusieurs
façons de créer des objets. L'un d'entre eux est appelé notation constructeur d'
objets. Nous pouvons commencer par
créer simplement un objet. Nous créons une variable pour stocker
l'objet, puis nous utilisons le nouveau mot-clé et le constructeur d'objet
pour le créer. Nous allons le faire dans
notre éditeur de texte. Nous déclarons une variable
appelée House, qui
sera initialement non initialisée. Ensuite, nous utilisons le nouveau mot-clé et le constructeur d'objet
pour créer l'objet. Si nous ajoutons une console
journal de la maison, nous pouvons inspecter l'objet, sauvegarder le code et l'exécuter. Nous recevons un objet vide renvoyé. Actuellement, notre maison
ne fait pas grand-chose. Nous pouvons ajouter certaines
propriétés à l'objet. Pour ajouter une propriété à l'objet, vous pouvez utiliser la notation Dr.
bracket, mais vous utilisez le nom de l'objet suivi de la propriété que
vous souhaitez ajouter. Ajoutons certaines propriétés dans
notre code à l'aide de la notation par points. Nous ajouterons des propriétés
pour le nom de la maison, chambres et la date de construction. Il dira que le nom du point de maison
est égal aux fenêtres de chaînes. Ensuite, nous dirons que les
chambres de la maison sont égales à cinq. Enfin, nous dirons que le point de
maison est égal à 1998. Maintenant, sauvegardons cela et
inspectons à nouveau notre objet. Les propriétés sont désormais ajoutées à
l'objet maison, mais ce n'est pas très dynamique. Nous voudrions peut-être ajouter une méthode
pour renvoyer une certaine valeur. Dans notre exemple, nous utiliserons une méthode pour renvoyer le
nom de la maison. Pour ajouter une méthode à un objet, nous utiliserons à nouveau la notation par points. Nous utilisons ensuite le mot-clé fonction suivi d'accolades. À l'intérieur des accolades, remplacez le code de la méthode. Allons y aller. Nous utilisons donc le nom de notre
objet, qui est maison, suivi d'un point, suivi de ce que nous
voulons
appeler notre méthode , qui a GetName. Nous utilisons maintenant le mot-clé fonction. À l'intérieur de la fonction, la
propriété name de notre objet sera renvoyée. Sauvegardons cela
et lançons le code. Maintenant, lorsque nous inspectons à nouveau notre objet
maison, nous pouvons voir que la
méthode GetName a été ajoutée en tant que propriété
à l'objet. Essayons d'utiliser la méthode. Nous obtenons la valeur du nom d'
une maison qui nous est retournée. Nous pouvons mettre à jour les
propriétés de notre objet à l'aide de la notation par points
ou entre crochets. Essayons donc de changer le
nom de la maison en chaîne. Et nous utiliserons la notation par points. On va dire le nom du point de la maison. Nous allons définir cela à la même manière. Sauvegardons cela
et lançons le code. Nous pouvons voir que la valeur de la propriété name
a été mise à jour. Nous pouvons supprimer une propriété à
l'aide du mot-clé delete suivi du nom de la
propriété que nous souhaitons
supprimer . Essayons ça. Nous utilisons le mot-clé delete
suivi du nom du point maison. Sauvegardons cela
et lançons le code. y a désormais aucune
propriété de nom dans notre objet. Utilisons la
notation entre crochets pour ajouter la propriété en tant
que fenêtres de chaînes. Cela peut également être fait
avec la notation par points. Nous utilisons le nom de l'objet, les crochets
à l'intérieur desquels nous
passons une chaîne avec la clé de
propriété que nous voulons ajouter. Nous passons donc en nom. Nous avons défini cela comme égal
aux saules à cordes. Sauvegardons cela
et lançons le code. Nous avons maintenant le nom de la
propriété dans notre objet maison. L'approche ci-dessus fonctionne très bien. Mais il y aura des moments
où vous
voudrez probablement utiliser un objet
plusieurs fois. Vous souhaitez peut-être
représenter plusieurs utilisateurs. Dans notre cas, nous voudrions peut-être
créer plusieurs maisons, mais utiliser des propriétés similaires l'aide de la notation constructeur, nous pouvons utiliser un objet pour agir comme modèle ou Blueprint
pour d'autres objets. Créons une fonction maison. Pour ce faire, supprimerait tout notre code et créerait
une déclaration de fonction. Nous appellerons cette maison. Nous utilisons une majuscule
pour la fonction maison. On peut donc distinguer que la fonction utilise la notation
constructeur. Cela n'a aucun impact
lors de l'exécution du code, mais il s'agit d'une convention de dénomination
utilisée en JavaScript. À l'intérieur des parenthèses, le nom des paramètres sera
ajouté. Chambres. Construit. Dans le
corps de
la fonction, il faut utiliser ce mot-clé que
chaque propriété et méthode appartient à l'instance
individuelle de l'objet
créé avec la fonction. Je dirai ça. Le nom du point est égal à nom. Les chambres sont égales à des chambres. Ce point est égal à construit ajoutera également notre méthode. Nous allons donc dire que ce point GetName est égal à la fonction. À l'intérieur de la fonction, ce nom de point est
renvoyé. Nous sommes maintenant prêts à utiliser notre fonction et à créer une
instance de l'objet. Nous allons le faire en utilisant
le nouveau mot-clé, suivi d'un appel
à la fonction qui crée l'objet. Dans notre maison de cas. Nous transmettons les propriétés des paramètres de la maison comme
arguments à la fonction. Voyons un exemple. Nous allons créer une variable
appelée manoir. Au départ, cela
ne sera pas initialisé. Mais nous créons ensuite
l'instance de l'objet maison
à l'aide du nouveau mot-clé. Nous passons à la manière des cordes. Le paramètre name,
la valeur cinq. Pour le paramètre de chambres 1998
pour le paramètre construit. Console consigne l'instance du
manoir. L'objet a été créé
avec les valeurs que nous avons transmises lorsque nous avons
créé l'objet. Essayons de créer une deuxième
instance de l'objet. Va créer une autre variable
appelée Willow house. Cette fois, nous
passerons dans la corde Willow pour le
nom des chambres et 2 000 pour
l'année de construction. Sauvegardons cela
et lançons le code. Nous avons maintenant deux objets, le manoir et le dessous de la maison. Les deux objets
représentent des maisons, mais les valeurs du nom, pièces et des propriétés construites sont individuelles aux objets
spécifiques créés. Nous pouvons le confirmer lorsque nous utilisons la méthode GetName sur
chacun de nos objets. Dans notre code, nous allons dire
Willow House dot GetName. Et nous devons utiliser des parenthèses car nous voulons
appeler la méthode. Ensuite, nous dirons le
manoir point GetName. Enregistrez ceci et exécutez le code. Nous obtiendrons le retour pour le
retour de l'objet de la maison de saule pour le
manoir. Objet.
37. Présentation des prototypes: Dans cette vidéo, nous allons introduire des prototypes
en JavaScript afin de pouvoir passer à autre chose et mieux
comprendre les classes ES6. Commençons par discuter du JavaScript
orienté objet. Javascript n'est pas un
langage basé sur les classes et n'
implémente pas de programmation
orientée objet au sens traditionnel. Il fournit des fonctionnalités
et des modèles qui
nous permettent d'utiliser des concepts de
programmation orientés objet. Nous appelons cela l'héritage
prototypal. Quel est le prototype
en JavaScript ? Car le concept central
du prototype en
JavaScript est qu' un objet peut hériter propriétés ou
de méthodes d'un autre objet. Si vous envisagez un arbre généalogique, les personnes du bas se
sont liées à une seule
personne en haut. Vous pouvez suivre l'itinéraire
jusqu'au sommet étape par étape. En JavaScript, vous pouvez
penser qu'un prototype est un Blueprint, un modèle ou un objet de base
contenant des méthodes
auxquelles n'importe quelle instance de l'objet créé peut accéder. Si nous n'avions pas
le prototype, nous devrions
définir les méthodes sur chaque instance
d'un objet, ce qui ne
serait pas très efficace. Il mangerait beaucoup de mémoire. Il existe deux types
de prototypes que nous devons comprendre la propriété prototype et le prototype de l'
objet lui-même. Commençons par la propriété
prototype. Lorsque nous utilisons
des méthodes JavaScript telles que pop on a array ou inclut lorsque
nous travaillons avec des chaînes, nous utilisons
des méthodes intégrées dans JavaScript. Jetons un coup d'œil à
cela visuellement dans la console. Nous pouvons commencer par accéder simplement à la propriété prototype sur le constructeur du prototype de baie. Nous tapons un prototype de points de réseau. Maintenant, lorsque nous inspectons cela, nous pouvons voir le constructeur. Nous pouvons voir toutes les méthodes. Créons maintenant un
tableau et voyons comment
afficher la propriété prototype
à l'intérieur du tableau. Nous allons créer une
variable à l'aide de const. Nous appellerons cela notre réseau. Ceci est déclaré et
initialisé avec un tableau contenant
les valeurs 123. Plus tard, nos tableaux inspectés lorsque nous voulons supprimer un élément de
la fin d'un tableau, nous pouvons utiliser la méthode pop. D'où cela vient-il ? Moins il faut inspecter l'ARRA petit. Chaque objet en JavaScript
possède une propriété prototype. Il s'agit d'une propriété interne qui est marquée par les
doubles crochets qui la entourent. Lorsque nous sélectionnons la propriété
prototype, nous pouvons voir les
méthodes disponibles et, dans notre exemple, elles héritent du constructeur du
tableau. Nous pouvons également utiliser une
méthode get prototype. Et cela renverra la propriété prototype
d'un objet donné. N'oubliez pas que les tableaux sont un type d'objet
spécial. Il est intéressant de noter que
vous pouvez trouver
des exemples qui utilisent un
soulignement, un trait de soulignement. Soulignement, soulignement. Il s'agit d'une caractéristique héritée
et ES lint possède même une règle appelée no proton pour se
protéger contre son utilisation. La propriété Underscore,
Underscore,
Underscore, Underscore expose
le prototype interne de l'objet qu'il est préférable d'utiliser. Obtenez un prototype de. Essayons ça. Donc nous disons objet point, obtenez le prototype d'un puis nous passons la variable de
notre tableau. Allons inspecter ça. Nous pouvons comparer cela
avec les méthodes répertoriées sur le site Web MDM. Toutes les baies peuvent
accéder à ces méthodes, mais elles ne les ont pas
réellement comme propriétés sur l'
effacement elles-mêmes. Ce sont les méthodes
que chaque baie peut utiliser. Mais au lieu de les définir individuellement sur
chaque tableau, les méthodes sont définies plutôt
sur l'objet prototype. Cela n'est pas spécifique à une augmentation, mais également à d'autres
objets intégrés dans JavaScript. Nous pouvons également l'utiliser lorsque
nous créons des objets. Dans la vidéo suivante, nous allons regarder cela un peu plus.
38. Plus de prototypes: Bienvenue de retour. L'objet qui est la valeur de
la propriété prototype, est le prototype de
l'objet que nous inspectons. S'il n'existe pas,
il le sera maintenant. Lorsque nous utilisons la
méthode pop sur notre tableau, l'interpréteur JavaScript recherchera initialement la
méthode sur le tableau. Lorsqu'il ne le trouve pas,
il regardera ensuite
le prototype. Nous appelons ce processus l'
héritage prototypal , la chaîne
prototype. Ce processus pourrait continuer et encore. Mais il vaut mieux ne pas
créer une chaîne complexe car le débogage peut
devenir vraiment déroutant. À l'aide de la chaîne prototype, vous pouvez stocker une fonction
sur un seul objet et l'interprétation fonctionne jusqu'à cet objet s'il ne le
trouve pas dans le premier objet Examinons un
exemple dans un code. Déclarera la
fonction constructeur appelée tracker de jeu. Permet de définir le nom et les paramètres de
résultat. Nous allons définir ce nom sur le même nom. Et nous allons définir ce résultat de points. Résultat égal. Ce qui est stocké en mémoire est stocké en tant que fonction
avec un objet. L'objet possède une propriété
prototype, qui est un objet vide. Toutes les fonctions
créées à l'aide de la piste de jeu. Un constructeur
aura accès à la propriété prototype à
l'intérieur de la fonction. Nous définissons le nom et
le résultat à l'aide de ceci, ils font référence à l'
instance actuelle de l'objet. Créons maintenant une variable
appelée joueur un. Lorsque cette opération est exécutée, elle sera
initialement désinitialisée, mais nous utiliserons ensuite
le nouveau mot-clé et une nouvelle instance
de tracker de jeu. Lorsque nous utilisons le nouveau mot-clé, la propriété prototype est définie, qui sera une référence
à l'objet Game Tracker. Ajoutons le nom Bob, le résultat étant quatre. Ajoutons également un
journal de console pour le joueur 1. Sauvegardons cela
et lançons notre code. Si nous inspectons le joueur, on verra le nom et les propriétés des
résultats. Essayons maintenant de trouver le
constructeur du joueur 1. De retour dans notre code, nous
ajouterons un journal de console. Et à l'intérieur de ça, on dira
objet point, obtenir un prototype. Et nous allons passer le joueur 1. Sauvegardons cela
et lançons le code. Nous obtenons le tracker de jeu
en tant que constructeur. Utiliser le prototype. Nous pouvons également ajouter une méthode
au prototype. ajouterai un pour
commencer notre jeu. Nous disons le prototype de
point de suivi de jeu dot Start. Ensuite, nous définissons cette valeur égale à
une fonction car c'est une méthode à l'intérieur du corps qui
retournera un littéral de modèle. Nous utilisons les tiques du dos, nous
dirons bonjour. Ensuite, nous allons interpeller
le nom. Nous disons donc ce nom de point. Après cela, nous dirons que
le jeu est prêt. Nous allons maintenant inspecter à nouveau un objet
du joueur. Nous sommes en mesure de constater que
la fonction de démarrage est stockée dans le prototype. Nous pouvons maintenant utiliser la
fonction de démarrage de notre joueur 1. Essayons ça. Dans un journal de console, le
joueur indique qu'un point s'est arrêté. Parce que nous allons
appeler la méthode start. Sauvegardons cela
et lançons le code. Nous recevons la corde avec le nom de notre
joueur renvoyé.
39. Présentation des cours: Maintenant familiarisé avec
les constructeurs et les prototypes, examinons les classes ES6. Les classes sont essentiellement sucre
syntaxique pour
créer des objets. Cela signifie que sous le capot, tout fonctionne
de la même manière que l'utilisation de la notation
constructeur d'objets, mais elle est beaucoup plus lisible
et plus facile à utiliser. Comme pour tout ce qui utilise du sucre
syntaxique, il est toujours extrêmement utile et important pour comprendre ce qui
se passe sous le capot. Lorsque nous utilisons la
syntaxe de classe en JavaScript, nous n'avons pas à
ajouter manuellement de méthodes au prototype. Nous utilisons plutôt un
mot-clé appelé classe. Nous ajoutons un constructeur, puis nous ajoutons des méthodes. Décomposons ça
et jetons un coup d'œil. Dans notre exemple, nous utiliserons une
classe pour créer un chien. Ensuite, nous allons
créer des instances de ce chien. Pour commencer à utiliser une classe, vous utilisez le mot-clé de classe suivi de ce que vous
souhaitez que votre classe soit refroidie. Habituellement, le nom de la
classe est majuscule. Nous pouvons donc dire que c'est un cours. C'est comme lorsque nous utilisons la notation du constructeur d'
objets. Allons-y dans
l'éditeur de texte. Nous utilisons le mot clé de la classe et continuons à créer
notre classe de chiens. Ensuite, nous utilisons un ensemble d'
accolades pour enfermer notre classe. Lorsque nous créons une classe, nous ajoutons ce qu'
on appelle un constructeur. Un constructeur est une fonction. Il s'exécutera immédiatement chaque fois qu'une nouvelle instance
de notre classe est créée. Le constructeur ressemble un peu à une fonction constructeur standard. Lorsque nous utilisons la notation du
constructeur d'objet. Ajoutons ça à notre classe. De retour dans l'éditeur de texte. À l'intérieur des
accolades de la classe, nous utilisons la fonction constructeur. Pour créer une nouvelle
instance de la classe. Vous utilisez exactement la même
syntaxe que lorsque vous créez une nouvelle instance à l'aide de
la notation constructeur. Pour ce faire, nous créons un nom pour notre instance
à l'aide d'une variable. Ensuite, nous utilisons le signe égal
suivi du nouveau mot-clé, puis le nom de notre classe. Lorsque nous le faisons, le constructeur
s'exécutera immédiatement. Créons un chien
que nous appellerons coquelicot. Nous commençons par créer une
variable à l'aide de const. Et nous donnons le chiot
identificateur. Nous utilisons le signe égal. Ensuite, le nouveau mot-clé, suivi du nom de
notre classe, qui est sombre. Ajoutons maintenant un journal de
console. Pour Puppy. Enregistrera cela et exécutera le code. Nous voyons le chien. Et nous pouvons voir lorsque nous inspectons la propriété prototype que le constructeur a
été défini sur chien, classe ne fait pas grand-chose actuellement. Dans la vidéo suivante, nous allons ajouter quelques
propriétés à notre classe.
40. Plus sur les cours: Bienvenue de retour. Dans la dernière vidéo, nous avons introduit des cours dans ESX. Continuons avec
cela et nous
examinerons l'ajout de
propriétés à notre chien, ajouterons le nom, l'âge et la race. Nous pouvons les définir dans
le constructeur. Pour ce faire, nous ajoutons
les paramètres à la fonction constructeur. Ensuite,
nous pouvons ajouter les propriétés à notre instance de l'objet. Nous transmettons les valeurs des
paramètres sous forme d'arguments. Lorsque nous créons l'
instance de notre objet. Lorsque nous créons l'instance de notre objet à
l'aide du nouveau mot-clé, cela se réfère
automatiquement à l'instance de l'objet
que nous créons. Mettons
cela en œuvre dans notre classe. Nous commençons donc par ajouter le nom, l'âge et la race des paramètres du
constructeur. Ensuite, nous définissons ce
nom de point, deux noms égaux, ce point, l'âge à h, cette race à la race égale. Où nous créons l'
instance de notre objet. Nous allons ajouter un chiot. L'argument
du paramètre name. Pour le paramètre h, il en
ajoutera deux. Pour le paramètre race, nous ajouterons l'appel de chaîne. Sauvegardons cela
et lançons le code. Lorsque nous inspectons l'
objet chiot dans la console, nous pouvons voir le nom, âge et
les propriétés de race définis dans
le constructeur. Ceci est fait parce que nous
utilisons le nouveau mot-clé. À l'intérieur du constructeur. Nous disons que vous ajoutez un nom, âge et une propriété de race, et définissez ces propriétés
sur les valeurs des paramètres. Les valeurs des paramètres
sont transmises sous forme d'arguments lorsque nous appelons new
with the dog class. Nous créons l'instance de coquelicot. L'un des principaux avantages de l'utilisation classes est que nous n'
avons pas à dériver l'annonce, les méthodes utilisant le prototype. Pour ajouter une méthode, nous utilisons le nom de la méthode suivi de
parenthèses et d'accolades. La méthode devient alors une
méthode sur le prototype de chien, mais pas sur les instances
individuelles. C'est comme lorsque
vous ajoutez les méthodes à l' aide de la syntaxe du prototype. Mettons en œuvre une méthode
qui retournera nom du
chien à l'aide d'un
littéral de modèle dans notre code. Après le constructeur,
nous ajouterons la méthode MyDog. À l'intérieur du corps de celui-ci, un littéral de gabarit sera
renvoyé. Cela dira que mon chien est code. Ensuite, nous allons intercaler
dans ce nom de point. Sauvegardons cela
et lançons le code. Nous obtenons notre objet. Lorsque nous examinons l'
incidence dans le centre commercial, nous pouvons constater que la
méthode MyDog a été ajoutée à la
propriété prototype de l'instance. Nous pourrions créer une autre
instance de notre classe, qui aura son
propre ensemble de propriétés. Créons une autre instance, et nous l'appellerons le mien. Pour ce faire, nous allons créer une
variable appelée mon nom. Nous utilisons le nouveau mot-clé, le nom de classe chien. À l'intérieur des parenthèses
ajouteront Milo. Pour le nom. L'âge s'ajoutera cinq ans. Pour la race, ajoutera le parc. Ajoutons également un journal de console pour mineur qui enregistrera cela
et exécutera le code. Nous pouvons voir que l'
instance de myéline est en cours création et que le
constructeur est réglé sur chien. Dans la vidéo suivante, nous
allons voir comment utiliser notre méthode.
41. Utilisation des cours: Nous pouvons maintenant essayer d'utiliser notre
méthode MyDog sur les deux instances. Pour ce faire, nous utilisons l'identifiant
de l'instance d'objet, suivi d'un point, suivi de la méthode. Essayons ceci,
ajoutera deux journaux de console. Dans le premier,
on dira chiot point,
puis on appellera MyDog. Le deuxième journal de la console
indiquera milo point, puis utilise la méthode MyDog. Sauvegardons cela
et lançons le code. Nous recevons les noms des deux
chiens retournés dans la ficelle. Nous pourrions également appeler une méthode à partir d'une autre
méthode de la classe. Si nous voulions le faire, nous l'utilisons simplement. Créons une autre
méthode qui renvoie le nom et l'âge des instances
adultes. Nous allons créer une autre
méthode appelée info chien. À l'intérieur de cette méthode
retournera également un littéral de modèle, injectera dans la méthode MyDog. Ensuite, nous dirons que c'est, puis nous injecterons
dans la propriété de l'âge. Après ça, on dira des années. Modifions nos journaux de console
pour utiliser la méthode d'information sur le chien. À la place. Nous sauvegarderons
cela et exécuterons le code. Nous recevons les nouvelles
cordes renvoyées avec le nom et l'
âge des ténèbres. Et la méthode MyDog
a été
appelée avec succès à l'intérieur de la méthode
Dog Info.
42. Présentation des promesses: Dans cette vidéo, nous allons
présenter des promesses, mais commençons par répondre à la question : qu'est-ce qui
est asynchrone ? Habituellement, lorsque vous entendez parler de
promesses en JavaScript, vous entendez également le
mot asynchrone. Mais qu'est-ce qui est asynchrone ? Eh bien, nous avons d'abord un synchrone. Synchrone signifie quelque chose qui est effectué étape par étape. Lorsque vous marchez, vous mettez un pied
devant l'autre. Et vous ne faites pas
les deux en même temps, sauf si vous sautez. Un autre exemple est d'
attendre qu'une bouilloire bouille avant de rendre une
tasse de thé asynchrone. autre côté, cela signifie que
vous pouvez faire d'autres choses en arrière-plan sans
que tout s'arrête et n'attende. C'est un peu comme dire que
vous pourriez regarder télévision pendant que vous attendez
que la bouilloire bouille, plutôt
que de se tenir debout et de regarder la bouilloire
qui l'attend. JavaScript est donc ce que nous appelons
un langage à thread unique. Cela signifie qu'une seule chose peut se produire à la fois et à la fois, JavaScript
asynchrone est la façon dont les tâches
en arrière-plan,
telles que les demandes aux serveurs, peuvent se produire sans que tout soit
grincé. à un arrêt, attendant que la
tâche unique soit terminée, cela signifie que les tâches
asynchrones exécutées en dehors du
flux principal du programme. Ce qu'il promet dans
votre vie quotidienne. Vous promettez souvent
aux gens quelque chose à l'avance si vous le faites
réellement, peut-être que vous dites, je
promets de nettoyer la vaisselle ou
je promets d'acheter du lait. C'est essentiellement ainsi que les
promesses fonctionnent en JavaScript. Lorsque vous utilisez une promesse, vous écrivez généralement code
asynchrone
et vous faites une promesse ou une transaction pour quelque chose qui
va être fait. Une fois la promesse faite
, la tâche est
exécutée ou échouée. C'est comme dire que
vous êtes
satisfait ou que vous avez échoué à votre
promesse d'acheter du fondu. Il y a deux parties
à comprendre lorsque vous travaillez
avec des promesses, la
création de la promesse,
puis comment utiliser la promesse. Commençons par examiner
comment créer une promesse. Une promesse est une fonction
constructeur, vous devez
donc utiliser le nouveau mot-clé. Et la promesse doit être en
majuscules lorsque vous en créez une
, la promesse prend comme argument avec deux paramètres,
résolution et rejet. Résolvez et rejetez des
fonctions pouvant être froides Elles doivent
donc être exécutées entre parenthèses, résoudre ou rejeter. Habituez-vous à déterminer ce qui
se passe lorsque la promesse est exécutée. Examinons la syntaxe de base
pour créer une promesse. Nous allons déclarer une
variable en utilisant cond, ce que nous appellerons notre promesse. Nous utilisons ensuite le
signe égal et le nouveau mot-clé. Ensuite, nous utilisons la promesse. Nous transmettons Resolve et
rejetons comme paramètres. En dehors de cela, vous ajouterez un journal de
console pour notre Promise. Sauvegardons cela
et lançons le code. Lorsque nous inspectons la promesse, nous voyons l'
état de la promesse dit « En attente ». Examinons donc les états Promise. Il y a trois États
dont les promesses peuvent être en attente, respectées
et rejetées. La promesse que nous avons créée ne résout ni ne
rejette rien. Il restera indéfiniment dans l'état en attente est un peu
comme quelqu'un qui
vous attend pour aller acheter
une fusion pour compléter une promesse que nous utilisons
Resolve overjet. Résoudre signifie que la promesse réussit et que le rejet
signifie qu'elle échoue. N'importe quel argument peut être transmis
en résolution et en rejet. Mais souvent, lorsque nous
travaillons avec des promesses, nous faisons des demandes de données. Il s'agit donc parfois d'un objet dont vous pouvez extraire
des données. Dans la vidéo suivante, nous allons passer à
la réalisation de la promesse.
43. Travailler avec des promesses: Bienvenue de retour. Continuons à
regarder les promesses. Mettons à jour notre exemple
pour montrer le résultat de la résolution puis du
rejet de la promesse. Nous allons commencer par ajouter un rejet. Sauvegardons cela
et lançons le code. Nous pouvons voir que l'état a été mis à jour pour être rejeté
et nous obtenons une erreur. Changeons maintenant
cela pour résoudre le problème. Enregistrera cela et
réexécutera le code. Nous voyons maintenant la promesse que
les États ont respectée. Passons maintenant à la mise à jour notre exemple pour qu'il
représente mieux une demande. Nous ajouterons une variable en utilisant
la gauche appelée Dead get milk. Nous allons mettre cela à vrai. Ensuite, nous ajouterons une instruction if
et nous allons transmettre did get milk ajoutera solve dans
le corps de l'instruction if, et nous transmettrons
la chaîne d'argument. Nous avons eu le lait que nous utiliserons autrement. Définissez, rejetez. Cette fois, nous allons
passer l'argument chaîne. Nous n'avons
pas eu le lait. Sauvegardons cela et lançons le code parce qu'ils obtiendraient du lait est vrai. La promesse est résolue
avec le message. Si nous fixons la mise
à la force, la promesse sera rejetée. Changeons la
variable de montage a été égale à false. Nous allons enregistrer cela et nous avons
déplacé le code. Cette fois, nous voyons que la
promesse a été rejetée et nous obtenons la chaîne
que nous avons transmise en rejet. Nous pouvons les utiliser pour exécuter du code. Une fois la promesse
résolue, il s'agit alors d'une méthode qui sera exécutée immédiatement après la réalisation de la promesse
. Nous pouvons leur transmettre un rappel, qui contient le code que nous
exécutons une fois la
promesse remplie. Mettons à jour notre
exemple pour le montrer, nous allons
le remettre à vrai. Maintenant, continuons à
utiliser la méthode then. Nous disons que je vais promettre Dot. Ensuite, nous définissons un paramètre
pour le résultat, que nous appellerons des rayons. Ensuite, nous utilisons la syntaxe de la
fonction flèche. À l'intérieur, nous dirons console.log. Reste. Sauvegardons cela
et lançons le code. Lorsque la promesse est exécutée, nous obtenons le statut accompli, mais nous voyons également le paramètre
rouge imprimé. Le paramètre reste est
transmis à partir de l'argument que nous donnons
à la méthode de résultat. Changeons l'
argument que nous donnons à la méthode des résultats pour consolider
notre compréhension de cela. Nous allons donc changer l'
argument pour qu'il s'agisse d'un objet. Définissez le message clé avec la chaîne comme valeur
dans le journal de la console R pour les rayons. Changeons ça pour qu'il s'
agisse d'un message res dot. Sauvegardons cela
et lançons le code. Le message est imprimé à l'écran lorsque la
promesse est rejetée. Nous gérons cela en utilisant des prises. Catch fonctionne de la
même manière que lorsque nous les
utilisons pour résoudre
la promesse. Les prises seront exécutées immédiatement après le rejet de la
promesse. Voyons un exemple. Nous allons changer la variable « Dead get
milk » pour qu'elle soit fausse. Après l'avoir utilisé,
on dira « dot catch ». Définissez un paramètre d'erreur. Nous allons utiliser la syntaxe de la
fonction flèche. Ensuite, nous ajouterons un journal de
console en cas d'erreur. Sauvegardons cela
et lançons le code. Cette fois, lorsque le code s'exécute, la promesse est rejetée. Le code et la capture se trompent. Et nous comprenons l'argument,
nous passons à l'appel à
rejeter imprimé sur la console.
44. Modules: Les modules sont un terme courant que nous rencontrons
dans la programmation. Si nous regardons cela de
manière quotidienne, vous pouvez le considérer un
peu comme un morceau de lego ou un simple
wagon de train. codage, en particulier lorsque
nous créons une application, pour
des raisons d'organisation, nous pouvons séparer le code dans des fichiers ou des modules
distincts. L'une des principales
raisons pour lesquelles nous agissons ainsi est que les responsabilités sont
réparties en plusieurs parties distinctes. Cela rend le programme
beaucoup plus sûr contre les erreurs et beaucoup plus
facile et logique à utiliser. En résumé, un module est
une partie ou un élément du code qui encapsule ou
contient sa propre logique
et ses propres responsabilités pour
l'application ou le programme Les modules facilitent l'organisation
du code et encouragent sa réutilisation,
ainsi que sa maintenabilité Dans ES six, un
système de modules a été introduit, qui a encouragé cette séparation et facilité la réutilisation du code Il y a deux concepts
que vous devez comprendre. Exportation et importation. Lorsque vous créez
un module, vous devrez
probablement pouvoir importer dans une autre
partie de l'application. Pour pouvoir l'importer dans une autre partie
de l'application, il faut l'exporter. Lorsque vous commandez quelque chose
depuis l'étranger, il doit passer par
un processus en plusieurs étapes pour vous parvenir dans votre pays. Le fournisseur devra
démarrer le processus en
emballant l'article et
en l'envoyant pour expédition. Cela peut être considéré comme
le processus d'exportation. Plus tard, lorsque l'article arrive
au port de votre pays, il peut passer par
un processus douanier avant d'être autorisé à entrer dans le pays et de
vous être envoyé via les services
postaux de votre pays. Cela peut être considéré
comme le processus d'importation. Nous pouvons maintenant considérer le
processus dans le code. Lorsque nous créons un module, avant de pouvoir l'utiliser dans une autre partie de l'application,
vous devez l'exporter. Ensuite, dans la partie
de l'application où vous souhaitez utiliser le morceau
de code ou le consommer, nous devrons l'importer afin qu'il puisse ensuite être
utilisé dans ce fichier. Il existe deux types d'exportations, les exportations
nommées et les exportations
par défaut. Commençons par
examiner les exportations nommées. Je vais créer un
fichier appelé names. Dans ce fichier, je vais créer une variable pour créer le prénom et le nom de famille d'une
personne. Je vais également
exporter la variable. Je vais commencer par taper export
pour exporter la variable. Alors je dirai constant. Utilisez un nom égal à. J'ajoute ensuite des parenthèses car je
souhaite définir certains paramètres. J'ajouterai le premier
paramètre appelé prénom, une virgule, puis j'ajouterai un autre
paramètre appelé nom J'utilise une
fonction flèche ici, donc je vais utiliser une flèche, puis je vais renvoyer
une chaîne entrelacée. Je commence par un ensemble de
baptis, puis j'utilise le signe du dollar
et des bretelles bouclées. J'interpole dans le prénom. Je mets un espace
, puis je répète le processus
pour le deuxième nom. J'ajoute le signe 1$, un jeu
d'accolades, et j'interpole
dans le deuxième nom Dans le fichier, tout ce que nous voulons
faire est de
déconnecter la valeur renvoyée par la console. Je vais taper le journal des points de la console, un ensemble de parenthèses, et à l'intérieur des parenthèses, je vais dire le nom d'utilisateur pour appeler la fonction et un
ensemble de Pour le premier nom, je vais passer
l' argument John et
pour le second nom D. Cela ne fonctionnera pas encore, et la raison en est que nous n'
avons rien importé. Pour ce faire,
en haut du fichier, nous devons utiliser le mot clé
import. Ensuite, nous utilisons bretelles
bouclées pour contenir le
nom du produit que nous importons Nous importons le nom d'utilisateur.
Nous l'ajoutons ici. Enfin, nous devons indiquer l'emplacement d'où
nous l'importons. Nous disons « point forward slash name ». Essayons maintenant
et exécutons la fonction. Lorsque le code s'exécute, je vois John Doe imprimé
dans la console, ce qui nous permet de voir le
résultat du nom d'utilisateur. À ce stade, vous devez avoir une idée
des exportations nommées. Examinons donc les exportations par défaut, qui sont l'autre
type d'exportation. Nous allons revenir au nom
du fichier JS. Nous conserverons le code dont nous disposons, mais nous devrons supprimer
le mot clé d'exportation. Au lieu de cela, après la fonction, nous allons taper le nom d'utilisateur
par défaut d'exportation. Revenons maintenant
au fichier point JS principal et nous verrons comment ajuster
l'importation en conséquence. Nous allons conserver
le journal de la console, mais nous allons supprimer la ligne qui importait l'exportation nommée. Nous allons plutôt dire importer le nom d'
utilisateur à partir des noms. Exécutons à nouveau le code. Dans le terminal, nous pouvons voir
que rien n'a changé, et
le nom est toujours déconnecté. Cela nous prouve
que nous pouvons utiliser à la
fois des exportations nommées et des exportations par défaut. En résumé, les modules ES six nous
permettent d'organiser
et de réutiliser notre code, et en utilisant simplement l'
exportation et l'importation, nous pouvons maintenir des opportunités de réutilisation
du code simples. Exporter signifie que le code sera disponible ailleurs, et importer signifie que vous
souhaitez utiliser une
partie du code exportée. Les exportations nommées et par défaut sont les options dont nous disposons pour exportation. En général, les exportations
nommées sont meilleures lorsque vous disposez d'un
module doté de nombreuses fonctionnalités, car vous pouvez être sélectif quant à
ce que vous importez. Lorsque vous disposez d'une fonctionnalité unique ou
principale, exportations par défaut peuvent
être plus appropriées.