Nous saluons le retour.
Ainsi, dans les dernières vidéos, nous avons parlé de tableaux javascript qui sont la première structure de données dont nous avons parlé dans les prochaines vidéos.
Nous allons introduire une autre structure de données appelée l'objet.
Nous avons donc deux objectifs principaux, comme nous l'avons fait avec les tableaux.
Nous voulons d'abord comprendre ce que les objets sont pourquoi nous les utilisons.
Comment se comparent-ils à un tableau.
Et puis le deuxième objectif est de savoir comment écrire un code en utilisant des objets javascript.
Allons-y et commencez.
Voici donc une situation hypothétique.
Supposons que je voulais modéliser une seule personne en javascript.
Chaque personne a un nom et un âge et une ville.
Donc, il ya beaucoup de façons que je pourrais faire que je pourrais avoir trois variables différentes nom âge et la ville, mais alors ils ne sont pas liés les uns aux autres.
Ils sont totalement séparés.
Donc, si je voulais les connecter, je pourrais utiliser un tableau comme je le fais ici var person est égal à tableau où le premier élément est le nom de Cindy.
Le deuxième élément est l'âge 32 et le dernier article est Missoula ou la ville.
Ce n'est pas vraiment une grande utilisation d'un tableau car ces données ne sont pas vraiment une liste.
Oui, nous pouvons le forcer dans un tableau, mais il ne se prête pas au format d'un tableau où nous avons des listes qui ont souvent un ordre logique.
Il n'y a vraiment pas d'ordre logique ici pour accéder à la ville hors de ce tableau.
Je voudrais écrire le support de personne aussi.
Et cela exige que je sache que la ville est à l'index aussi.
Donc, si je inverser accidentellement l'ordre et j'ai eu Traviss le nom index initiale 0, mais alors je mélange ces deux.
Donc j'ai eu à index 1 ville un âge à l'index 2.
Ensuite, si j'ai essayé d'accéder à la personne à la parenthèse 2, je obtiendrais l'âge au lieu de la ville.
Donc, tout cela est juste pour montrer qu'un tableau n'est pas la solution parfaite pour chaque situation.
Il ya beaucoup mieux structure de données pour nous d'utiliser ici qui est l'objet javascript.
Vous pouvez voir un exemple ci-dessous de la façon dont nous prendrions le tableau de la personne avec l'âge et la ville de nom et le transformer en un objet javascript.
La première chose que vous devriez remarquer est que nous avons des accolades plutôt que des crochets pour un tableau.
L'élément important suivant est que chaque élément de cet objet est une paire de valeurs clés.
Donc, nous avons une propriété Colan nom de la valeur est.
Âge est 32 ville est Missoula.
Cette diapositive montre exactement la même chose.
Nous avons une personne différente objet var personne égale accolades et à l'intérieur que nous mettons le nom d'être Travis âge d'être 21 en ville d'être L.A. ici nous avons un diagramme simple de ce que ressemble à cette structure de données.
Nous avons trois emplacements différents dans cet objet et il est vraiment important de noter que les objets n'ont pas construit dans l'ordre contrairement à un tableau où il ya un premier élément et un deuxième élément et un troisième élément.
Pensez aux éléments au lieu d'un objet donné comme juste flottant à l'intérieur s'il n'y a pas un ordre.
Aucune propriété ne vient en premier ou en second, peu importe comment je les ai déclarés dans quel ordre ils sont tous traités de la même manière.
Donc ce diagramme les montre dans un ordre, mais c'est juste parce que je devais choisir un ordre.
Donc vous pouvez voir Travis est stocké sous le nom de la clé.
21 est stocké sous l'âge clé.
Et L.A. est stocké sous la ville clé pour extraire des données d'un objet.
Nous avons deux choix.
Nous pouvons soit utiliser le nom des crochets de la personne de l'objet, puis le nom de la clé.
Donc, dans ce cas, je vais sortir Travis de l'objet personne.
Donc, je droite personne entre crochets nom entre guillemets.
C'est donc très similaire aux tableaux.
La seule différence est que ce n'est pas un nombre.
C'est une chaîne.
L'autre option est d'utiliser la notation point notation point est un peu plus courte et plus simple.
Le nom et le nom du Point de Personne Droit doit correspondre évidemment au nom de la clé et cela nous donnera aussi Travis.
Je vais aller de l'avant et démontrer que dans le con ..
Je vais faire un nouvel objet appelé chien et mon chien va avoir un nom de propriété comme toujours.
Rusty Il est le meilleur chien et la moitié de la race.
Il est un mâle Lassally âge et il a trois ans.
Donc ça me donne mon chien objet.
Et si nous le regardons dans la console, vous pouvez le voir, il me dit que c'est un objet.
Votre nom est resti race que la boue âges 3.
Donc, si je veux accéder à son âge hors de l'objet chien, je peux faire le premier chien intact et ensuite dans l'âge de quotes ils obtiennent trois ou je peux faire l'âge de point de chien et je reçois aussi trois.
C'est à vous d'utiliser l'un ou l'autre.
Je préfère utiliser l'âge chien chien, car il est plus court.
Vous n'avez pas à utiliser les guillemets.
Vous n'avez pas besoin de doubles crochets des deux côtés.
Vous en avez juste besoin.
Mais il ya quelques différences sur cette diapositive.
Je montre trois des principales différences.
Vous ne pouvez donc pas utiliser la notation de point si la propriété commence par un nombre.
Donc, vous pouvez voir que ici un objet à DOT un blah n'est pas valide.
Mais si j'avais une propriété appelée One blah, je devrais utiliser des crochets et le mettre entre guillemets et c'est juste la façon dont il est mis en place en javascript.
Je vais sauter au troisième exemple ici qui est que vous ne pouvez pas utiliser la notation de point si votre nom de propriété a un espace dedans comme la couleur de fav.
Évidemment, cela ne fonctionne pas.
Javascript pense que nous avons accès à dot fav Donc si nous voulons une propriété avec l'espace qui n'est pas vraiment une bonne pratique de toute façon, mais si nous le faisions, nous aurions besoin d'utiliser des guillemets.
Fav.
Couleur de l'espace à l'aide de la notation entre crochets.
Et puis l'exemple du milieu montre que vous pouvez rechercher des choses en utilisant une variable.
Si vous utilisez la notation entre parenthèses.
Donc, si j'ai une variable ici appelée chaîne ou comme TR Et elle est égale au nom entre guillemets si j'essaie et faire un objet comme TR Il cherchera juste la propriété comme TR Mais si je fais un peu d'objet crochet car TR Il va Évaluer comme TR qui nous donne le nom entre guillemets.
Donc, cela recherchera alors la propriété name dans un objet quelconque.
C'est quelque chose que nous allons voir de temps en temps.
Il vaut donc la peine de connaître la différence.
Vous pouvez utiliser la notation entre crochets en utilisant un nom de variable pour rechercher une propriété.
La prochaine chose que nous voulons faire est de pouvoir mettre à jour les données à l'intérieur d'un objet.
Donc, c'est très similaire aux tableaux où nous accédons aux données, puis réattribuer avec un signe égal.
Donc, ici, vous pouvez voir que nous avons notre nom d'objet personne même que Travis âge est 21 ville est L.A. Si je veux ajouter un à l'âge Traviss c'est son anniversaire.
Tout ce que je dois faire est d'accéder à l'âge de la personne.
Je peux utiliser des crochets ou la notation de points, puis réaffecter.
Ainsi, l'âge de la personne est égal à 1.
Donc, cela va ajouter une personne que l'âge est maintenant 22 ou je peux utiliser la ville dot dot et réattribuer que d'être Londres.
Donc la personne vers le haut de la ville égalise Londres placera maintenant la personne pour avoir la ville de Londres.
Donc, juste pour le démontrer.
Revenons à notre objet de chien qui a le nom comme les éleveurs rouillés mutt.
L'âge est de trois ans.
Rusty vient d'avoir un anniversaire donc je vais changer son chien âge.
Âge égaux et je pourrais soit faire cela équivaut à quatre qui est juste va le faire quatre peu importe quoi et je peux regarder chien.
Ou je pourrais chien.
Âge plus est égal à un qui ajoutera juste un à l'âge actuel et qui nous donne cinq.
Je vais également démontrer faire cela avec la notation crochet.
Disons que je veux changer le nom de Rusty pour être son surnom de Tater.
J'écrirais le nom de crochet de chien et cela me donne juste resti et puis je vais le réaffecter pour être Tator.
Et si vous regardez le chien, nous avons maintenant nommé Tator libéré à l'âge de 5 ans.
Il existe quelques façons différentes d'initialiser des objets comme nous l'avons vu avec une course afin que nous puissions soit faire un objet vide d'abord comme nous l'avons ici.
Var personne égale accolades vides et puis nous pouvons ajouter les données après le fait.
Une pièce à la fois.
Le nom de personne est la personne de Travis que l'âge 21 personne que la ville est L.A. nous pouvons le faire tout à la fois qui est ce que nous avons vu jusqu'ici s'appelle la notation d'objet littéral.
Jusqu'à présent personne égale et puis à l'intérieur des accolades Je viens d'écrire le nom de ma propriété Travis âge appel et 21 ville Colan L.A. et la dernière façon que vous ne verrez pas très souvent jusqu'à beaucoup plus tard en javascript.
Il a dit que je peux utiliser le nouvel objet qui est une fonction comme un nouveau tableau qui va nous faire un nouvel objet et nous le renvoyer comme un objet vide.
Et puis je peux ajouter la personne de nom de personne pas l'âge en ville de personne.
Vous verrez donc cette syntaxe et cette syntaxe beaucoup plus souvent pour l'instant.
Un autre point que je voudrais faire sur les objets est que, tout comme les tableaux, ils peuvent contenir n'importe quelle sorte de données.
Donc nos données peuvent être des nombres ou des chaînes ou des booléens un tableau même un autre objet comme vous pouvez le voir ici.
Tout comme les tableaux nous pouvons mélanger et assortir autant que nous aimerions.