1
00:00:00,780 --> 00:00:01,860
Dar una buena acogida.

2
00:00:01,860 --> 00:00:06,930
Así que en los últimos videos hemos estado hablando de matrices de JavaScript que son la primera estructura de datos

3
00:00:06,960 --> 00:00:09,250
de la que hemos hablado en los próximos videos.

4
00:00:09,270 --> 00:00:12,660
Vamos a introducir otra estructura de datos llamada objeto.

5
00:00:13,140 --> 00:00:16,070
Entonces tenemos dos objetivos principales tal como lo hicimos con las matrices.

6
00:00:16,080 --> 00:00:20,070
Primero queremos entender qué objetos son los que los utilizamos.

7
00:00:20,100 --> 00:00:21,900
¿Cómo se comparan con una matriz?

8
00:00:21,900 --> 00:00:26,350
Y luego, el segundo objetivo es cómo escribir código usando objetos JavaScript.

9
00:00:26,790 --> 00:00:29,370
Avancemos y comencemos.

10
00:00:29,400 --> 00:00:31,470
Entonces aquí hay una situación hipotética.

11
00:00:31,470 --> 00:00:35,730
Supongamos que quería modelar a una sola persona en javascript.

12
00:00:35,760 --> 00:00:38,850
Cada persona tiene un nombre, una edad y una ciudad.

13
00:00:38,850 --> 00:00:45,030
Así que hay muchas maneras en que podría hacer eso, podría tener tres variables diferentes, nombrar la edad y la ciudad, pero

14
00:00:45,030 --> 00:00:46,580
luego no están relacionadas entre sí.

15
00:00:46,590 --> 00:00:47,780
Están totalmente separados.

16
00:00:47,970 --> 00:00:54,560
como la que estoy haciendo aquí. Var persona es igual a la matriz, donde el primer elemento es el nombre Cindy.

17
00:00:54,930 --> 00:00:57,510
Entonces, si quisiera conectarlos, podría usar una matriz

18
00:00:57,600 --> 00:01:03,780
El segundo elemento tiene 32 años y el último elemento es Missoula o la ciudad.

19
00:01:03,780 --> 00:01:08,510
Esto no es realmente un gran uso de una matriz porque estos datos no son realmente una lista.

20
00:01:08,760 --> 00:01:13,920
Sí, podemos forzarlo en una matriz pero no se presta al formato de una matriz donde tenemos

21
00:01:13,920 --> 00:01:16,440
listas que a menudo tienen un orden lógico.

22
00:01:16,530 --> 00:01:20,770
Realmente no hay un orden lógico aquí para acceder a la ciudad fuera de este conjunto.

23
00:01:21,000 --> 00:01:23,970
Tendría que escribir el corchete de persona también.

24
00:01:24,270 --> 00:01:28,360
Y eso requiere que sepa que la ciudad también está en el índice.

25
00:01:28,500 --> 00:01:36,030
Entonces, si invierto accidentalmente el orden y tuve Traviss el nombre de índice inicial 0, entonces mezclo estos

26
00:01:36,030 --> 00:01:36,530
dos.

27
00:01:36,540 --> 00:01:41,300
Así que tuve en el índice 1 ciudad una edad en el índice 2.

28
00:01:41,520 --> 00:01:48,060
Entonces, si traté de acceder a la persona para el paréntesis 2, obtendría la edad en lugar de la ciudad.

29
00:01:48,060 --> 00:01:53,370
Así que esto es solo para mostrar que una matriz no es la solución perfecta para cada situación.

30
00:01:53,370 --> 00:01:58,040
Hay una estructura de datos mucho mejor para nosotros para usar aquí, que es el objeto javascript.

31
00:01:58,110 --> 00:02:03,930
Puede ver un ejemplo aquí abajo de cómo tomaríamos el conjunto persona con nombre edad y ciudad y lo

32
00:02:03,930 --> 00:02:05,630
convertiríamos en un objeto javascript.

33
00:02:05,790 --> 00:02:10,140
Lo primero que debe observar es que tenemos llaves ortopédicas en lugar de corchetes para una matriz.

34
00:02:10,890 --> 00:02:15,470
La siguiente pieza importante es que cada elemento de este objeto es un par de valores clave.

