1 00:00:00,780 --> 00:00:01,860 Nous saluons le retour. 2 00:00:01,860 --> 00:00:09,250 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. 3 00:00:09,270 --> 00:00:12,660 Nous allons introduire une autre structure de données appelée l'objet. 4 00:00:13,140 --> 00:00:16,070 Nous avons donc deux objectifs principaux, comme nous l'avons fait avec les tableaux. 5 00:00:16,080 --> 00:00:20,070 Nous voulons d'abord comprendre ce que les objets sont pourquoi nous les utilisons. 6 00:00:20,100 --> 00:00:21,900 Comment se comparent-ils à un tableau. 7 00:00:21,900 --> 00:00:26,350 Et puis le deuxième objectif est de savoir comment écrire un code en utilisant des objets javascript. 8 00:00:26,790 --> 00:00:29,370 Allons-y et commencez. 9 00:00:29,400 --> 00:00:31,470 Voici donc une situation hypothétique. 10 00:00:31,470 --> 00:00:35,730 Supposons que je voulais modéliser une seule personne en javascript. 11 00:00:35,760 --> 00:00:38,850 Chaque personne a un nom et un âge et une ville. 12 00:00:38,850 --> 00:00:46,580 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. 13 00:00:46,590 --> 00:00:47,780 Ils sont totalement séparés. 14 00:00:47,970 --> 00:00:57,510 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. 15 00:00:57,600 --> 00:01:03,780 Le deuxième élément est l'âge 32 et le dernier article est Missoula ou la ville. 16 00:01:03,780 --> 00:01:08,510 Ce n'est pas vraiment une grande utilisation d'un tableau car ces données ne sont pas vraiment une liste. 17 00:01:08,760 --> 00:01:16,440 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. 18 00:01:16,530 --> 00:01:20,770 Il n'y a vraiment pas d'ordre logique ici pour accéder à la ville hors de ce tableau. 19 00:01:21,000 --> 00:01:23,970 Je voudrais écrire le support de personne aussi. 20 00:01:24,270 --> 00:01:28,360 Et cela exige que je sache que la ville est à l'index aussi. 21 00:01:28,500 --> 00:01:36,530 Donc, si je inverser accidentellement l'ordre et j'ai eu Traviss le nom index initiale 0, mais alors je mélange ces deux. 22 00:01:36,540 --> 00:01:41,300 Donc j'ai eu à index 1 ville un âge à l'index 2. 23 00:01:41,520 --> 00:01:48,060 Ensuite, si j'ai essayé d'accéder à la personne à la parenthèse 2, je obtiendrais l'âge au lieu de la ville. 24 00:01:48,060 --> 00:01:53,370 Donc, tout cela est juste pour montrer qu'un tableau n'est pas la solution parfaite pour chaque situation. 25 00:01:53,370 --> 00:01:58,040 Il ya beaucoup mieux structure de données pour nous d'utiliser ici qui est l'objet javascript. 26 00:01:58,110 --> 00:02:05,630 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. 27 00:02:05,790 --> 00:02:10,820 La première chose que vous devriez remarquer est que nous avons des accolades plutôt que des crochets pour un tableau. 28 00:02:10,890 --> 00:02:15,470 L'élément important suivant est que chaque élément de cet objet est une paire de valeurs clés. 29 00:02:15,750 --> 00:02:21,050 Donc, nous avons une propriété Colan nom de la valeur est. 30 00:02:21,180 --> 00:02:25,500 Âge est 32 ville est Missoula. 31 00:02:25,500 --> 00:02:27,360 Cette diapositive montre exactement la même chose. 32 00:02:27,450 --> 00:02:43,020 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. 33 00:02:43,020 --> 00:02:53,690 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. 34 00:02:53,700 --> 00:02:59,040 Pensez aux éléments au lieu d'un objet donné comme juste flottant à l'intérieur s'il n'y a pas un ordre. 35 00:02:59,040 --> 00:03:05,600 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. 36 00:03:05,610 --> 00:03:10,180 Donc ce diagramme les montre dans un ordre, mais c'est juste parce que je devais choisir un ordre. 37 00:03:10,680 --> 00:03:14,620 Donc vous pouvez voir Travis est stocké sous le nom de la clé. 38 00:03:14,850 --> 00:03:17,220 21 est stocké sous l'âge clé. 39 00:03:17,370 --> 00:03:23,190 Et L.A. est stocké sous la ville clé pour extraire des données d'un objet. 40 00:03:23,190 --> 00:03:24,970 Nous avons deux choix. 41 00:03:25,200 --> 00:03:31,800 Nous pouvons soit utiliser le nom des crochets de la personne de l'objet, puis le nom de la clé. 42 00:03:32,130 --> 00:03:35,820 Donc, dans ce cas, je vais sortir Travis de l'objet personne. 43 00:03:35,820 --> 00:03:39,610 Donc, je droite personne entre crochets nom entre guillemets. 44 00:03:39,630 --> 00:03:41,620 C'est donc très similaire aux tableaux. 45 00:03:41,670 --> 00:03:43,920 La seule différence est que ce n'est pas un nombre. 46 00:03:43,950 --> 00:03:45,890 C'est une chaîne. 47 00:03:45,930 --> 00:03:51,140 L'autre option est d'utiliser la notation point notation point est un peu plus courte et plus simple. 48 00:03:51,150 --> 00:03:59,610 Le nom et le nom du Point de Personne Droit doit correspondre évidemment au nom de la clé et cela nous donnera aussi Travis. 49 00:03:59,880 --> 00:04:02,320 Je vais aller de l'avant et démontrer que dans le con .. 50 00:04:02,340 --> 00:04:10,640 Je vais faire un nouvel objet appelé chien et mon chien va avoir un nom de propriété comme toujours. 51 00:04:10,740 --> 00:04:14,390 Rusty Il est le meilleur chien et la moitié de la race. 52 00:04:14,760 --> 00:04:22,140 Il est un mâle Lassally âge et il a trois ans. 53 00:04:22,590 --> 00:04:24,720 Donc ça me donne mon chien objet. 54 00:04:24,840 --> 00:04:28,350 Et si nous le regardons dans la console, vous pouvez le voir, il me dit que c'est un objet. 55 00:04:28,350 --> 00:04:32,180 Votre nom est resti race que la boue âges 3. 56 00:04:32,190 --> 00:04:47,970 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. 57 00:04:48,120 --> 00:04:50,190 C'est à vous d'utiliser l'un ou l'autre. 58 00:04:50,190 --> 00:04:53,100 Je préfère utiliser l'âge chien chien, car il est plus court. 59 00:04:53,100 --> 00:04:54,380 Vous n'avez pas à utiliser les guillemets. 60 00:04:54,390 --> 00:04:56,570 Vous n'avez pas besoin de doubles crochets des deux côtés. 61 00:04:56,700 --> 00:04:57,880 Vous en avez juste besoin. 62 00:04:58,350 --> 00:05:01,100 Mais il ya quelques différences sur cette diapositive. 63 00:05:01,110 --> 00:05:03,750 Je montre trois des principales différences. 64 00:05:04,140 --> 00:05:08,850 Vous ne pouvez donc pas utiliser la notation de point si la propriété commence par un nombre. 65 00:05:08,850 --> 00:05:14,580 Donc, vous pouvez voir que ici un objet à DOT un blah n'est pas valide. 66 00:05:15,090 --> 00:05:23,040 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. 67 00:05:23,040 --> 00:05:31,450 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. 68 00:05:31,500 --> 00:05:33,240 Évidemment, cela ne fonctionne pas. 69 00:05:33,240 --> 00:05:42,600 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. 70 00:05:42,620 --> 00:05:43,130 Fav. 71 00:05:43,170 --> 00:05:46,150 Couleur de l'espace à l'aide de la notation entre crochets. 72 00:05:46,890 --> 00:05:51,370 Et puis l'exemple du milieu montre que vous pouvez rechercher des choses en utilisant une variable. 73 00:05:51,420 --> 00:05:53,160 Si vous utilisez la notation entre parenthèses. 74 00:05:53,370 --> 00:06:14,970 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. 75 00:06:14,970 --> 00:06:19,560 Donc, cela recherchera alors la propriété name dans un objet quelconque. 76 00:06:19,560 --> 00:06:22,290 C'est quelque chose que nous allons voir de temps en temps. 77 00:06:22,320 --> 00:06:24,040 Il vaut donc la peine de connaître la différence. 78 00:06:24,060 --> 00:06:29,700 Vous pouvez utiliser la notation entre crochets en utilisant un nom de variable pour rechercher une propriété. 79 00:06:29,820 --> 00:06:34,140 La prochaine chose que nous voulons faire est de pouvoir mettre à jour les données à l'intérieur d'un objet. 80 00:06:34,410 --> 00:06:40,190 Donc, c'est très similaire aux tableaux où nous accédons aux données, puis réattribuer avec un signe égal. 81 00:06:40,470 --> 00:06:51,230 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. 82 00:06:51,450 --> 00:06:54,160 Tout ce que je dois faire est d'accéder à l'âge de la personne. 83 00:06:54,570 --> 00:06:58,430 Je peux utiliser des crochets ou la notation de points, puis réaffecter. 84 00:06:58,560 --> 00:07:01,170 Ainsi, l'âge de la personne est égal à 1. 85 00:07:01,710 --> 00:07:09,500 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. 86 00:07:09,660 --> 00:07:15,490 Donc la personne vers le haut de la ville égalise Londres placera maintenant la personne pour avoir la ville de Londres. 87 00:07:15,510 --> 00:07:16,990 Donc, juste pour le démontrer. 88 00:07:17,280 --> 00:07:22,200 Revenons à notre objet de chien qui a le nom comme les éleveurs rouillés mutt. 89 00:07:22,230 --> 00:07:23,850 L'âge est de trois ans. 90 00:07:23,880 --> 00:07:28,050 Rusty vient d'avoir un anniversaire donc je vais changer son chien âge. 91 00:07:28,080 --> 00:07:36,260 Â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. 92 00:07:36,930 --> 00:07:39,070 Ou je pourrais chien. 93 00:07:39,150 --> 00:07:45,940 Âge plus est égal à un qui ajoutera juste un à l'âge actuel et qui nous donne cinq. 94 00:07:45,990 --> 00:07:49,180 Je vais également démontrer faire cela avec la notation crochet. 95 00:07:49,230 --> 00:07:53,110 Disons que je veux changer le nom de Rusty pour être son surnom de Tater. 96 00:07:53,450 --> 00:08:02,730 J'écrirais le nom de crochet de chien et cela me donne juste resti et puis je vais le réaffecter pour être Tator. 97 00:08:03,120 --> 00:08:10,200 Et si vous regardez le chien, nous avons maintenant nommé Tator libéré à l'âge de 5 ans. 98 00:08:10,320 --> 00:08:19,540 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. 99 00:08:19,740 --> 00:08:24,560 Var personne égale accolades vides et puis nous pouvons ajouter les données après le fait. 100 00:08:24,600 --> 00:08:26,240 Une pièce à la fois. 101 00:08:26,360 --> 00:08:37,040 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. 102 00:08:37,140 --> 00:08:51,260 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. 103 00:08:51,330 --> 00:08:59,740 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. 104 00:08:59,880 --> 00:09:03,570 Et puis je peux ajouter la personne de nom de personne pas l'âge en ville de personne. 105 00:09:03,810 --> 00:09:08,940 Vous verrez donc cette syntaxe et cette syntaxe beaucoup plus souvent pour l'instant. 106 00:09:08,940 --> 00:09:14,330 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. 107 00:09:14,610 --> 00:09:21,410 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. 108 00:09:21,630 --> 00:09:24,460 Tout comme les tableaux nous pouvons mélanger et assortir autant que nous aimerions.