*MISE À JOUR* JavaScript Série complète 2023 - Partie 10 : Arrêts et boucles | CM Code_Zone | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

*MISE À JOUR* JavaScript Série complète 2023 - Partie 10 : Arrêts et boucles

teacher avatar CM Code_Zone, !false | funny, because its true

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Intro de cours - tableaux

      3:37

    • 2.

      Qu'est-ce qu'un tableau de tableau ?

      6:20

    • 3.

      Comment créer un tableau ?

      4:14

    • 4.

      Exemple de tableau

      4:29

    • 5.

      Intro au transformateur

      1:08

    • 6.

      Exemples d'itérateurs de mutateur

      6:26

    • 7.

      Pourquoi la boucle est-elle nécessaire

      3:46

    • 8.

      Boucle à travers un exemple de tableau

      8:06

    • 9.

      Exemple de boucle à travers les objets

      5:42

    • 10.

      formes

      17:39

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

58

apprenants

--

projet

À propos de ce cours

BIENVENUE DANS CE COURS DE SHARE SUR LES PROTOTYPES

C'est la partie 10 de ma série complète JAVASCRIPT

Ce que nous couvrons dans ce cours particulier ?

Nous couvrirons des tonnes d'information dans cette série entière, mais pour la partie 11, nous nous concentrerons sur les prototypes JavaScript.

JavaScript est un langage basé sur le prototype.

Mais qu'est-ce que cela signifie ? Eh bien, chaque fois que nous créons une fonction en utilisant JavaScript, le moteur JavaScript ajoute une propriété prototype à l'intérieur de cette fonction. Et cette propriété prototype est un objet où nous pouvons associer les méthodes et les propriétés. Pourquoi est-ce utile ? Réponse : il permet à tous les autres objets d'hériter automatiquement de ces méthodes et propriétés.

Vous ne pouvez pas vous éloigner des prototypes.

Tous les objets JavaScript héritent des propriétés et des méthodes d'un prototype. Permettez-moi de le dire d'une autre manière… chaque objet en JavaScript possède une propriété privée qui a un lien avec un autre objet. Cet autre objet s'appelle son prototype. Pour vous donner un exemple, l'objet Array hérite d'un prototype (l'objet Array.prototype pour être exact), l'objet Date hérite de Date.prototype, etc.

Même l'objet prototype lui-même (comme le prototype Array.prototype ou Date.prototype) a un prototype propre. Nous pouvons continuer à marcher jusqu'à ce qu'un objet soit atteint avec nulle comme prototype de celui-ci. Par définition, null n'a pas de prototype, et agit comme le dernier lien dans cette chaîne de prototypes.

Comme je suis sûr que vous pouvez déjà le dire, il y a beaucoup de prototypes

Alors laissez tomber.

Qu'est-ce que ce cours complet de Grand-maître JavaScript ?

JavaScript est le langage de script n°1 du web, où la plupart des contenus dynamiques et stylés sont traités par JavaScript en arrière-plan. Mais avant d'utiliser cette langue pour créer des sites Web dynamiques, vous devez avoir une compréhension ferme de son fonctionnement dans les coulisses.

À la fin de ce cours, vous serez capable de « parler » JavaScript en acquérant une compréhension de la façon dont le navigateur l'utilise, des variables, des objets et des fonctions, des différents types de données et de la façon de manipuler le contenu sur un site Web. Nous creusons plus en profondeur et créons nos propres méthodes de dialogue à partir de zéro. Nous apprenons sur la syntaxe de la flèche, la fonction Math.random(), en passant en boucle à travers les objets et les tableaux, en travaillant avec les dates. Nous examinons les prototypes, les moteurs JS, la pile d'exécution et bien plus encore !

Grâce à des exemples pratiques, ce cours vous aide à comprendre le JavaScript morceau. Et nous utilisons les dernières fonctionnalités et les meilleures du JavaScript en cours de route pour que vous puissiez rester en tête du pack.

QU'ATTENDEZ-VOUS POUR QUOI VOUS GET

Rencontrez votre enseignant·e

Teacher Profile Image

CM Code_Zone

!false | funny, because its true

Enseignant·e

Success takes sacrifice.

And sacrifice is something I know a lot about.

I am a self-taught developer so I understand how difficult and daunting it can be for a new comer. 

Today, I continue to code and stay on top of the latest technologies and programming languages. 