35
00:02:15,750 --> 00:02:21,050
Entonces, tenemos una propiedad con el nombre de valor Colan.

36
00:02:21,180 --> 00:02:25,500
La edad es 32 ciudad es Missoula.

37
00:02:25,500 --> 00:02:27,360
Esta diapositiva muestra exactamente lo mismo.

38
00:02:27,450 --> 00:02:34,860
Tenemos una persona diferente objeto var persona igual a llaves y dentro de que estamos poniendo nombre para ser Travis edad para ser

39
00:02:34,860 --> 00:02:42,060
21 en la ciudad para ser L. A. Aquí tenemos un diagrama simple de cómo se ve

40
00:02:42,060 --> 00:02:43,020
esta estructura de datos.

41
00:02:43,020 --> 00:02:47,970
Tenemos tres ranuras diferentes en este objeto y es muy importante tener en cuenta que los objetos no

42
00:02:48,000 --> 00:02:53,690
están construidos en orden a diferencia de una matriz donde hay un primer elemento y un segundo y un tercer elemento.

43
00:02:53,700 --> 00:02:58,380
Piense en los artículos en lugar de en un objeto dado como si estuvieran flotando adentro si no

44
00:02:58,380 --> 00:02:59,040
hubiera un pedido.

45
00:02:59,040 --> 00:03:04,860
Ninguna propiedad es lo primero o lo segundo, no importa cómo las haya declarado, en el orden en que todas sean tratadas de

46
00:03:04,860 --> 00:03:05,600
la misma manera.

47
00:03:05,610 --> 00:03:10,180
Entonces, este diagrama los muestra en un pedido, pero es solo porque tuve que elegir un pedido.

48
00:03:10,680 --> 00:03:14,620
Entonces puede ver que Travis está almacenado bajo el nombre de la clave.

49
00:03:14,850 --> 00:03:17,220
21 se almacena debajo de la edad clave.

50
00:03:17,370 --> 00:03:23,190
Y yo. A. se almacena debajo de la ciudad clave para recuperar datos de un objeto.

51
00:03:23,190 --> 00:03:24,970
Tenemos dos opciones.

52
00:03:25,200 --> 00:03:31,800
Podemos usar el nombre de los corchetes de la persona objeto y luego el nombre de la clave.

53
00:03:32,130 --> 00:03:35,820
Entonces, en este caso, estoy sacando a Travis del objeto de persona.

54
00:03:35,820 --> 00:03:39,610
Así que el nombre correcto de corchetes entre corchetes.

55
00:03:39,630 --> 00:03:41,620
Entonces eso es muy similar a las matrices.

56
00:03:41,670 --> 00:03:43,920
La única diferencia es que este no es un número.

57
00:03:43,950 --> 00:03:45,890
Esta es una cadena.

58
00:03:45,930 --> 00:03:51,140
La otra opción es usar la notación de puntos notación punto es un poco más corto y más simple.

59
00:03:51,150 --> 00:03:58,500
El nombre y el nombre de la persona derecha deben coincidir obviamente con el nombre de la tecla y eso también nos

60
00:03:58,500 --> 00:03:59,610
dará a Travis.

61
00:03:59,880 --> 00:04:02,320
Voy a seguir adelante y demostrar eso en el estafador. Voy a hacer un nuevo objeto llamado perro y mi perro va a tener un nombre de propiedad como siempre.

62
00:04:02,340 --> 00:04:10,640
Rusty He es el mejor perro y mitad de raza.

63
00:04:10,740 --> 00:04:14,390
Es un veterano de Lassally y tiene tres.

64
00:04:14,760 --> 00:04:22,140
Entonces eso me da mi objeto perro.

65
00:04:22,590 --> 00:04:24,720
Y si lo miramos en la consola, puede ver que me dice que es un objeto.

66
00:04:24,840 --> 00:04:28,350
Su nombre es raza resti ya que el lodo tiene 3 años.

67
00:04:28,350 --> 00:04:32,180
Entonces, si quiero tener acceso a su edad fuera del objeto del

68
00:04:32,190 --> 00:04:39,990
perro, puedo hacer el primer perro intacto y luego, a mitad de precio, obtienen tres o puedo ponerle edad al perro y también obtengo tres.

