1 00:00:00,410 --> 00:00:01,880 D'accord, nous reviendrons. 2 00:00:02,100 --> 00:00:08,200 Donc, dans cette vidéo, nous allons discuter de notre première structure de données principale qui est quelque chose appelé le tableau. 3 00:00:09,060 --> 00:00:10,520 Donc, nous avons quelques objectifs ici. 4 00:00:10,710 --> 00:00:15,340 La première est que nous voulons comprendre ce que sont les tableaux et pourquoi nous les utilisons. 5 00:00:15,810 --> 00:00:18,210 Ensuite, nous voulons les utiliser dans notre code. 6 00:00:18,540 --> 00:00:22,840 Commençons par parler de ce que le point d'un tableau est conceptuellement. 7 00:00:23,130 --> 00:00:25,930 Supposons donc que je voulais modeler un groupe d'amis. 8 00:00:26,130 --> 00:00:32,380 Donc, chaque ami est une chaîne avec leur nom comme Charlie et Liz David et Mathias. 9 00:00:32,640 --> 00:00:35,130 Ainsi je pourrais faire pour des variables d'ami. 10 00:00:35,160 --> 00:00:42,880 Chacun est une variable distincte et si je voulais ajouter un autre je devrais sauver notre ami 5 est égal à un autre nom. 11 00:00:43,020 --> 00:00:47,700 Et puis j'ai besoin de savoir pour le prochain je dois faire la médecine légale et puis ami 7. 12 00:00:47,880 --> 00:00:50,340 C'est donc problématique pour quelques raisons. 13 00:00:50,340 --> 00:00:53,730 L'un est que ce code n'est pas ce que nous considérons comme sec. 14 00:00:53,730 --> 00:00:56,040 Il ya beaucoup de code répété ici. 15 00:00:56,040 --> 00:00:59,150 Aussi ces amis ne sont pas liés les uns aux autres. 16 00:00:59,220 --> 00:01:00,490 Ils sont totalement séparés. 17 00:01:00,690 --> 00:01:02,640 Ce n'est donc pas un groupe d'amis. 18 00:01:02,940 --> 00:01:08,730 Donc c'est un cas d'utilisation parfait pour un tableau un tableau permet à ses données de groupe dans une liste. 19 00:01:09,060 --> 00:01:17,840 Ainsi, plutôt que d'avoir quatre variables distinctes, nous pouvons écrire une variable et à l'intérieur de celle-ci, nous stockons quatre noms différents. 20 00:01:17,880 --> 00:01:21,260 Examinons de plus près comment fonctionnent les tableaux. 21 00:01:21,420 --> 00:01:23,340 J'ai le même code d'exemple ici. 22 00:01:23,490 --> 00:01:26,940 Var amis égaux et puis crochets. 23 00:01:26,970 --> 00:01:30,080 Donc c'est ce qui dit javascript, c'est un tableau. 24 00:01:30,120 --> 00:01:40,610 Jusqu'à ce point ici, nous avons affaire à juste une variable javascript régulière où sur le côté droit nous pourrions juste avoir une chaîne ou un nombre ou booléen ou indéfini ou non. 25 00:01:40,800 --> 00:01:42,850 Mais au lieu nous avons un tableau. 26 00:01:43,260 --> 00:01:45,520 Les crochets représentent donc un tableau. 27 00:01:45,540 --> 00:01:48,960 Vous pouvez voir la parenthèse ouverte entre parenthèses fermées. 28 00:01:49,140 --> 00:01:53,070 Et à l'intérieur nous avons notre liste de données pour déclarer un tableau. 29 00:01:53,310 --> 00:01:55,230 C'est une liste séparée par des virgules. 30 00:01:55,320 --> 00:01:59,760 Donc, nous avons nos valeurs comme Charlie comma Liz virgule virgule David. 31 00:01:59,790 --> 00:02:00,780 MATHIAS. 32 00:02:00,780 --> 00:02:03,920 Et cela se traduit par un tableau de quatre items. 33 00:02:03,930 --> 00:02:15,750 La deuxième information importante sur les tableaux est qu'ils sont indexés comme des caractères dans une chaîne où il ya un nombre spécifique qui correspond à chaque caractère commençant à zéro. 34 00:02:16,020 --> 00:02:18,660 Les matrices sont également indexées à partir de zéro. 35 00:02:18,900 --> 00:02:22,270 Ainsi, chaque emplacement de ce tableau a un nombre correspondant. 36 00:02:22,410 --> 00:02:29,240 Lorsque nous faisons ce tableau ici avec ces quatre noms Voici un diagramme représentant la façon dont le tableau est créé en mémoire. 37 00:02:29,310 --> 00:02:39,340 Donc nous avons Charlie stocké avec le nombre zéro comme indice est avec un David avec deux Mathias avec trois. 38 00:02:39,600 --> 00:02:44,520 Nous utilisons ces indices de tableau tout le temps pour obtenir des données hors du tableau. 39 00:02:44,550 --> 00:02:46,770 Donc ici je suis initialiser le même tableau exact. 40 00:02:46,970 --> 00:02:54,290 Et si je veux obtenir Charlie hors de la matrice, j'ai besoin de connaître l'index qui correspond à Charlee qui est. 41 00:02:54,810 --> 00:02:56,820 Et puis tout ce que je fais est d'écrire des amis. 42 00:02:57,030 --> 00:02:59,450 Le crochet de nom de variable est 0. 43 00:02:59,580 --> 00:03:03,300 Tout comme nous le ferions pour la chaîne si je voulais le premier caractère à nouveau. 44 00:03:03,340 --> 00:03:09,940 La seule différence est que nous ne traitons pas avec une chaîne de caractères nous traitons avec un tableau de chaînes. 45 00:03:10,530 --> 00:03:13,930 Donc ami 0 va me donner Chartley. 46 00:03:14,190 --> 00:03:23,980 De même si j'ai fait des amis celui qui me donne des vies plus un coeur plus des amis deux me donne David et nous nous retrouvons avec Liz Hart. 47 00:03:24,060 --> 00:03:30,370 David, nous pouvons également utiliser les indices pour mettre à jour les valeurs du tableau. 48 00:03:30,630 --> 00:03:43,300 Donc, si Charlie veut changer son nom de mandrin tout ce que je dois faire est de trouver Charlie dans le tableau avec l'index zéro amis zéro et le mettre égale à une autre chaîne Chuck. 49 00:03:43,320 --> 00:03:47,460 Donc, notre tableau ressemble à ceci où nous avons Chuck à l'index 0. 50 00:03:47,460 --> 00:03:48,990 Même chose avec Liz. 51 00:03:49,020 --> 00:03:59,370 Elle change son nom en Lizzie, nous trouvons juste l'index correct pour Liz qui est un ami d'un égal à Lizzie comme vous pouvez le voir ici dans notre tableau. 52 00:03:59,370 --> 00:04:05,090 Maintenant, ressemble à Chuck à zéro Lizzy à 1. 53 00:04:05,520 --> 00:04:10,280 La prochaine caractéristique des tableaux est que nous pouvons également ajouter des données à un tableau existant. 54 00:04:10,290 --> 00:04:20,430 Donc, si j'ai un nouvel ami qui serait génial, je pourrais vraiment utiliser de nouveaux amis tout ce que je dois faire est d'accéder à des amis et de mettre un index ici qui n'existe pas encore. 55 00:04:20,430 --> 00:04:37,410 Donc dans ce cas pour elle et si je fais des amis pour la famille égale je vais obtenir un plomb ici index car je ne vais pas vous montrer une démonstration rapide dans la con. Je vais utiliser un tableau pour modéliser les couleurs pour le faire. 56 00:04:37,440 --> 00:04:53,030 Je vais définir un tableau de var couleurs égales et je vais mettre juste quelques couleurs là-dedans comme des cordes pour commencer rouge orange et jaune et je vais toucher entrer. 57 00:04:53,070 --> 00:04:55,480 J'ai maintenant ma gamme de couleurs défini. 58 00:04:55,670 --> 00:05:14,910 Si j'accède aux couleurs il a trois articles dedans et si je voulais imprimer orange je ferais des couleurs pour le paquet 1 parce qu'il a un index de 1 et je reçois orange si je voulais ajouter dans un autre élément après que le jaune je voulais ajouter En vert. 59 00:05:14,910 --> 00:05:17,880 Je devrais compter 0 1 2. 60 00:05:18,090 --> 00:05:20,410 Donc l'index de 3 est le suivant. 61 00:05:20,460 --> 00:05:25,240 Index trois couleurs trois égales vert. 62 00:05:25,540 --> 00:05:30,390 Et maintenant, si nous prenons un coup d'oeil aux couleurs, je deviens rouge orange jaune vert. 63 00:05:30,420 --> 00:05:33,930 Supposons que je voulais changer vert à vert foncé. 64 00:05:34,530 --> 00:05:36,120 Je dois d'abord y accéder. 65 00:05:36,180 --> 00:05:37,640 Donc couleurs 3. 66 00:05:37,710 --> 00:05:40,270 Il suffit de vérifier que c'est vert. 67 00:05:40,350 --> 00:05:47,490 Donc je vais maintenant changer les couleurs trois pour être vert foncé et c'est tout. 68 00:05:47,490 --> 00:05:57,300 Une note rapide si je fais quelque chose comme des couleurs de 10 est égal à Violet et je touche entrer. 69 00:05:57,740 --> 00:05:59,450 Et jetons un coup d'oeil à ce que les couleurs ressemble. 70 00:05:59,450 --> 00:06:06,280 Maintenant, vous pouvez voir que je reçois rouge orange jaune vert foncé, puis il montre indéfini. 71 00:06:06,290 --> 00:06:08,060 Heures 6. 72 00:06:08,070 --> 00:06:18,030 Donc, ce qui s'est passé ici, c'est que j'ai ajouté Violet un index de 10 et qui nous laisse avec beaucoup d'espace vide entre l'index de 3 et l'indice de 10. 73 00:06:18,060 --> 00:06:22,000 Donc javascript rend des espaces vides là et remplit certains avec undefined. 74 00:06:22,290 --> 00:06:25,680 Il ya donc un tas d'espace vide dans ce tableau qui n'est pas idéal. 75 00:06:25,680 --> 00:06:33,690 Donc, dans la prochaine vidéo, je vais vous montrer une autre façon d'ajouter des données où nous n'avons pas à suivre le nombre d'éléments dans notre tableau à un moment donné pour conclure ici. 76 00:06:33,690 --> 00:06:36,030 J'ai quelques autres notes sur les tableaux. 77 00:06:36,030 --> 00:06:40,130 La première est qu'il existe différentes façons de définir des tableaux. 78 00:06:40,170 --> 00:06:44,460 La première façon est de définir un tableau vide en utilisant des crochets. 79 00:06:44,760 --> 00:06:48,960 Dans ce cas, j'ai défini le tableau d'un ami, mais je n'ai malheureusement pas d'amis. 80 00:06:49,140 --> 00:06:51,200 Ce sont donc des crochets vides. 81 00:06:51,360 --> 00:06:59,560 L'autre façon de définir un tableau que vous pouvez rencontrer est d'écrire un nouveau tableau avec un capital A et des parenthèses après. 82 00:06:59,610 --> 00:07:05,130 Donc, je ne vais pas entrer dans trop de détails sur ce que c'est, mais penser à cela comme une fonction. 83 00:07:05,130 --> 00:07:06,020 C'est une fonction. 84 00:07:06,070 --> 00:07:07,570 Nous l'appelons entre parenthèses. 85 00:07:07,650 --> 00:07:10,520 Cela nous fait un nouveau tableau tout comme celui-ci. 86 00:07:10,650 --> 00:07:12,840 Donc, ils sont équivalents dans les deux cas. 87 00:07:12,840 --> 00:07:15,760 Nous avons un tableau d'amis qui est vide. 88 00:07:15,900 --> 00:07:19,370 Le point suivant est que les tableaux peuvent contenir n'importe quel type de données. 89 00:07:19,560 --> 00:07:32,130 Donc, vous les avez vus jusqu'ici avec des chaînes comme Charlie et Liz, mais nous pouvons les remplir avec des nombres avec des booléens sans indéfini avec des chaînes avec d'autres tableaux qui verront un peu plus tard. 90 00:07:32,340 --> 00:07:34,340 Nous pouvons donc remplir des tableaux avec toutes sortes de données. 91 00:07:34,590 --> 00:07:36,820 Et ils ne doivent pas tous être d'un type. 92 00:07:36,840 --> 00:07:43,170 Voici donc un exemple avec un nombre de boolean une chaîne et pas tout dans un tableau. 93 00:07:43,230 --> 00:07:48,640 La toute dernière chose que je vais souligner, c'est que les tableaux ont aussi une propriété length comme des chaînes. 94 00:07:48,960 --> 00:07:54,960 Dans cet exemple, je définis un tableau de quatre éléments et je ne lance rien de surprenant. 95 00:07:55,050 --> 00:07:56,430 Ça me donne quatre. 96 00:07:56,850 --> 00:07:59,490 Je vais ouvrir mon consul et le démontrer. 97 00:07:59,790 --> 00:08:04,400 Définissons un nouveau tableau ici appelé chiens et chiens. 98 00:08:04,500 --> 00:08:07,370 Je vais définir une chaîne. 99 00:08:07,510 --> 00:08:16,460 Rusty Wyatt et Ali comme ça. 100 00:08:16,740 --> 00:08:24,040 Et si je cours Dogstar en longueur je reçois trois parce que la longueur compte juste. 101 00:08:24,060 --> 00:08:25,480 Combien y a-t-il de choses là-dedans. 102 00:08:25,770 --> 00:08:31,140 Mais rappelez-vous que l'indice le plus élevé dans ce tableau est toujours un moins que la longueur. 103 00:08:31,200 --> 00:08:37,630 Donc, tout le est un index pour les chiens de support 2 et vous obtenez tous les. 104 00:08:37,710 --> 00:08:39,660 Donc, c'est important comme des cordes. 105 00:08:39,840 --> 00:08:46,230 Nous pouvons définir un nom de chaîne var égal à resti et nous appelons hotlink. 106 00:08:46,770 --> 00:08:54,000 Nous obtenons 5 parce qu'il ya cinq caractères, mais l'indice de Y est index pour le nom de quatre. 107 00:08:54,180 --> 00:08:55,410 Donne-moi pourquoi. 108 00:08:55,410 --> 00:08:58,700 Parce que les indices commencent à zéro. 109 00:08:58,710 --> 00:08:59,840 C'est bien pour ça, pour une course. 110 00:08:59,850 --> 00:09:02,780 Maintenant, dans la prochaine vidéo, nous allons avoir un problème rapide.