It's time to share the knowledge I've gained and to help others succeed. 

Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction du cours - Tableaux: Accueillez les compétences, disons les élèves à une autre classe. Et ce cours est super, super excitant. Si vous m'avez suivi pendant mes autres cours et autres cours, super, sinon moins, téléphone à. Cette clause est presque une classe autonome. Vous pouvez le regarder isolément. Mais bien sûr, je vous recommande toujours de passer par l'ensemble de la série parce que nous avons couvert beaucoup quand il s'agit de JavaScript. Maintenant, c'est la chose importante que vous devez comprendre. Quand il s'agit de programmation. Qu' est-ce que c'est ? Avec quoi travaillez-vous en tant que programmeur ? C' est juste une fille quand on travaille avec des points et on obtient différents types de données. Et c'est pourquoi l'une des classes précédentes, nous en avons beaucoup parlé et nous avons découvert que dans la programmation en JavaScript, fille peut être divisée en deux types. Vous avez des types de données de base ou primitifs. Et il a des types de données complexes, aka des objets, quand il s'agit de JavaScript. Et les tableaux s'intègrent dans le type complexe de la catégorie fille. Et comme vous le verrez dans la conférence, les tableaux sont en fait un type d'objet en JavaScript. Alors entrer en collision, que sont les tableaux et pourquoi avons-nous besoin d'eux ? Nous allons, chaque fois que vous voulez stocker une collection de fille, vous utilisez généralement des tableaux. Rappelez-vous que nous avons déjà vu des variables, mais les variables ne peuvent généralement contenir qu'une seule valeur. Les tableaux peuvent contenir une collection de valeurs. Et c'est extrêmement utile pour nous lors de la construction de lits de façon. Quels sont quelques exemples ? Eh bien, s'il avait un site de shopping et les gens ajoutent des articles aujourd'hui, attrapé tous ces éléments qui modifient le code, comment pouvons-nous les installer ? Vote installé dans avec un tableau. Que diriez-vous si vous créez le backend pour un utilisateur admin ? Tirez tous les membres de votre site peuvent être stockés dans un tableau. Il y a beaucoup, beaucoup d'exemples et je suis sûr que vous pouvez voir, et c'est très, très important à maîtriser. Et c'est ce qu'est cette classe, tableaux et boucles. Et nous ne parlons pas seulement de tableaux, mais nous regardons aussi des exemples. Nous regardons quelles méthodes JavaScript nous donne sur les tableaux directement sortis de la boîte. Les méthodes manquent de push, pop, tranche, cetera, et cetera, à l'intérieur de la porte. Un peu plus avancé, nous avons discuté des différents types de méthodes obtiendraient sur les tableaux. Les méthodes de mutateur noir poussent par exemple, est une méthode de mutateur, rayonner les méthodes d'accesseur. Slice par exemple, est une méthode accesseur. Et puis nous obtenons des méthodes d'itérateur. Et la fonction de carte est un exemple de méthode itérative et de catégorie comprise. Ces méthodes itératives, c'est extrêmement important parce que cela nous permet de boucle à travers la course. Et comme je suis sûr que vous pouvez le voir quand nous avons une collection de données devient très important pour nous de faire une boucle à travers ces tableaux. Que diriez-vous si vous êtes sur un site Web et que vous souhaitez trier par prix ou trier par date indiquée ? Vous pouvez dire à quel point il est important pour notre code de parcourir toute notre collection recherchée à travers eux. Ce n'est qu'un exemple, en passant, mais vous pouvez voir à quel point il est important de discuter des boucles. Et c'est aussi ce que nous faisons dans cette clause géniale. Nous avons discuté des boucles et nous avons discuté de la boucle traditionnelle pour, que la plupart d'entre nous connaissent déjà. Mais ne vous inquiétez pas si vous ne discutez pas de la boucle for in. Et puis nous discutons de mon opinion beaucoup de boucle enchérisseur. Et c'est la boucle for of. Donc vraiment cette classe est pleine d'informations utiles. Je ne peux vraiment pas attendre. Et s'il vous plaît restez avec moi. Un café plus grand. Gregory Bull, quel que soit le pantalon. Et je te verrai à McCloskey, adios amigos. 2. Qu'est-ce qu'un tableau ?: Nous avons parcouru un long chemin. Nous avons appris sur les objets et comment commençons-nous à devenir de plus en plus avancés ? Vous allez devoir comprendre les tableaux quand vous venez à la programmation. Et j'aime penser qu'un tableau est une variable qui stocke plusieurs valeurs dans. Je veux insister sur le mot plusieurs valeurs. Nous allons voir sous peu ce que je veux dire par plusieurs valeurs. Mais avant de le faire, comment pouvons-nous identifier un tableau ? Un objet peut toujours être identifié par les crochets bouclés, tableaux de étroitement liés à lui. Et vous pouvez identifier un tableau avec des crochets. Et prendre du recul. Rappelez-vous quand nous discutions des types de données en JavaScript, les deux types filles, ces primitifs, qui est juste un mot fantaisie pour des choses simples comme les chaînes, nombres, les booléens, null, undefined, et même assembler. Ce sont tous des types de données simples. Mais alors nous avons aussi l'objet, qui est des types de données complexes. Bien que tout en JavaScript soit à peu près dans les objets pour notre bien, c'est toujours agréable de le décomposer et d'y aller, ok, cool. Nous avons des objets que nous connaissons. Nous avons aussi des tableaux et nous avons aussi une autre fonction. Et ce sont le deuxième type de types de données en JavaScript. Ok, donc mettre ça de côté et vous savez en quelque sorte, effacer la nourriture entre dans un type fille de JavaScript. Mais ils ne sont qu'un type spécial d'objet. Et je te le prouverai. Jetons un coup d'oeil. Un tableau est juste un objet. Et rappelez-vous comment il a dit d'identifier un tableau ou de créer un tableau, vous devez avoir des crochets. Les objets sont des crochets bouclés. Liste trouver un tableau, laisser un équerres ouverts et fermés égaux. C' est ça. On a créé de la moraine. Et pour vous montrer que ce tableau est en fait un objet, nous pouvons simplement aller type d'un désireux d'un objet. Et n'oubliez pas de semer un tableau comme une variable qui peut stocker plusieurs valeurs. Eh bien, comment travaillons-nous avec des morceaux de données ? Par exemple, prenons un scénario très facile. Disons que nous avons les numéros 1357. Comment on enlève ça ? On peut juste le stocker comme une chaîne ? Eh bien, je suppose qu'on peut, on peut juste l'écrire. 1357. C' est juste gênant. Et si on voulait ajouter les chiffres ensemble ? Et si on voulait extraire les cinq et laisser le 137 ? On ne peut pas vraiment faire ça avec des cordes, n'est-ce pas ? C' est gênant. Supports, très difficile. Les images vous montrent maintenant un exemple rapide de travail avec des nombres dans un tableau. Alors, comment stockons-nous les numéros de la meilleure façon ? Parce que les cordes sont gênantes. Alors définissons un tableau et appelons-le des numéros. Par manque d'un meilleur mot. Et nos chiffres sont 1357. Comment nous avons créé un tableau appelé nombres. Laisse-le, c'est comme c'est facile. Et si nous console connectons les numéros et nous l'ouvrons, et vous pouvez vraiment voir la console nous dire aux quatre éléments de ce tableau. Nous pouvons l'ouvrir et regarder ce sont quelques choses qui méritent d'être signalées ici. L' un est, ce tableau a une propriété de longueur magique. D' où viennent-ils ? Nous allons voir bientôt, ne vous inquiétez pas. La deuxième chose à noter est que les paires de valeurs clés ici, ces clés ont commencé le nombre 0, y. est que tout ce que vous devez penser aux nombres de mots que nous avons créés comme une référence à un emplacement de mémoire. Et si nous tapons les numéros 0, toutes les dettes qui essaient de faire sont qu'il fait référence à un emplacement en mémoire qui est x éléments loin du point de référence. Oui, on a vu que le point de référence est 0. Donc, il prend le tout premier élément trouvé en mémoire. Donc, de cette façon, l'index, ces nombres 0123, ceux-ci sont utilisés comme un décalage. Et dans notre exemple, le tout premier élément du tableau, le numéro un, avec une clé de 0. C' est des éléments x loin de son point de référence, c'est pourquoi lorsque nous tapons des nombres, cela devrait nous en donner un parce que nous pointons littéralement vers le même emplacement de mémoire. Les données stockées dans. J' espère qu'il fait des taches va commencer à voir beaucoup plus d'exemples de cela plus tard. Allons passer à autre chose. Nous venons donc de voir les tableaux sont des structures de données qui ont pris plusieurs valeurs. Les tableaux n'ont pas de paires de valeurs clés. Ils ont des données singulières. Mais ce qui est cool, c'est que les tableaux sont des objets. Ainsi, ils peuvent aussi contenir des objets. Et nous avons vu les tableaux sont un type spécial d'objet. Mais une différence est que les tableaux ont une propriété de longueur magique. La première valeur du tableau est stockée sous la clé 0. Et rappelez-vous, lorsque nous avons regardé le modèle d'objet JavaScript où la spécification de scripts ECMO définit un objet est juste une référence, juste un dictionnaire où vous avez les clés et ces clés pointent vers un attribut de propriété. Eh bien, c'est la même chose avec les tableaux. Laissez-moi vous montrer un exemple. Regardons donc le modèle de tableau. Comment le moteur traite-t-il une matrice ? D' où vient cette propriété de longueur ? Eh bien, définissons un tableau qui contient juste une valeur et cette valeur est la lettre a. Donc, nous avons un tableau, les rayons appelés litres. Il a deux propriétés, une longueur, et il a une clé, et la clé commence à 0, et ils pointent vers des attributs de propriété. La propriété length a une valeur de un, mais ce sont d'innombrables propriétés configurables ou cherchent à false car cela est intégré dans JavaScript. Nous ne devons pas manquer le surround et le reconfigurer. La clé de 0 pointe à la valeur a et que tout a les vrais sites par défaut conduit prennent notre tableau et poussons b dedans. Que se passe-t-il ? Maintenant, tu vas avoir une clé en plus. Tu vas en avoir un. Celui-ci pointera vers une valeur b. Et la longueur et la clé de 0, exactement les mêmes choses qu'avant. J' espère que cela commence à devenir plus intuitif pour vous. Ne vous inquiétez pas trop. Je sais que c'est un peu théorique parce que c'est ce que le moteur et c'est ce que font les tableaux et les objets en arrière-plan. Beaucoup de gens ne comprennent pas ça, mais ça va vous aider. Alors passons à autre chose. Permettez-moi de vous montrer d'autres exemples. 3. Comment nous pouvons-nous créer un tableaux ?: Et tout comme avec les objets, ils ne sont pas seulement une façon de créer un tableau, mais en général, nous avons seulement regardé deux façons de créer un tableau. Nous regardons un littéral de tableau, et c'est juste en utilisant des crochets d'ouverture et de fermeture. Et la deuxième façon est d'utiliser un constructeur de tableau. Et oui, nous allons également utiliser le nouveau mot clé Day. Jetons un coup d'oeil à quelques exemples. Quelle meilleure façon d'apprendre alors ? Des exemples ? Commençons donc à regarder les différentes façons de créer des tableaux. Donc, d'abord, utilisons le littéral du tableau, et c'est le moyen le plus simple de créer un tableau. Et le tableau le plus simple est un, un pour tableau. Et si nous console le journal AR deux, vous pouvez voir que nous avons un tableau. C' est facile ? Nous pouvons également créer un tableau avec des valeurs. Donc, nous allons définir une variable appelée animaux, et il est défini différentes valeurs, chien, chat, et une souris. Et si nous consoles connectons cela à la capture d'écran et que nous devons utiliser le journal de la console dans ce cas, je peux simplement taper des animaux et nous y allons. On est parti avec le chien, le chat et la souris. Et rappelez-vous comment nous avons dit qu'un tableau est un objet. Et nous sommes allés plus loin en disant que vous pouvez même mettre des objets dans un tableau. Montrons un exemple de cela. Alors appelons notre peuple ici. Et rappelez-vous, avec un tableau, vous devez avoir une équerre d'ouverture et de fermeture. Et maintenant, nous voulons mettre des objets dans ce tableau. Comment définissons-nous un objet ? C' est vrai avec des accolades ? Et disons que le nom est égal à un. Et faisons-en un autre. Appelons celui-ci John. Et faisons-en un de plus et appelons-la Cindy. Et si on console les gens, on y va. Vous pouvez voir que c'est un tableau car il est enfermé entre crochets. Et il y a ces objets dedans. Ok, c'est littéral de tableau. Voyons maintenant le constructeur de tableau. Et avec le constructeur de tableau, vous devez utiliser l'objet tableau intégré de JavaScript et vous devez l'appeler avec le nouveau mot-clé. Laissez-moi vous montrer ce que je veux dire. Donc, nous définissons maison et utilisons l'éditeur de constructeur. Maintenant, vous avez juste besoin de mettre les valeurs dans ce constructeur. Appelez ça trois chambres, couleurs rouge, et il y a trois salles de bains. Si nous consolons cela, nous devrions voir un tableau avec l'opinion fermant des crochets avec ces lieux à l'intérieur. Il a eu des jours à la maison et a besoin de l'ouverture, fermeture des crochets, puis les valeurs qu'il contient, tout comme on s'y attendrait. Mais l'utilisation du constructeur de tableau peut provoquer des résultats bizarres. Laissez-moi vous montrer un exemple. Si vous vouliez faire un tableau de nombres, c'est assez simple. Et les indices de tableau ont des nombres 510. Et si nous déconnectons cette console, je m'attendrais à voir un tableau avec les valeurs 510. Tu l'as. Et nous le voyons dans ce cas. Mais si nous voulions juste qu'il ait un tableau avec un numéro qui provoque des résultats bizarres. Jetez un oeil à ça. Disons que nous avons un nouveau tableau appelé chiffres, et nous voulons juste que ce soit le numéro sept. Si nous connectons cela par console, que pensez-vous voir ? Beaucoup s'attendent à voir dans le tableau avec seulement le numéro sept. Mais dans ce cas, ça va nous donner quelque chose de différent. Ça va nous donner un tableau vide avec sept taches vides. Je veux dire, chiffres. Et la tête est, a pas donné ce que nous attendions. Donc, pour moi, j'ai juste tendance à utiliser l'approche littérale du tableau. C' est très intuitif, très facile. Comme je l'ai dit, il n'y a jamais une bonne façon de faire quelque chose en JavaScript. Il y a tellement de choses différentes que vous pouvez faire. Et selon votre situation, vous pouvez utiliser l'un ou l'autre. 4. Exemple de tableau: La meilleure chose est avec ces choses est de continuer avec des exemples parce que vous commencez à vous sentir plus intuitif autour de lui et vous commencez à venir plus à l'aise autour de ce concept de tableaux. Alors, allons y entrer. Permettez-moi de vous donner un exemple pratique. Disons que nous avons une liste de courses et que nous voulons y ajouter, nous voulons supprimer des choses du tableau. Nous voulons accéder à une propriété liée. Comment pourrions-nous faire toutes ces choses ? Jetons un coup d'oeil. Eh bien, la première chose est de créer un ShoppingList. Et dans l'eau plus froide, ce que vous voulez, appelons ça la liste de courses. Et faisons juste les nécessités. Mlk élevé via. Si nous console déconnectons cela. Laisse-moi commencer Walker. Vous avez notre tableau est le b-a multivarié. Que diriez-vous si nous voulions accéder aux propriétés dans le tableau ? Eh bien, nous pouvons accéder à ces propriétés avec des crochets. Et d'abord dire que nous voulions accéder à MLK. Console nous connectons ShoppingList. Ouvrez, fermez les crochets. Et rappelez-vous, nous avons des excès en mémoire. Et ça va être au point de départ, qui est 0. Et ça nous donne MLK. Si nous voulions accéder via, que ferons-nous ? Ça, c'est ça ? Nous avons mis deux qui nous donneront b-a. Et avec les tableaux, nous pouvons également remplacer les valeurs très facilement. Mène sur les valeurs i. C' est X est notre ShoppingList. Au lieu de MLK, c'est par Kirk. Maintenant, si nous console logo tableau qui est remplacé MLK Woodcock. Et qu'en est-il de l'accès à la propriété length ? Que diriez-vous si nous voulions ajouter des éléments dans ce tableau ? Si on s'est souvenu soudainement, j'ai aussi besoin d'acheter du papier toilette. Ou si nous ne voulons plus acheter de bière et que nous voulions nous en débarrasser. Comment pourrions-nous faire ça ? Eh bien, laissez-moi vous montrer un peu d'équité. Laissez-moi juste ouvrir la console et regarder cela dans irradiate recréer. Faisons simplement créer le tableau de nombres. Ok, ça peut être un tableau vide. Si on se déconnecte et on ouvre cette petite chose ici, et on quitte le prototype. Vous nous avez dit que vous pouviez dire que nous avons l'existence. On a accès à la méthode pop et à la méthode push. Et laissez-moi vous donner des exemples de ce qui se passe. Maintenant, revenons à notre IDE. Alignons la propriété length. Comment on fait ça ? Eh bien, vous verrez si nous revenons à la console, vous verrez ici que nous avons en fait une propriété length aurait médicalement sur ce tableau, sur n'importe quel tableau que nous créons. On a cette propriété directement. Donc, si nous revenons à notre IDE, nous pouvons y accéder, déclenche le journal de la console, la liste d'achats, et son accès aux produits liés. Trois, on a trois objets en RA, c'est logique. Du lait, du pain et de la bière. cas de Mona, le coca, le pain et la bière. Ajoutons maintenant un article à notre ShoppingList. Comment ferons-nous ça ? Eh bien, les tableaux ont une méthode intégrée appelée push in JavaScript, et il pousse littéralement un élément sur le tableau. Soyons xis une liste de courses. Il va y avoir une méthode push dessus. Et vous pouvez voir mon IDE me dit déjà que la citation à comparaître est un nouvel élément au tableau, et il renvoie une nouvelle longueur du tableau. Alors poussons du papier toilette sur notre tableau. Maintenant, si nous console de cette liste d'achats d'art, et là vous l'avez à nouveau. Mais maintenant, disons qu'on a fait une erreur et qu'on a assez de papier toilette, on veut ce truc aujourd'hui. Qu' est-ce qu'on fait maintenant ? Laissez-nous peser tasse entre dedans. Supprimons un élément du tableau. Encore une fois. Sortons de notre ShoppingList. Maintenant, on veut sortir. Dans cette méthode pop gaspille, supprime le dernier élément du tableau, qui dans notre cas est le papier toilette. Et maintenant, si nous connectons notre ShoppingList, papier toilette n'est nulle part où être vu. Super, j'espère que tu t'amuses que cette matrice de mortier soit là, allons y entrer. 5. Introduction à l'itérateur mutator: Rappelez-vous comment lorsque nous créons un tableau, il est venu automatiquement avec beaucoup de propriétés et de méthodes attachées automatiquement. Rappelez-vous que nous avions la pop et nous avons dû pousser et nous avons eu la longueur. Eh bien, laissez-moi juste dire que les méthodes de tableau peuvent être regroupées en trois grandes catégories. Et c'est très important pour vous de le distinguer. Sinon, vous risquez de gâcher votre code et votre fille. Ainsi, les trois grandes catégories ou mutateur, accesseur et itérateurs, les méthodes de mutateur ou ceux qui mutent modifieront le tableau original. Soyez donc très prudent lorsque vous travaillez avec des méthodes de mutateur, car ce que vous faites sur ce tableau affectera le tableau d'origine. Vous avez un accès émis, et ils ne modifient pas le tableau, ne mutent pas le tableau d'origine à crée seulement une copie. Et puis vous pouvez travailler avec cette copie et l'extraire et faire avec cette copie comme bon vous semble. Et enfin, vous avez des itérateurs. Donc, la plupart du temps avec point, voulant réellement faire une boucle à travers ce point, voulez-vous extraire certaines valeurs et l'afficher à l'utilisateur ? C' est là que les itérateurs entrent dans l'image. Regardons rapidement des exemples de ces trois types de méthodes. 6. Exemples d'itérateurs de Mutator: Nous avons trois grandes catégories de méthodes sur les tableaux. Jetons un coup d'oeil à un exemple de chacun d'eux. Donc, comme nous venons de le faire dans la conférence, regardons les méthodes mutées. Et rappelez-vous que ces méthodes modifient le tableau d'origine. Donc, nous allons créer un tableau délicieux nombres froids par manque d'un meilleur mot. Et avons 51015 dans ce tableau. Et utilisons la méthode push. La méthode push est une méthode mutante et elle a poussé le numéro 20 sur nous. C' est les numéros de journal de la console, poussez. Et il dit ici dans mon IDE me donne vraiment des acuités qui retourne la nouvelle longueur du tableau. Et ça a poussé le numéro 20 à ça. Maintenant, le tableau va avoir la longueur quatre. Donc, pas de consoles enregistrer les nombres impairs. Il va avoir quatre nombres maintenant il a affecté le tableau original réel. Beaucoup. Un autre exemple, travaillons avec les couleurs. Disons des couleurs originales de bleu et de vert. Mais disons que quelqu'un d'autre vient et veut créer une minute de couleurs, mais qu'ils veulent commencer avec ces couleurs comme le point de base. Monsieur, disons que ça arrive. Et ils veulent utiliser le point de départ original, mais ils veulent pousser une autre colonie, ROUGE. Maintenant, quand une console journal original, inattendu ne voir que bleu et vert. Et je suis sûr que comme vous l'avez deviné, quand un point de lager a en fait lu maintenant. Donc, avec cette mutation, avec cette méthode push affecte le taux d'origine. Faites attention car vous risquez de manquer des données originales que vous n'aviez pas l'intention de faire. Une autre méthode est xy soumise. Jetons un coup d'oeil à ça maintenant. Quickie, copiez cet appel. faudrait le taper à nouveau. Et étant des appelants paresseux et malveillants, les émetteurs d' accesseur et de sortie sont sympas car il nous permet de ne pas manipuler le tableau original, qui créent une copie du tableau original, puis manipulent ce crépitement. Alors jetez un coup d'oeil. Oui, définissons un tableau de noms. Et c'est écrit John, ALI. Et Cindy. Maintenant, un, X est une méthode à notre disposition, connue sous le nom de tranche. Et slice retourne juste une partie spécifiée du tableau. Je vais te montrer ce que je veux dire maintenant. Donc disons que la copie est égale à des noms. C' est notre tableau d'origine. Nous voulons accéder à une méthode de tranche. Et vous pouvez voir mes identifiants qui nous disent déjà quels sont les deux arguments. Le début est le début d'une partie spécifiée du tableau et la fin qui spécifie quand ils sont re, doit se terminer. Alors revenons, disons que nous voulons revenir juste Wally et Cindy. On ne voulait pas impliquer John dans tout ça. Donc ici, nous pouvons commencer à un et finir à trois. Si on se déconnecte, on a Wally et Cindy. Comment les appelle. Mais je veux dire, si notre console se connecte les noms, les noms ont conservé leur forme originale d'avoir trois personnes dedans. C' est une méthode d'accesseur. Quelle méthode de l'itérateur inférieur ? Méthode Iterator, comme nous le voyons, il itère juste à travers un tableau et il vous permet de faire choses avec une certaine valeur à chaque fois qu'il itère à travers ce tableau. Cuz, c'est un peu une bouchée. Mais encore une fois, c'est beaucoup plus facile à comprendre avec un exemple. Donc, nous allons vous donner un exemple ici d'une méthode itérateur. Et un très populaire que vous allez tous utiliser et probablement même faire une section entière dessus, sinon une section entière différemment, un ou deux épisodes complets est la méthode de la carte. Il y a beaucoup de choses dont on peut parler avec les hommes. Les méthodes de carte ne vont pas le faire. Ouais, je vais juste vous montrer très brièvement comment cela fonctionne et ce qu'une méthode itérateur signifie. Et créons un tableau d'animaux. Et disons qu'on a un chien et un chat. Je ne veux pas que ça soit trop long. Et maintenant, je veux juste créer un itérat, un itérateur animal. Appelons ça l'itérateur animal. Et nous allons accéder à notre tableau d'origine et nous allons utiliser cette méthode de carte. Ok. Et comme vous pouvez le voir dans mon IDE, cette carte émise appelle une fonction de rappel sur chaque élément d'un tableau. Et par élément d'un tableau, nous disons juste le chien et le chat dans ce cas, sont des éléments appelés. Donc, une fonction va être appelée retour d'un chien et retour d'un chat, et cetera, et cetera. Ne vous inquiétez pas des fonctions de rappel, mais nous allons entrer dans ces choses plus tard. Donc, le premier argument de cette méthode de carte est la fonction de rappel. Tu peux même voir ce MID, ça me dit. Et définissons une fonction de rappel qui prend l'élément, qui dans notre cas est un animal. C' est un type d'animal. Et puis faisons quelque chose avec ce type d'animal. Donc, dans notre cas, nous allons juste l'instruction de journal de console qui est utilisé des littéraux de modèle. Et disons, je ne sais pas, nous avons affaire à un et ensuite vous pouvez littéralement prendre cet animal et regarder ce qui vient de se passer. Vous pouvez voir la console dit qu'on a affaire à un chien, on a affaire à un chat. C' est donc ce que fait la méthode de la carte. Il prend chaque élément de votre tableau. Donc, sur la première itération, sur la première boucle, il va prendre chien. Ça va mettre ce chien dans cette fonction de rappel. Et ça va nommer ça. Ça va mettre ce chien dans une variable appelée type animal. Et puis on fait tout ce qu'on veut avec ça. Dans ce cas, nous venons de faire un simple message de journal de console de ce type d'animal. Mais cela n'affecte pas le tableau d'origine. Si je tape des animaux, nous avons toujours notre chien et notre chat et rien. C' est juste une méthode qui nous permet d'itérer à travers un tableau. Nous avons traversé beaucoup de choses. Nous avons traversé beaucoup de choses. Bien fait. L'espoir commence à faire des scènes. A bientôt. 7. Pourquoi le looping est nécessaire: Travailler avec sa fille est extrêmement important quand il s'agit de programmation. Et beaucoup de choses que nous avons faites en ce moment consistaient stocker des données et nous les mettrions dans des objets. Nous avons défini des variables, nous avons créé des tableaux. Mais qu'en est-il de l'accès à ces batteries ? Dans un, vous pouvez penser que si vous avez une application avec des milliers d'utilisateurs, ils vous donnent fille. Mais à un moment donné, vous allez vouloir extraire ces données et les afficher pour les utiliser pour effectuer des calculs dessus. Et c'est que nous boucler devient vital. Et ici, nous parlons de boucler à travers des objets, mais gardez juste à l'esprit, un tableau est en fait un objet aussi. Vous pouvez faire une boucle à travers les objets et vous pouvez faire une boucle à travers les tableaux. Mais une fois que vous avez un tableau, un tableau de vanille et acheter de la vanille signifie juste que vous avez toute une chaîne de valeurs. Une fois que vous avez atteint ce point, il devient très facile de le parcourir. C' est pourquoi je veux commencer par des objets et des objets plus compliqués que vous avez définis. Comment faisons-nous une boucle à travers ça ? Et vous vous retrouverez souvent dans une situation où vous voulez regarder à travers votre objet. Et la seule façon de le faire avant ESX était avec une boucle for in. Et je vais vous montrer un exemple d'un for in loop sous peu. Mais laissez-moi juste dire qu'il y a un meilleur moyen et que meilleures façons de convertir votre objet en un tableau. Et puis vous pouvez simplement faire une boucle sur le tableau, car la boucle sur un tableau est très facile maintenant. Alors, comment pouvons-nous convertir notre objet en un tableau ? Seront-ils trois méthodes très populaires, les touches de point d'objet, les valeurs de point d'objet et les entrées de point d'objet. Les touches de point d'objet créent un tableau qui contient uniquement les noms de propriété, alias les clés de l'objet. Les valeurs de point d'objet, vous avez probablement deviné déjà, qui crée un tableau qui contient la valeur de chaque propriété dans l'objet. Et les entrées de point d'objet vous donne juste un tableau. Mais maintenant, cette fois, vous avez à la fois la clé et la valeur. Il crée toujours un tableau de tableaux. Mais je vais te montrer ce que ça veut dire bientôt. Ok, alors faisons un pas en arrière. Nous commençons par un objet compliqué dans l'objet converti en un tableau. Et nous pouvons utiliser l'une de ces trois méthodes dont nous venons de discuter. Fais ça. Et maintenant, nous pouvons faire une boucle à travers ce tableau comme s'il s'agissait d'un tableau de vanille normal. Et nous faisons cela avec d for, de boucle. La boucle for est génial et c'est un moyen beaucoup plus facile de faire une boucle à travers les éléments d'un tableau. Permettez-moi de donner un exemple. Je vais juste vous montrer rapidement comment cela fonctionne pour la boucle. Disons que nous définissons beaucoup de clés de fruits. Et c'est un tableau qui est une banane et un manga. Simple. Alors, qu'est-ce qu'un for of loop fait ? Cela passe à travers chaque clé. Et ce que je veux dire par clé, où ta clé dans ce cas dans ce tableau, c'est la banane. Sur la deuxième itération, la clé nette va être manga. Pour la clé const, il va prendre la clé du tableau. Mais maintenant, sans que nous fassions quoi que ce soit, génial pour la boucle, comment sait-il utiliser le tableau de clés de fruits ? Attendons, un deuxième argument arrive. Vous devez dire à ce tableau, hé, trouver chaque clé du tableau de clés de fruits. Ensuite, vous ouvrez ce pour de boucle avec les accolades. Et on peut faire ce qu'on veut avec cette clé. Parce que nous savons sur chaque boucle que la clé va être dans la banane première instance, et sur le manga deuxième instance. Donc, dans ce cas, notre clé de journal de console simple va simplement enregistrer le phénomène de la console la première itération. Et puis sur la deuxième itération, nous allons console manga. Jetons un coup d'oeil à d'autres exemples maintenant. 8. Boucle à travers un exemple de tableau: Boucle à travers la fille pour l'extraire. C' est si important quand il s'agit de programmation. Et je veux vraiment, je veux stresser. Je vais vous montrer deux exemples. Celui que je vais juste faire une boucle à travers les tableaux, vous montrer les différentes méthodes. Et puis comme nous l'avons discuté dans la conférence, je veux réellement créer un objet avec des propriétés, paires nom-valeur, et je veux faire une boucle à travers cela. Donc, sans plus tarder, allons y entrer. Je vais commencer à couper avec des fonctions plus compliquées, des appels et des boucles. Parce que nous avons parcouru un long chemin. Et je pense que vous vous familiarisez vraiment avec les objets faciles traditionnels, les tableaux et tout cela. Donc, créons une fonction. Disons que nous avons toute une liste de membres de notre côté. Et nous voulons parcourir chaque membre et leur donner un message de bienvenue. Comment on fait ça ? Nous allons d'abord créer une fonction et nous allons entrer dans les fonctions dans une toute nouvelle section. Donc, ne vous inquiétez pas encore de la syntaxe. Comprenez simplement le concept. Définissons une fonction appelée High. Et il disait que la fonction prend le nom de la personne. Tout ce que cette fonction fait est qu'elle renvoie notre message de bienvenue. Bienvenue, et nous utilisons des littéraux de modèle, Ouais, et nous allons juste annuler le nom. Suivant. Trouvons nos membres. Et disons avec quoi, toute une liste. Et on commence tout juste. Donc nous n'avons que deux membres, Tom et Jerry. Mais disons que nous obtenons de nouveaux utilisateurs, de nouvelles utilisations. John et Wally. Donc principalement des listes qui ont poussé John. Et quant à la triste et poussée Wally, maintenant, une liste de membres devrait contenir quatre membres. Et c'est le cas. Et nous voulons saluer tous les membres. Comment allons-nous faire ça ? Souviens-toi comment je continue de souligner ces jamais une bonne façon de faire quelque chose. Et il y a beaucoup de façons de faire une boucle à travers ce tableau. Regardez d'abord les méthodes traditionnelles de la vieille école. Donc, le traditionnel pour la boucle, et quelque chose qui mérite d'être rappelé est que chaque for-loop a des accolades à la fin. Et c'est un peu comme ce qu'on veut faire dans le code, entre ces accolades. Ce qui diffère, c'est ce qui est entre parenthèses ici. Donc, pour le traditionnel, alors commençons ici avec traditionnel. Vieille école pour boucle. Nous devons définir une variable. Et cette variable itère d'un à chaque fois que la boucle se termine. On peut appeler ça n'importe quoi. Mais traditionnellement, les gens aimaient le cool. Je, donc nous disons que je suis égal à 0, donc je vais commencer à 0. Et puis le deuxième paramètre dans cette boucle voit à quelle condition la boucle continuera-t-elle à boucler ? Parce que finalement la boucle va devoir s'arrêter. Sinon, ce sera une boucle infinie. Donc, disons ici, nous voulons seulement que ça itère combien de fois ? Écrivons seulement quatre fois parce qu'ils forment l'inverse, non ? Donc nous avons besoin que je sois inférieur au lien de la liste des membres. Et puis le troisième paramètre est ce qui arrive à i après la première itération. Et nous voulons augmenter d'un. Donc, quand nous commençons IS, fait la première boucle, quand il se termine, cet œil va être augmenté d'un. Et puis cette condition va être goûtée. L'habitude le fait. Et maintenant je voulais trouver un salut, un accréditant particulièrement pour chaque membre. Disons salutation LIT. C' est là que nous voulons retourner haute fonction. Et rappelez-vous la fonction hi, l' un de ses paramètres d'entrée était le nom de l'individu. Quel est le nom de cet individu sur la première boucle ? Est-ce que ça va être symboliste. Et n'oubliez pas d'accéder aux propriétés sur le tableau, nous pouvons utiliser un crochets. Et je suis là. Sur la première itération réseau RBF tourner le nom Tom. Et dans tout ce que nous voulons introduire le journal de la console. Salut. Aujourd'hui, vous l'avez. Nous souhaitons la bienvenue à Tom. Bienvenue Jerry. Bienvenue Jon. Bienvenue Molly, c'est cool ? J' espère que vous comprenez ce que nous avons fait, mais encore une fois, c'est une vieille école pour boucle. Je vais te montrer une meilleure façon de le faire. Mais avant de vous montrer la meilleure façon de le faire, laissez-moi vous montrer une autre vieille école où il s'appelle le for in loop est aussi la vieille école. La boucle for in. Encore une fois, nous avons les quatre et ensuite nous mettons ces crochets bouclés. Et maintenant tout ce que nous avons à faire, c'est que nous devons obtenir quatre noms const dans le symboliste. Cette syntaxe fait est sur chaque boucle qu'elle va obtenir chaque élément dans notre tableau. Nous avons appelé notre nom d'élément parce que nous connaissons leurs noms, Tom, Jerry, John Wiley. Donc, il va saisir ce nom dans notre membre d'objet Ernest dans notre tableau. Et puis traditionnellement ce que cela fait est que cela accède également à toutes les propriétés des prototypes. Donc, je peux devenir très lourd et parfois il accède à des choses qui ne devraient pas. Et pour cette raison, vous incluez souvent une instruction if dans cette boucle for. Et vous avez juste à dire si symboliste et est une propriété intégrée appelée sa propriété. Et tout ce que nous avons à dire comme si un tableau avait sa propre propriété et qui est en dehors de tous les prototypes. Ensuite, nous voulons exécuter ce code. Donc maintenant, nous avons mis en pause cette déclaration si. On termine le bloc. Qu'est-ce qu'on écrit ? Et bien, la même chose. Nous voulons que notre salut exécute cette haute fonction. Et on va passer au nom du miroir. Donc c'est la liste des membres et oui, on ne l'a pas appelée. J' aime qu'on l'ait fait au-dessus d'un filet de vieille école pour boucle. Oui, nous avons défini chaque itération. On va avoir le nom qui va s'appeler nom. Donc nous passons en nom. Maintenant, nous mettons notre salutation et tout ce que nous voulons faire, c'est le journal de la console. Cette salutation. Et Bob est ton oncle. On y va, Bienvenue Tom, bienvenue Jerry, bienvenue Jon. Bienvenue Molly. Mais vous pouvez voir ces méthodes orbitent encombrant. Yahoo. Tu dois vraiment y penser. Vous avez une bonne quantité de dactylographie. Laissez-moi vous montrer le for de boucle, ce qui est génial pour de boucle. Ok, alors faisons une boucle pour de. Mon IDE m'aide à nouveau avec cet itérateur const d'objet. Donc oui, nous avons un nom et je vais objecter est la liste des membres. Et vous verrez à quel point c'est plus facile. Cela va parcourir chaque nom, chaque élément de notre tableau, de notre objet. Tout ce que nous devons faire maintenant, les arbres sortent salutation, qui exécute la fonction salut. Et nous avons déjà notre nom. Et puis nous pouvons consoles log. Notre salut. Pouvez-vous voir à quel point la boucle est plus facile et plus simple ? Super. Mais je veux vous montrer un exemple de plus maintenant parce que, oui, nous avons affaire à un tableau simple. Je veux maintenant traiter avec objet compliqué. Laisse-moi arrêter cette vidéo parce que ça devient long. Et dans la vidéo suivante, nous allons traiter de l'objet et ensuite nous allons parcourir l'objet de la dette. A bientôt. 9. Exemple de boucle à travers des objets: Maintenant, on va créer un objet. Et nous allons utiliser ces méthodes pour convertir l'objet en tableau que nous avons vu précédemment. Il y a trois méthodes différentes, et puis nous allons parcourir ce tableau en utilisant la boucle for. Voyons comment ça peut être. Cette première étape est de créer un objet. Et disons simplement que notre objet est une liste de courses de fruits. Laissons nos fruits être un objet. Et je vais juste utiliser la syntaxe littérale de l'objet par souci de simplicité. Disons qu'on a 12 bananes aux carottes et 7 mangues. Console Wii déconnecte nos fruits. Voilà notre objet avec des bananes, des carottes et des mangues. Comment commencerons-nous à itérer et à parcourir ces données ? Eh bien, la première façon est d'utiliser des touches de point d'objet. Méthode 1. Touches point objet. Définissons nos clés, Laissez les clés de fruits égales. Et maintenant nous mettons les haches. Javascript construit dans la méthode d'objet, les clés d'objet. Et le paramètre que nous passons dans les clés, le fruit de l'objet. Et si nous console nous déconnectons. Nous avons littéralement maintenant un tableau de nos clés, manane, carottes et mangues. Et c'était si facile à faire et c'est génial de travailler avec. Voyons maintenant la deuxième méthode et qui est la méthode add_values objet à la valeur point objet, valeurs de fruits tardives. L' objet. Nous allons accéder à cet objet intégré JavaScript et comment nous avons obtenu des valeurs. Et nous passons à nouveau dans l'objet fruitier. Et si nous déconnectons cette console, nous obtenons les valeurs. Yahoo souffle mon esprit à quel point c'est simple d'extraire des données des objets. Et comment vous pouvez voir que nous avons créé un tableau dans les deux cas, dans les clés point d'objet et objet de valeurs. Nous avons transformé nos fruits objet en tableaux contenant les données qui nous intéressent. Mais maintenant, dites que vous vouliez les clés et les valeurs. Comment ferons-nous ça ? Pesons l'augmentation des points de l'objet vient dans l'image. Jetons un coup d'oeil. Méthode3. Intérêts objets. Alors maintenant, définissons les arbres fruitiers. Nous devons à nouveau accéder à l'objet JavaScript. Et comment on a augmenté. Et nous passons dans l'objet fruit. Et si nous pouvons résoudre cela, nous obtenons un tableau de tableaux. Rappelez-vous comment j'ai dit que le point augmente presque comme un tableau de tableaux. Et vous pouvez voir pourquoi maintenant, parce que votre tableau global se compose de tableaux plus petits de paires clé-valeur. Ok, cool, mais maintenant comment faire pour parcourir ces entrées de fruits et extraire les deux défauts ? Jetons un coup d'oeil. Donc, si vous utilisez des entrées Object.Create, vous probablement celui pour extraire les paires de valeur de clé. Et faisons un pour, de boucle parce que pour off les boucles sont géniales. Et si on faisait ça, si on faisait juste des fruits d'intérêts fruitiers, que pensez-vous qu'il arriverait ? Console Wii, bûche, fruits. Eh bien, cela augmente si vous cassez des données, il va juste à la console journal ils tableau parce qu'il va prendre le premier élément de cette plus grande globalement un journal de console qui. Mais qu'en est-il si on veut extraire ? Et si nous voulons le manquer en disant, vous devez acheter x bananes, vous devez acheter deux carats. Comment on fait ça ? Ok, eh bien, ce qui est vraiment cool est pour de boucle, c'est ce fruit que vous pouvez diviser en un tableau de nom de fruit et numéro de Froude. Je veux dire, tu peux l'appeler comme tu veux. Donc oui, j'ai juste des fruits. Tu sais quoi ? Permettez-moi de le rendre plus intuitif pour vous. Clé de fruit, jeu de nom. Disons que la clé des fruits et ça pourrait être Food Valley. Donc, vous savez que ceux que la clé dans les autres ont filets tout éditer est à l'école, c'est facile. Et maintenant, nous devrions être en mesure de consoles journal. Utilisons des littéraux de modèle et disons que vous devez acheter des fruits. Fruits. Clé. C'est cool ? Une console d'aide journaux. Vous avez besoin de terminologie, environ deux carats à proximité, sept mangues, ils l'ont. C' était donc un exemple vraiment approfondi de prendre un objet en le structurant en utilisant des clés d'objet, des valeurs d'objet. Et nous utilisons même les intérêts de l'objet pour obtenir à la fois les clés et les valeurs de cet objet. Et puis une fois que vous avez un tableau de valeurs, il est si facile de faire une boucle à travers un tableau. Parce que la boucle for of, c'est juste très intuitif et cela fonctionne étonnamment bien avec les tableaux. Continuons. 10. Les formes: Nous avons appris sur les objets, nous avons appris sur les tableaux. Le, cette conférence, il va être épique. Mais permettez-moi de commencer par dire que tous les moteurs JavaScript utilisent les concepts discutés dans cette conférence comme un moyen d'optimiser le code. Et comme vous pouvez le voir sur le coup, ce sont des formes, mais différents moteurs appellent la forme des choses différentes. Donc, lorsque vous commencez à Googling ceci, vous pouvez rencontrer une terminologie différente. Certaines personnes les désignent comme des classes cachées, mais cela est déroutant car nous avons des classes JavaScript V8 causant des cartes. Mais cela est également déroutant parce que rappelez-vous que nous utilisons cette itération de carte. D' autres les appellent des types javascript core causant des structures. Mais le singe araignée l'appelle formes et juste éviter confusion avec d'autres terminologie après côté les appeler formes ainsi. Mais de toute façon, je digresse. Nous savons maintenant comment les objets sont définis en JavaScript. On a travaillé avec eux. Mais dans cette conférence, je veux plonger plus profondément. Je veux discuter de la façon dont les moteurs JavaScript fonctionnent avec les objets. En regardant ce que nous avons fait jusqu'à présent avec les objets, vous avez probablement déjà deviné que l'accès aux propriétés est de loin la tâche la plus courante. Qu' est-ce que je veux dire quand, quand nous avons un objet, allons simplement définir un objet utilisateur via le prénom et le nom de famille. Il va être très courant pour nous d'interroger ces valeurs. Par exemple, le prénom de point utilisateur. Nous demandons au moteur d'aller chercher le prénom de cet utilisateur. Et pour cette raison, il est crucial pour JavaScript de rendre ce processus aussi rapide que possible. D' accord ? Ok, tu comprends. Alors, quelle est la forme ? Laisse-moi te dire ça. Il est courant d'avoir plusieurs objets avec les mêmes noms de propriétés ou clés. Par exemple, créons un objet serpent Dogen. Par exemple, disons que nous avions un objet chien, donc appelé deux clés, deux noms, type et âge. Maintenant, nous créons un objet serpent, et il a aussi le type et l'âge. Il est intuitif que ces deux-là ont la même forme. Ces objets ont les mêmes clés. Et l'Italie signifie en forme d'arc. Les formes ne sont que des objets qui ont le même aspect et la même sensation. Mais nous allons creuser plus profondément pour comprendre ce que JavaScript fait avec les objets. Donc, créons un objet avec les propriétés x et y, chacune avec une valeur de 1020. Lorsque nous créons ces objets, nous savons que le modèle d'objet JavaScript est implémenté. Rappelez-vous que nous avons regardé le modèle d'objet JavaScript et tout ce que je veux dire par ceci est que chaque objet utilise la structure de données du dictionnaire dont nous avons discuté plus tôt. Il contient les clés sous forme de chaînes. Les clés ici sont x et y, et ces clés pointent vers les attributs de propriété respectifs. Maintenant, lorsque nous accédons à la propriété X sur cet objet, IE, nous tapons réellement dans notre code OBJ 0.8x, ou dans le cas de notre objet US, nous tapons user.name. Qu' est-ce qui va se passer. Est-ce que les moteurs JavaScript vont regarder dans l'objet JS pour la clé pour que les maux. Et dans cela va charger les attributs de propriété correspondants. Et enfin, une fois que c'est fait, il va retourner la valeur. Vous voyez le jour même entre crochets. Il va retourner filet dans le cas de sortie va retourner de l'étain. Mais ces attributs de propriété. Où sont-ils stockés en mémoire ? Laissez-moi vous poser une autre question. Devrions-nous stocker ces attributs de propriété dans le cadre de leur objet JS ? Avant de répondre à cela, laissez-moi juste dire que faire si nous finissons créer des milliers d'objets qui ont une structure similaire, IE, qui ont la même forme. Out a soutenu que nous avons vraiment gaspillé pour stocker le dictionnaire complet, qui contient les noms de propriétés et les attributs associés sur chaque objet JS y. parce que cela va entraîner un tas de duplication et l'utilisation inutile de la mémoire. Appels. Nous savons qu'il ne serait pas efficace de dupliquer ces attributs de propriété pour chaque objet ayant la même forme. Alors, que fait le moteur JavaScript ? Eh bien, il stocke une forme de l'objet et il le fait séparément à l'objet lui-même. Et cette forme stocke tous les noms de propriétés et attributs, à l'exception des valeurs. Au lieu de stocker la propriété value, la forme doit décrocher la valeur de décalage qui fait référence à l'objet chase afin que le moteur sache où trouver la valeur. Et cela signifie que chaque objet JavaScript ayant la même forme pointera exactement cette instance fait une instance de forme, aucune duplication et aucune fuite de mémoire. Et parce que chaque objet JavaScript est unique, chaque élément aura des valeurs différentes. Signifie que cet objet n'a qu'à stocker les valeurs uniques. Laissez-moi vous montrer ce que je veux dire. Obtenons notre objet avec x et y. Maintenant, au lieu de cet objet stocke les clés, il va seulement aux valeurs d'habitudes parce que ces valeurs sont uniques à lui qu'un agoniste, toutes les valeurs 1020. Et cet objet va pointer vers une forme. Et cette forme est ce qui va stocker les clés et les décalages associés. Les scènes x_max. Donc, nous savons que lorsque vous regardez la forme, les x pointent sur les attributs correctement avec un décalage de Sarah. Et c'est pourquoi le moteur JavaScript va savoir que x a une valeur de dix. Es-tu encore confus ? Bien. Cela fait partie du voyage jusqu'à une partie du voyage. Peut-être que cet exemple sera même plus clair une fois que vous avez plusieurs objets. Laissez-moi vous montrer que maintenant nous avions un OBJ objet, ils avaient juste x et y. maintenant, créons OB J1 et OB J2. Donc nous avons deux objets maintenant, mais avec des valeurs différentes. Et ça va probablement faire des scènes Gina, parce que maintenant nous avons deux objets et ils se vantent de toutes les valeurs uniques. Mais ils pointent tous les deux vers la même forme parce qu'ils ont tous les deux la même forme. Comme c'est génial. Et vous pouvez vraiment voir maintenant qu'au lieu de stocker ces informations dans les deux objets comme probablement les attributs n'est stocké que dans une forme. Souviens-toi, même si tu es confus, pas seulement te souvenir de ça. Peu importe combien d'objets ils sont, des centaines, des milliers, des millions ou des milliards. Tant qu'ils ont la même forme, nous n'avons qu'à décrocher la forme et les informations de propriété qu'une seule fois. Mais jusqu'à présent, nous n'avons vu que des exemples où nous avons un objet et une structure prédéfinie. Nous n'avons jamais eu à y ajouter des propriétés. qui, bien sûr, soulève la question, que se passe-t-il lorsque nous ajoutons des propriétés à un objet qui a déjà été créé ? Qu' arrive-t-il à la forme ? C' est nous les chaînes de transition et les arbres entrent dans l'image. Créons l'objet utilisateur. Et d'abord illustre assis, donc c'est vide, il n'a pas de propriétés. Quelle est sa forme ? Eh bien, c'est la forme est aussi vide. Donc, à ce stade, l'objet utilisateur pointe vers une forme en T. Simple, non ? Mais maintenant ajoutons une propriété appelée nom à cet objet avec un John valide. Dès que vous le faites, une nouvelle forme va être créée. Le moteur JavaScript passe désormais à cette nouvelle forme qui contient le nom de la propriété. L' objet utilisateur a une valeur de John comme premier décalage. À ce stade, c'est en fait le seul décalage. Mais continuons. Ajoutons maintenant une propriété appelée age à l'objet américain et donnons-lui une valeur de 38, vous l'avez deviné. Une autre forme est créée. Le moteur JavaScript passe à nouveau à cette nouvelle forme qui contient désormais le nom et l'âge. Les attributs de propriété attachés à cet âge. Il nous dit que la valeur de l'âge peut être trouvée au décalage une position de notre objet utilisateur, ce qui a du sens. Et tout comme une note de côté que si y i, l'ordre dans lequel les propriétés sont ajoutées à l'objet a un impact sur la forme résultante. Par exemple, nous avons défini le nom et l'âge du doyen, mais cela va se traduire par une teinte différente de celle que nous avions assignée pour la première fois à 38 ans. Et le nom de John Vaccins va juste mélanger nos formes. En fait, une autre façon de représenter cette image que vous regardez actuellement est la suivante. Comme vous pouvez le voir, nous n'avons pas besoin de décrocher la table complète des attributs de propriété pour chaque forme. Au lieu de cela, s'il forme seulement besoin de connaître la nouvelle propriété qu'il introduit. Par exemple, dans ce cas, nous n'avons pas besoin de stocker les informations sur le nom dans la dernière forme car elles peuvent être trouvées plus tôt dans la chaîne. Et pour nous faire travailler, chaque forme remonte à sa forme précédente. Et c'est pourquoi ça s'appelle une chaîne de transition. C' est comme une chaîne, comme une grande chaîne avec beaucoup de maillons. Et toutes ces formes ont des liens les uns avec les autres qui remontent. Maintenant, dans notre cas, si nous voulons accéder à la propriété name sur notre objet utilisateur, que nous savons est John. Lorsque nous écrivons et user.name, le moteur JavaScript va rechercher le nom de la propriété en approchant d'abord la forme d'âge. Pourquoi ? Parce que c'est le plus bas de la chaîne. Il ne va pas trouver que le, donc le moteur va continuer à monter la chaîne de transition jusqu'à ce qu'il trouve la forme qui a introduit la propriété name. Ça a du sens. Fukuoka, maintenant on a presque fini, mais je veux devenir un peu plus compliqué. Que se passe-t-il si vous avez deux objets qui sont d'abord vides, puis que vous placez des propriétés différentes sur chacun d'eux. Se souviendra des chaînes de transition de l'Holocène et des arbres de transition. C' est là que les arbres entrent dedans parce que dans ce cas, nous allons devoir se ramifier. Au lieu d'avoir une chaîne de transition, nous pouvons avoir un arbre de transition. Laissez-moi vous montrer ce que je veux dire. Créons un utilisateur un objet. Tout d'abord, c'est NT, puis remplacez le nom de la propriété dessus. Nous allons finir avec un objet JS appelé User one qui contient une seule valeur, dans ce cas John. Et cela va aussi aboutir à des formes d'harmonie en deux formes, S, droite, la forme EMT et la forme avec seulement une propriété appelée name. Ok, et créons l'utilisateur à. L' utilisateur deux va également commencer avec un objet vide, mais ajoutons ensuite une propriété différente appelée age. Quel est le résultat de wallace ? Eh bien, nous allons avoir deux objets, mais ils vont être trois. Les formes vont être pour façonner des chaînes. Un lié à l'utilisateur un et un autre lié à l'utilisateur deux. Mais laissez-moi vous demander ceci maintenant, est-ce que cela signifie que sera toujours une forme indépendante associée à chaque objet ? Non, pas du tout. Laissez-moi vous montrer un autre exemple. Jetez un coup d'oeil. Disons que nous créons un utilisateur, commence comme AMD et qu'il a un nom de John. Nous savons dans ce cas que nous allons avoir un objet JS, Will Valley John, qui pointe vers une forme vide que Dane transige vers une nouvelle forme avec le nom de propriété de nommage. Nous le savons, mais disons que nous créons un deuxième utilisateur, mais cette fois nous créons immédiatement une propriété appelée nom à elle. Dans ce cas, nous avons créé un objet qui possède immédiatement la propriété name. Et cela signifie que le moteur JavaScript n'a pas eu à commencer à partir d'un objet vide et à passer à un nouveau. Il est immédiatement allé au résultat final. Et je vais faire un très bon point ici. C' est y. littéraux d'objet peuvent être très bons parce que cette optimisation et nous venons de voir, raccourcit la chaîne de transition et rend plus efficace la construction d'objets à partir de littéraux. Maintenant, je veux être un peu plus compliqué. Portez juste avec moi. Attends serré, ne t'arrête pas. Maintenant, tu as presque fini. Réponses, informations très raisonnables, très intéressantes. Créons un objet utilisateur avec trois propriétés maintenant, nom, âge et audacieux, des années quatre-vingt, les boule vers le haut. Comme nous l'avons appris précédemment, cela crée un objet avec combien de formes ? Avec quatre formes en mémoire. C' est vrai. Et maintenant, pour accéder au nom de la propriété sur cet objet, le moteur JavaScript doit suivre la liste liée. Il va falloir commencer par la forme tout en bas. Et puis il va devoir travailler son chemin jusqu'à la forme qui a introduit le nom, qui est où le haut. Et comme je suis sûr que vous l'avez déjà deviné, ce sera serasi nous le faisons plus souvent, surtout lorsque les objets ont beaucoup de propriétés. Donc, pour accélérer la recherche de propriétés que le moteur JavaScript, Ed est une structure de données de table de formes. Et la table de formes est un dictionnaire de mappage clés de propriété aux formes respectives qui ont introduit la propriété donnée. Voici la table de forme et à quoi elle ressemble. En effet, c'est un autre type de dictionnaire qui raccourcit tout ce processus. Par exemple, vous pouvez voir sur l'écran à la table de secouer, indiquera au moteur JavaScript façon de trouver ces valeurs de propriété dans quelle forme pour trouver ces valeurs de propriété. Donc, dans la recherche du nom, il commence toujours dans la forme, dans la forme ultérieure. Mais à plus tard Shape Points pour secouer la table. Et ils, le moteur JavaScript sait regarder dans quelle forme trouver cette propriété de nom. Ça rend les saints routeurs. Je ne peux pas le croire ou vous sérieux. Maintenant, nous avons une autre table de forme. Je pensais que toute la raison des formes était dépourvue ou recherche de dictionnaire. Maintenant, on en a un autre. Allele ne sont pas des ghettos. Les camps vont abandonner. Non, n'abandonnez pas et connaissez la réponse. Et la raison en est que la table de formes et les belles formes sont un moyen d'atteindre une fin et c'est d'activer les caches en ligne. caches en ligne ou le vrai secret derrière environnement d'exécution de JavaScript rendent les mâchoires arrachées si rapidement. Et je ne veux pas entrer dans les caches en ligne trop détaillés parce que c'est tout un sujet en soi. Mais j'espère que je vous ai donné assez de saveur et connaissances pour que vous puissiez approfondir ce sujet qui vous intéresse. Mais nous n'avons pas tout à fait fini avec cette Légion parce que je veux vous montrer à quoi ressemble une table de tremblement. En B., je veux juste introduire mais plus le concept d'un cache en ligne et ce que cela signifie réellement que c'est très, très haut, monsieur, juste du café jaune. Il ne nous reste qu'une minute ou deux minutes. Mex de cette conférence. C' est suspendu. Revenons-y. Et je ne veux pas entrer dans les caches de l'intérieur. Nous savons que c'est un autre sujet en soi qui est à un niveau très élevé, c'est ainsi que j'aime y penser. Disons que nous créons une fonction appelée goût qui prend dans un objet utilisateur et que nous conserverons simplement le nom de l'utilisateur. Lorsque vous exécutez la fonction pour la première fois, le cache en ligne recherche le nom de la propriété et trouve que la valeur est stockée au décalage 0. Parce que nous savons que l'utilisateur un objet a le nom John, dans ce cas au décalage 0. Lorsque vous exécutez cette fonction, elle va trouver ce décalage. Et le cache en ligne mémorisera la forme et le décalage auquel leur propriété a été bombardée. Donc, quand vous regardez le j est le goût de la fonction, ça va décaler ce décalage Zara dans cet appel de fonction. Et ce que cela signifie, c'est que si le moteur JavaScript voit des objets avec la forme précédemment enregistrée dans le cache en ligne, il n'a plus besoin d'atteindre les informations de propriété du tout. Au lieu de cela, la recherche d'informations de propriété coûteuse peut être entièrement ignorée. Et c'est beaucoup plus rapide que de chercher la propriété à chaque fois. Laissez-moi vous montrer ce que je veux dire. Nous allons donc mettre en place la fonction de test avec l'utilisateur Calderon un et les caches en ligne vers le décalage 0 dans la fonction elle-même. Maintenant, quand on l'appelle sur l'utilisateur 2, qu'est-ce que tu penses qu'il va se passer ? Eh bien, dans ce cas, les caches en ligne vont le reconnaître. Il a la même forme. Et au lieu d'avoir à rechercher les attributs de propriété et aller dans les tables de formes, et cetera, et cetera. Mais sait que le diable a dit 0. Donc tout ce qu'il fait est qu'il prend le cache en ligne de Zara et il renvoie une valeur Ali, à partir de cet objet. Cool, non ? Quoi qu'il en soit, il y a un très haut niveau de caches en ligne. Vous n'avez pas à le comprendre trop en profondeur maintenant, mais si vous voulez creuser plus profondément, Herbert, vous donnant assez de saveur. Eh bien, ça a été une longue conférence, alors merci de m'avoir porté avec moi. Eh bien, Dan, si tu es là, je veux juste récapituler rapidement. Nous avons appris comment les moteurs JavaScript stockent des objets et des tableaux, et comment les formes et les caches intérieurs ont aidé à optimiser les opérations sur ces objets. Et sur la base de ces connaissances, que pouvons-nous en retirer ? Eh bien, s'il y a une chose qu'on peut enlever à cette pratique, on manque juste d'initialiser nos objets de la même manière. Donc ils ne finissent pas par avoir des formes différentes. Par exemple, si vous voulez créer un objet utilisateur, n'en créez pas un avec une propriété de nom, un autre avec un fname, un autre avec un prénom. Et d'autres sont d'abord, puis un N majuscule pour le nom là. Donc on va avoir des formes différentes et ça va compliquer les choses. Et donc l'arrière-plan plutôt être cohérent dans la façon dont vous initialisez votre objectif d'objets. J' espère que cela a été très instructif. T, i ? Beaucoup de plaisir à le mettre ensemble parce qu'un sujet assez compliqué et peu de gens savent à ce sujet, alors oui, profitez-en. Et passons à autre chose. Allons dans un peu plus de JavaScript pour vous voir bientôt.