69
00:04:40,350 --> 00:04:47,970
Depende de usted usar cualquiera de los dos.

70
00:04:48,120 --> 00:04:50,190
Prefiero usar la edad del perro porque es más corta.

71
00:04:50,190 --> 00:04:53,100
No tiene que usar las comillas.

72
00:04:53,100 --> 00:04:54,380
No necesita doble paréntesis en ninguno de los lados.

73
00:04:54,390 --> 00:04:56,570
Solo lo necesitas.

74
00:04:56,700 --> 00:04:57,880
Pero hay algunas diferencias en esta diapositiva.

75
00:04:58,350 --> 00:05:01,100
Demuestro tres de las principales diferencias.

76
00:05:01,110 --> 00:05:03,750
Por lo tanto, no puede usar la notación de puntos si la propiedad comienza con un número.

77
00:05:04,140 --> 00:05:08,850
Entonces puede ver que aquí algún objeto en DOT one blah no es válido.

78
00:05:08,850 --> 00:05:14,580
Pero si tuviera una propiedad llamada One blah, tendría que usar corchetes

79
00:05:15,090 --> 00:05:20,660
y ponerla entre comillas, y así es como está configurada en javascript.

80
00:05:20,660 --> 00:05:23,040
de tu propiedad tiene un espacio como color favorito.

81
00:05:23,040 --> 00:05:28,290
Voy a saltar al tercer ejemplo aquí, que es que no puedes usar la notación de puntos si el nombre

82
00:05:28,290 --> 00:05:31,450
Obviamente esto no funciona.

83
00:05:31,500 --> 00:05:33,240
Javascript piensa que estamos accediendo a dot fav

84
00:05:33,240 --> 00:05:38,820
Entonces, si queremos una propiedad con el espacio que no es realmente una buena práctica de todos modos, pero si lo hiciéramos, tendríamos que usar comillas.

85
00:05:38,820 --> 00:05:42,600
Fav.

86
00:05:42,620 --> 00:05:43,130
Color de espacio usando notación de corchetes.

87
00:05:43,170 --> 00:05:46,150
Y luego el ejemplo del medio muestra que puedes buscar cosas usando una variable.

88
00:05:46,890 --> 00:05:51,370
Si usa la notación de corchetes.

89
00:05:51,420 --> 00:05:53,160
Entonces si tengo una variable

90
00:05:53,370 --> 00:06:00,900
aquí llamada string o como TR Y es igual a nombrarlo entre comillas si intento y hago algún objeto como TR Solo

91
00:06:00,900 --> 00:06:09,300
buscaré la propiedad como TR Pero si hago un corchete de objeto como TR Voy a evaluar como TR que nos da nombre entre comillas.

92
00:06:09,300 --> 00:06:14,970
Entonces, esto buscará la propiedad del nombre en algún objeto.

93
00:06:14,970 --> 00:06:19,560
Entonces esto es algo que realmente veremos de vez en cuando.

94
00:06:19,560 --> 00:06:22,290
Por lo tanto, vale la pena conocer la diferencia aquí.

95
00:06:22,320 --> 00:06:24,040
Puede usar la notación de corchetes utilizando un nombre de variable para buscar una propiedad.

96
00:06:24,060 --> 00:06:29,700
Lo siguiente que queremos hacer es poder actualizar los datos dentro de un objeto.

97
00:06:29,820 --> 00:06:34,140
Por lo tanto, es muy similar a las matrices en las que accedemos a los datos y luego los reasignamos con un signo igual.

98
00:06:34,410 --> 00:06:40,190
Entonces aquí puede ver que tenemos nuestro mismo nombre de objeto de persona como Travis age is 21 city is L. A. Si quiero agregar uno a la edad de

99
00:06:40,470 --> 00:06:47,970
Travis, es su cumpleaños.

100
00:06:47,970 --> 00:06:51,230
Todo lo que necesito hacer es acceder a la edad de la persona.

101
00:06:51,450 --> 00:06:54,160
Puedo usar corchetes o la notación de puntos y luego reasignarlos.

102
00:06:54,570 --> 00:06:58,430
Entonces la persona edad más es igual a 1.

103
00:06:58,560 --> 00:07:01,170
Entonces, eso agregará una persona con

104
00:07:01,710 --> 00:07:08,940
esa edad que ahora tiene 22 o puedo usar person dot city y reasignarlo para que sea Londres.

105
00:07:08,940 --> 00:07:09,500
Así que la persona en la ciudad es igual a Londres ahora establecerá una persona para tener la ciudad de Londres.

106
00:07:09,660 --> 00:07:15,490
Entonces solo para demostrar eso.

107
00:07:15,510 --> 00:07:16,990
Regresemos a nuestro objeto de perro que tiene nombre como Rusty breeders mutt.

108
00:07:17,280 --> 00:07:22,200
La edad es tres.

109
00:07:22,230 --> 00:07:23,850
Rusty acaba de tener un cumpleaños, así que voy a cambiar su perro de edad.

110
00:07:23,880 --> 00:07:28,050
La edad es igual y yo podría hacer esto igual a

111
00:07:28,080 --> 00:07:34,080
cuatro, que simplemente lo hará cuatro sin importar qué y yo pueda mirar al perro.

112
00:07:34,730 --> 00:07:36,260
O podría hacer perro.

113
00:07:36,930 --> 00:07:39,070
Edad más es igual a uno que simplemente agregará uno a la edad existente y eso nos da cinco.

114
00:07:39,150 --> 00:07:45,940
También demostraré hacer eso con la notación de corchetes.

115
00:07:45,990 --> 00:07:49,180
Digamos que quiero cambiar el nombre de Rusty para que sea su apodo Tater.

116
00:07:49,230 --> 00:07:53,110
Escribiría el nombre del corchete cuadrado del perro y eso simplemente me da resti y luego lo reasignaré para que sea Tator.

117
00:07:53,450 --> 00:08:01,710
Y si miras al perro, ahora hemos llamado a Tator liberado a los 5 años.

118
00:08:03,120 --> 00:08:10,200
Hay algunas maneras diferentes de inicializar objetos tal como lo vimos con una carrera para

119
00:08:10,320 --> 00:08:16,050
que podamos hacer primero un objeto vacío como el que tenemos aquí.

120
00:08:16,050 --> 00:08:19,540
Var persona equivale a llaves vacías vacías y luego podemos agregar los datos después del hecho.

121
00:08:19,740 --> 00:08:24,560
Una pieza a la vez.

122
00:08:24,600 --> 00:08:26,240
El nombre de la persona es Travis persona que tiene 21 años esa persona es L. A. podemos hacerlo todo a la vez, que es

123
00:08:26,360 --> 00:08:33,330
lo que hemos visto hasta ahora se llama notación literal del objeto.

124
00:08:33,330 --> 00:08:37,040
Hasta ahora, la persona es igual y luego dentro de

125
00:08:37,140 --> 00:08:43,860
las llaves me limito a escribir el nombre de mi propiedad Travis age call y 21 ciudad Colan L. A. y la última manera que no verá muy seguido hasta mucho más tarde en javascript.

126
00:08:43,860 --> 00:08:50,910
Dijo que puedo usar el nuevo objeto que

127
00:08:51,330 --> 00:08:57,450
es una función como una nueva matriz que nos convertirá en un nuevo objeto y nos lo devolverá como un objeto vacío.

128
00:08:57,510 --> 00:08:59,740
Y luego puedo agregar persona nombre persona no edad en persona ciudad.

129
00:08:59,880 --> 00:09:03,570
Así que definitivamente verán esta sintaxis y esta sintaxis mucho más a menudo por el momento.

130
00:09:03,810 --> 00:09:08,940
Otro punto que me gustaría hacer sobre los objetos es que, al igual que las matrices, pueden contener cualquier tipo de datos.

131
00:09:08,940 --> 00:09:14,160
Entonces nuestros datos pueden ser números o cadenas o booleanos, una matriz, incluso otro objeto, como puede ver aquí.

132
00:09:14,610 --> 00:09:21,410
Al igual que las matrices, podemos mezclar y combinar tanto como nos gustaría.

133
00:09:21,630 --> 00:09:24,460
Así que vamos a detenernos aquí por ahora en

134
00:09:24,480 --> 00:09:28,770
el siguiente video vamos a hacer una comparación entre objetos y borrar la sintaxis

135
00:09:28,800 --> 00:09:29,850