*ACTUALIZADO* JavaScript Complete la serie 2023 - parte 10: arenas y bucles | CM Code_Zone | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

*ACTUALIZADO* JavaScript Complete la serie 2023 - parte 10: arenas y bucles

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

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Clase de introducción - matrices

      3:37

    • 2.

      ¿Qué es un arreglo de ventas?

      6:20

    • 3.

      ¿Cómo creamos un arreglo de ventas?

      4:14

    • 4.

      Ejemplo de Array

      4:29

    • 5.

      Introducción al iterador de mutator

      1:08

    • 6.

      Ejemplos de iterador de mutator

      6:26

    • 7.

      Por qué es necesario bucle

      3:46

    • 8.

      Looping con un ejemplo de array

      8:06

    • 9.

      Ejemplo de bucle a través de objetos

      5:42

    • 10.

      Formas

      17:39

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

56

Estudiantes

--

Proyectos

Acerca de esta clase

BIENVENIDO A ESTA CLASES DE SKILLSHARE EN PROTOTIPOS

ESTO ES LA PARTE 10 DE MI SERIE COMPLETA DE JAVASCRIPT

¿Qué cubrimos en esta clase en particular?

cubriremos toneladas de información en esta serie entera, pero para la parte 11 nos concentraremos en prototipos de JavaScript.

JavaScript es un lenguaje basado en prototipos.

Pero, ¿qué significa exactamente esto? Bueno, cada vez que creamos una función con JavaScript, el motor de JavaScript agrega una propiedad de prototipo dentro de esa función. Y esta propiedad de prototipo es un objeto en el que podemos adjuntar métodos y propiedades. ¿Por qué es útil esto? Respuesta: permite que todos los demás objetos hereden estos métodos y propiedades de forma automática.

No puedes alejarte de los prototipos.

Todos los objetos de JavaScript heredan las propiedades y los métodos de un prototipo. Déjame decirlo de otra manera… cada objeto en JavaScript tiene una propiedad privada que contiene un enlace a otro objeto. Este otro objeto se llama prototipo. Para darte un ejemplo, el objeto Array hereda de un prototipo (el objeto Array.prototype que es exactos), el objeto Date hereda del Date.prototype y así sucesivamente.

Incluso el objeto de prototipo en sí (como Array.prototype o Date.prototype) tiene un prototipo propio. Podemos seguir walking este árbol hasta que finalmente se alcanza un objeto nulo como su prototipo. Por definición null no tiene prototipo, y actúa como el eslabón final de esta cadena de prototipos.

Como estoy seguro de que ya puedes contar, hay mucho que prototipos.

Así que saltemos en el trabajo.

¿Qué cubre todo este curso de JavaScript Grandmaster?

JavaScript es el lenguaje de scripting #1 de la web, donde mucho del contenido dinámico y de estilo es manejado por JavaScript en segundo plano. Pero antes de usar este idioma para crear sitios web dinámicos, necesitas tener una comprensión firme de cómo funciona detrás de las escenas.

Al final de este curso, podrás “hablar” de JavaScript al comprender cómo lo usa el navegador, qué variables, objetos y funciones, qué tipos de datos diferentes que hay y cómo manipular contenido en un sitio web. dig más profundidad y creamos nuestros propios métodos de diálogo desde cero. Aprendemos sobre la sintaxis de flechas, la función Math.random(), que se bucle a través de objetos y mates, trabajando con fechas. ¡Vemos los prototipos, los motores JS, la pila de ejecución y un montón más de ventas!

A través de ejemplos prácticos, este curso te ayuda a entender por pieza de JavaScript por piezas. Y usamos las últimas y las mejores funciones de JavaScript en el camino para que puedas estar por delante del pack.

¿QUÉ estás esperando? TE PERMITE OBTENER CRACKIN'

Conoce a tu profesor(a)

Teacher Profile Image

CM Code_Zone

!false | funny, because its true

Profesor(a)

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. 

Ver perfil completo

Level: All Levels

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción a clase: arrays: Bienvenida habilidad, dicen estudiantes a otra clase. Y esta clase es super, super emocionante. Si me has estado siguiendo a lo largo en mis otras conferencias y otras clases, genial, si no menos, telefono a. Esta cláusula es casi una clase independiente. Se puede mirar de forma aislada. Pero claro que siempre te recomiendo pasar por toda la serie porque hemos cubierto mucho cuando se trata de JavaScript. Ahora esto es lo importante que debes entender. Cuando se trata de programación. ¿ Qué es? ¿ Con qué trabajas como programador? Es solo hija cuando se trabaja con puntos y obtenemos diferentes tipos de datos. Y por eso una de las clases anteriores, hablamos mucho de esto y descubrimos que en la programación en JavaScript, hija se puede dividir en dos tipos. Tienes tipos básicos de datos o primitivos. Y tiene a tipos de datos complejos, también conocidos como objetos, cuando se trata de JavaScript. Y las matrices encajan en el complejo tipo de categoría hija. Y como verás en la conferencia, las matrices son en realidad un tipo de objeto en JavaScript. Entonces chocan, ¿qué son las matrices y por qué las necesitamos? Nosotros, en cualquier momento que desee almacenar una colección de hija, típicamente utiliza matrices. Recuerda que ya hemos visto variables, pero las variables solo pueden contener un valor. Las matrices pueden contener una colección de valores. Y eso es extremadamente útil para nosotros a la hora de construir camas de manera. ¿ Cuáles son algunos ejemplos? Bueno, si tenía un sitio web de compras y la gente agrega artículos hoy, atrapó todos esos artículos que editan al código, ¿cómo los instalamos? Votar instalado en con una matriz. ¿ Y si estás creando el backend para un usuario administrador? Tire todos los miembros de su sitio se pueden almacenar en una matriz. Hay muchos, muchos ejemplos y estoy seguro de que se puede ver, y es muy, muy importante dominar. Y de eso se trata esta clase, matrices y bucles. Y no sólo hablamos de matrices, sino que también miramos ejemplos. Nos fijamos en qué métodos nos da JavaScript en matrices directamente de la caja. Métodos carecen de empuje, pop, rebanada, cetera, etcétera, dentro de puerta. Un poco más avanzado, discutimos los diferentes tipos de métodos que se obtendrían en las matrices. Métodos de mutador negro push por ejemplo, es un método mutador, irradian métodos de acceso. Slice por ejemplo, es un método de acceso. Y luego obtenemos métodos iteradores. Y la función de mapa es un ejemplo de un método iterativo y categoría entendida. Estos métodos iterativos, esto es extremadamente importante porque esto nos permite recorrer la carrera. Y como estoy seguro de que se puede ver cuando tenemos una colección de datos se vuelve muy importante para nosotros el bucle a través de estas matrices. ¿ Qué pasa si estás en un sitio web y quieres ordenar por precio u ordenar por fecha en la lista. puede decir lo importante que es para nuestro código mirar a través de toda nuestra colección buscada a través de ellos. Este es sólo un ejemplo, por cierto, pero se puede ver lo importante que es discutir bucles. Y esto también es lo que hacemos en esta impresionante cláusula. Discutimos bucles y discutimos el tradicional for loop, que la mayoría de nosotros ya conocemos. Pero no te preocupes si no dentro discutes el for in loop. Y luego discutimos mi opinión mucho postor loop. Y ese es el for of loop. Entonces realmente esta clase está llena de información útil. Realmente no puedo esperar. Y por favor quédate conmigo. Café más grandioso. Gregory bull, sea cual sea el pantalón que te levantes. Y nos vemos en McCloskey, adios amigos. 2. ¿Qué es un arreglo de arreglo?: Hemos recorrido un largo camino. Hemos aprendido acerca de los objetos y ¿cómo estamos empezando a llegar cada vez más avanzados en? Vas a tener que entender las matrices cuando llegues a la programación. Y me gusta pensar en una matriz es una variable que almacena múltiples valores en. Quiero recalcar la palabra valores múltiples. Vamos a ver en breve a qué me refiero con múltiples valores. Pero antes de que lo hagamos, ¿cómo identificamos una matriz? Un objeto siempre puede ser identificado por los corchetes rizados, matrices de estrechamente relacionados con él. Y se puede identificar una matriz con corchetes. Y dando un paso atrás. Recuerda cuando estábamos discutiendo tipos de datos en JavaScript, los dos tipos hijas, estos primitivos, que es solo una palabra elegante para cosas simples como cadenas, números, booleanos, null, indefinido, e incluso ensamblar. Esos son todos tipos de datos simples. Pero entonces también tenemos el objeto, que es tipos de datos complejos. A pesar de que todo en JavaScript es más o menos en objetos por nuestro bien, siempre es bueno descomponerlo e ir, vale, genial. Tenemos objetos que conocemos. También tenemos matrices y también tenemos otras funciones una. Y esos son el segundo tipo de tipos de datos en JavaScript. Ok, así que dejando eso a un lado y como que sabes, borrar comida entra un tipo de hija de JavaScript. Pero son sólo un tipo especial de objeto. Y te lo demostraré. Echemos un vistazo. Una matriz es sólo un objeto. Y recuerda cómo dijo para identificar una matriz o para crear una matriz, hay que tener corchetes. Los objetos son corchetes rizados. Lista encontrar una matriz, dejar un par de corchetes abiertos y cerrados. Eso es todo. Hemos creado moraine. Y para mostrarte que esta matriz es en realidad un objeto, simplemente podemos ir tipo de un el ansioso a un objeto. Y recuerda sembrar una matriz como una variable que puede almacenar múltiples valores. Bueno, ¿cómo trabajamos con trozos de datos? Por ejemplo, tomemos un escenario muy fácil. Digamos que tenemos los números 1357. ¿ Cómo detenemos eso? ¿ Podemos simplemente almacenarlo como una cuerda? Bueno, supongo que podemos, sólo podemos escribirlo. 1357. Eso es simplemente incómodo. ¿ Y si quisiéramos sumar los números juntos? ¿ Y si quisiéramos extraer sólo los cinco y dejar el 137? Realmente no podemos hacer eso con cuerdas, ¿verdad? Es incómodo. Corchetes, muy difíciles. Las imágenes te muestran ahora un ejemplo rápido de trabajar con números en una matriz. Entonces, ¿cómo almacenamos números en cuál es la mejor manera? Porque las cuerdas son incómodas. Entonces definamos un array y llamémoslo números. Por falta de una palabra mejor. Y nuestros números son 1357. Cómo hemos creado una matriz llamada números. Déjalo, así de fácil es. Y si consolamos iniciamos los números y lo abrimos, y realmente se puede ver la consola diciéndonos en los cuatro elementos de esta matriz. Podemos abrirla y mirar que son algunas cosas que vale la pena señalar aquí. Una es, esta matriz tiene una propiedad de longitud mágica. ¿ De dónde vienen? Vamos a ver en breve, no te preocupes. Lo segundo que vale la pena señalar es que los pares de valor clave aquí, esas claves iniciaron el número 0, y Es que todo lo que hay que pensar en los números de palabra que hemos creado el como referencia a una ubicación de memoria. Y si escribimos números numéricos 0, todas las deudas que intentan hacer es hacer referencia a una ubicación en memoria que está x elementos lejos del punto de referencia. Sí, hemos visto que el punto de referencia es 0. Por lo que está tomando el primer elemento encuentra en la memoria. Entonces de esta manera, el índice, esos números 0123, esos se utilizan como un desplazamiento. Y en nuestro ejemplo, el primer elemento de la matriz, el número uno, con una clave de 0. Está x elementos lejos de su punto de referencia, razón por la cual cuando escribimos números, nos debe dar uno porque literalmente estamos apuntando a la misma ubicación de memoria. El dato almacenado en. Espero que esté haciendo manchas empezarán a ver muchos más ejemplos de esto más adelante. Sigamos adelante. Por lo que acabamos de ver matrices son estructuras de datos que tomaron múltiples valores. Las matrices no tienen pares de valor clave. Tienen piezas singulares de datos. Pero lo que es genial es que las matrices son objetos. Por lo que también pueden contener objetos. Y hemos visto que las matrices son un tipo especial de objeto. Pero una diferencia es que las matrices tienen una propiedad de longitud mágica. El primer valor en la matriz se almacena bajo la clave 0. Y recuerda, cuando miramos el modelo de objetos JavaScript donde la especificaciones de scripts ECMO define un objeto es solo una referencia, solo un diccionario donde tienes las claves y esas claves apuntan a atributos de una propiedad. Bueno, es lo mismo con las matrices. Permítanme mostrarles un ejemplo. Entonces veamos el modelo de matriz. ¿ Cómo trata el motor a una matriz? ¿ De dónde viene esta propiedad de longitud? Bueno, definamos una matriz que sólo tiene un valor y ese valor es la letra a. Así que tenemos una matriz, los rayos llamados litros. Tiene dos propiedades, una longitud, y tiene una clave, y la clave comienza en 0, y apuntan a atributos de propiedad. El valor de la propiedad length tiene un valor de uno, pero es innumerables y configurables propiedades o busca falso porque esto está incorporado en JavaScript. No nos falta el surround y reconfigurarlo. El clave de 0 apunta al valor a y que todo tiene los recintos verdaderos leads por defecto toman nuestra matriz y vamos a empujar b en ella. ¿ En qué pasa? Bueno ahora vas a tener una llave extra. Vas a tener uno. Ese apuntará a un valor b. Y la longitud y la clave de 0, exactamente las mismas cosas que antes. Espero que esto esté empezando a ser más intuitivo para ti. No te preocupes demasiado. Sé que esto es un poco teórico porque esto es lo que el motor y esto es lo que están haciendo las matrices y los objetos en segundo plano. Mucha gente no entiende eso, pero te va a ayudar. Entonces sigamos adelante. Permítanme mostrarles algunos ejemplos más. 3. ¿Cómo creamos un arreglo de arreglo?: Y al igual que con los objetos, no sólo son una forma de crear una matriz, sino que en general, sólo miramos dos formas de crear una matriz. Nos fijamos en un literal de matriz, y eso es sólo usar corchetes de apertura y cierre. Y la segunda forma es usar un constructor de matriz. Y sí, vamos a usar la nueva palabra clave Día también. Echemos un vistazo a algunos ejemplos. ¿ Qué mejor manera de aprender entonces? Ejemplos? Entonces, empecemos a ver las diferentes formas de crear matrices. Entonces primero usemos el literal de la matriz, y esta es la forma más fácil de crear una matriz. Y la matriz más simple es una, a for array. Y si consolamos log AR dos, se puede ver que tenemos una matriz. ¿ Qué tan fácil es eso? También podemos crear una matriz con valores. Entonces definamos una variable llamada animales, y se define valores diferentes, perro, gato, y un ratón. Y si consola registramos eso a la captura de pantalla y tenemos que usar el log de consola en este caso, solo puedo escribir animales y ahí vamos. Nos hemos ido arreglo con perro, gato y ratón. Y recuerda cómo dijimos que una matriz es un objeto. Y fuimos más allá diciendo que incluso se pueden poner objetos dentro de una matriz. Vamos a mostrar un ejemplo de eso. Entonces llamemos a nuestra gente aquí. Y recuerda, con una matriz, hay que tener corchete cuadrado de apertura y cierre. Y ahora queremos poner objetos en esta matriz. ¿ Cómo definimos un objeto? ¿ Eso es correcto con los tirantes rizados? Y digamos que el nombre es igual a uno. Y hagamos otra. Llamemos a éste John. Y hagamos una más y la llamemos Cindy. Y si consolamos a la gente afuera, ahí vamos. puede ver que es una matriz porque está encerrada entre corchetes. Y tiene estos objetos dentro de ella. Ok, eso es array literal. Veamos ahora constructor de matriz. Y con el constructor de matriz, tienes que usar el objeto array incorporado de JavaScript y tienes que llamarlo con la nueva palabra clave. Déjame mostrarte a lo que me refiero. Por lo que definamos la casa y usemos el editor constructor. Ahora solo necesitas poner los valores en este constructor. Llámalo de tres dormitorios, colores rojo, y tiene tres baños. Si consolamos esto, deberíamos ver una matriz con opinión cerrando corchetes con estas sedes dentro de ella. Obtuvo días casa y necesita la apertura, cierre entre corchetes y luego los valores en ella, tal y como esperábamos. Pero usar el constructor de matriz puede causar resultados extraños. Permítanme mostrarles un ejemplo. Si querías hacer una matriz de números, es bastante sencillo. Y los índices de matriz tienen números 510. Y si consolamos cerramos esta sesión, esperaría ver una matriz con valores 510. Ya lo tienes. Y sí lo vemos en esta instancia. Pero si solo quisiéramos que tuviera una matriz con un número que cause resultados extraños. Echa un vistazo a esto. Entonces digamos que tenemos una nueva matriz llamada figuras, y sólo queremos que ese sea el número siete. Si consolamos loguemos eso, ¿qué esperarías ver? Mucho esperan ver en array con sólo el número siete. Pero en este caso en realidad nos va a dar algo diferente. Nos va a dar una matriz vacía con siete manchas vacías en blanco. Digo, cifras. Y la cabeza es, no nos ha dado lo que esperábamos. Entonces para mí, solo tiendo a usar el enfoque literal de la matriz. Es muy intuitivo, muy fácil. Como dije, nunca hay una forma correcta de hacer algo en JavaScript. Hay tantas cosas diferentes que puedes hacer. Y dependiendo de tu situación, es posible que quieras usar una u otra. 4. Ejemplo de la matriz: Lo mejor es con estas cosas es simplemente seguir adelante con ejemplos porque entonces comienzas a sentirte más intuitivo a tu alrededor y comienzas a venir más cómodo alrededor de este concepto de matrices. Entonces entrémonos en ello. Permítanme darles un ejemplo práctico. Digamos que tenemos una lista de compras y queremos agregarle, queremos eliminar cosas de la matriz. Queremos acceder a unas propiedades enlazadas. ¿ Cómo íbamos a hacer todas estas cosas? Echemos un vistazo. Bueno, lo primero es crear un ShoppingList. Y en agua más fría, lo que quieras, solo llamémoslo lista de compras. Y vamos a hacer sólo las necesidades. Mlk criado vía. Si consolamos cerramos la sesión de esto. Déjame empezar Walker. Tienes nuestra matriz es la b-a multivariante. ¿ Y si quisiéramos acceder a propiedades en array? Bueno, podemos acceder a esas propiedades con corchetes. Y en un principio decimos que queríamos acceder a MLK. Vamos a la consola log ShoppingList. Abrir, cerrar corchetes. Y recuerda, tenemos que hacer excesos en la memoria. Y va a ser en el punto de partida, que es 0. Y eso nos da MLK. Si quisiéramos acceder vía, ¿qué haríamos? Esto, ¿verdad? Ponemos dos que nos van a dar b-a. Y con las matrices, también podemos anular valores muy fácilmente. Lleva sobre i valores. Esa es X es nuestra ShoppingList. En lugar de MLK, es de Kirk. Ahora si consolamos logo array que ha reemplazado a MLK Woodcock. ¿ Y qué pasa con acceder a la propiedad de longitud? ¿ Y si quisiéramos agregar elementos a esta matriz? Si de repente nos acordamos, oye, también necesito comprar papel higiénico. O qué pasa si ya no queremos comprar cerveza y queríamos deshacernos de eso. ¿ Cómo íbamos a hacer eso? Bueno, déjame mostrarte algo de equidad. Déjame sólo abrir la consola y mirar esto en irradiar recrear. Vamos a crear sólo la matriz numérica. De acuerdo, puede ser una matriz vacía. Si consolamos cerramos esto y abrimos esta cosita aquí, y salimos de prototipo. Nos dijiste que podías poner tenemos existencia. Tenemos acceso al método pop y al método push. Y permítanme darles ejemplos de lo que pasa. Ahora, volvamos a nuestro IDE. Eje la propiedad length. ¿Cómo hacemos esto? Bueno, ya verás si volvemos a la consola, verás aquí que en realidad tenemos una propiedad de longitud tendría médicamente en esta matriz, en cualquier matriz que creemos. Tenemos esa propiedad directamente. Entonces si volvemos a nuestro IDE, podemos acceder a él, elicits log de consola, shopping-list, y su acceso a los productos enlazados. Tres, tenemos tres artículos en RA, Tiene sentido. Leche, pan, y cerveza. El caso de Mona, Coca-Cola, pan y cerveza. Añadamos ahora un artículo a nuestra ShoppingList. ¿ Cómo haríamos eso? Bueno, las matrices tienen un método incorporado llamado push in JavaScript, y literalmente empuja un elemento a la matriz. Vamos xis son una lista de compras. Va a tener un método de empuje en él. Y puedes ver mi IDE ya me dice que la citación es un nuevo elemento para array, y devuelve una nueva longitud de la matriz. Entonces vamos a empujar el papel higiénico en nuestra matriz. Ahora si consolamos de este arte shopping-list, y ahí lo tienes de nuevo. Pero ahora digamos que cometimos un error y tenemos suficiente papel higiénico, queremos que esa cosa salga hoy. ¿ Qué hacemos ahora? Vamos a pesar copa entra en ella. Quitemos un elemento de la matriz. Otra vez. Salgamos de nuestra ShoppingList. Ahora queremos pop. En este método pop desechos, elimina el último elemento de la matriz, que en nuestro caso es el papel higiénico. Y ahora si consolamos registramos nuestra ShoppingList fuera, papel higiénico no está en ninguna parte para ser visto. Genial, espero que te estés divirtiendo que este mortero matrices en esto, vamos a meternos en ello. 5. Introducción a la introducción al iterator de mutador: Recuerda cómo cuando creamos una matriz, venía automáticamente con un montón de propiedades y métodos adjuntados automáticamente. Recuerda que teníamos el pop y tuvimos que empujar y teníamos la longitud. Bueno, permítanme decir que los métodos de matriz se pueden agrupar en tres amplias categorías. Y es muy importante para ti distinguir entre ella. De lo contrario, podrías fastidiar tu código y tu hija. Por lo que las tres amplias categorías o mutador, accessor e iteradores, métodos mutadores o los que mutan alterarán la matriz original. Así que ten mucho cuidado al trabajar con métodos de mutador, porque lo que hagas en esa matriz afectará a la matriz original. Tienes acceso emitido, y no alteran la matriz, no muta la matriz original en solo crea una copia. Y luego puedes trabajar con esa copia y extraer y hacer con esa copia como quieras. Y luego finalmente tienes iteradores. Entonces, mucha del tiempo con dot, en realidad queriendo recorrer ese punto, ¿ estás queriendo extraer ciertos valores y mostrárselo al usuario? Ahí es donde los iteradores entran en la imagen. Veamos ejemplos de los tres de este tipo de métodos rápidamente. 6. Ejemplos de iterator del mutator: Tenemos tres amplias categorías de métodos en matrices. Echemos un vistazo a un ejemplo de cada uno de ellos. Entonces como acabamos de hacer en la conferencia, veamos los métodos de mutación. Y recuerda que estos métodos alteran la matriz original. Entonces vamos a crear una matriz deliciosos números fríos por falta de una palabra mejor. Y vamos a tener 51015 en esa matriz. Y usemos el método push. El método push es un método mutador y nos empuja el número 20. Es números de registro de consola, push. Y dice aquí en mi IDE realmente me está dando agudezas que devuelve la nueva longitud de la matriz. Y le ha empujado al número 20 a esto. Ahora la matriz va a tener longitud cuatro. Entonces no de consola log números impares. Va a tener cuatro números ahora ha afectado a la matriz original real. Lote. Otro ejemplo, vamos a trabajar con colores. Digamos colores originales de azul y verde. Pero digamos que alguien más viene y quiere crear colores de un minuto, pero quieren empezar con estos colores como el punto base. Señor, digamos que eso viene. Y quieren usar el punto de partida original, pero quieren empujar a otra colonia, RED. Ahora cuando un registro de consola original, inesperado sólo ven azul y verde. Y estoy seguro como lo adivinaste, cuando un lager puntos en realidad ahora ha leído. Entonces con esta mutación, con este método de empuje sí afecta la tasa original. Solo ten cuidado con ello porque podrías perderte datos originales que no pretendías hacer. Otro método es xy presentado. Echemos un vistazo a eso ahora. Quickie, solo copia este recurso. Tendría que escribirlo de nuevo. Y ser perezosos y maliciosos llamadores, accesores y emisores de salidas son agradables porque nos permite no manipular la matriz original, que crean una copia de la matriz original y luego manipular ese crujido. Entonces echa un vistazo. Sí, definamos una matriz de nombres. Y dice John, ALI. Y Cindy. Ahora uno, X es un método disponible para nosotros tan conocido como rebanada. Y rebanada solo devuelve una porción especificada de la matriz. Te mostraré lo que quiero decir ahora. Entonces digamos que la copia es igual a nombres. Esa es nuestra matriz original. Queremos acceder a un método de corte. Y puedes ver mis identificaciones ya diciéndonos cuáles son los dos argumentos. El inicio es el comienzo de una porción especificada de la matriz y el final que especifica cuándo se re, necesita terminar. Entonces, sólo regresemos, digamos que queremos regresar solo Wally y Cindy. No queríamos involucrar a John en todo esto. Por lo que aquí podemos empezar a una y terminar a las tres. Ahora si consolamos desconectamos eso, tenemos a Wally y Cindy. Cómo llama em. Pero quiero decir, si nuestra consola registra nombres, los nombres ha mantenido su forma original de tener tres personas en ella. Ese es un método de acceso. ¿ Qué método iterador inferior? Método iterador, como vemos, simplemente itera a través de una matriz y te permite hacer cosas con un cierto valor cada vez que itera a través de esa matriz. Por que eso es un poco bocado. Pero de nuevo, es mucho más fácil de entender con un ejemplo. Entonces vamos a darle un ejemplo aquí de un método iterador. Y una muy popular que todos van a estar usando y probablemente incluso hagan una sección entera sobre ella, si no una sección entera de manera diferente, uno o dos episodios completos es el método del mapa. Ahora hay mucho de lo que podemos hablar con los hombres. Los métodos de mapa no lo van a hacer. Sí, solo te voy a mostrar muy brevemente cómo funciona y qué significa un método iterador. Y vamos a crear una variedad de animales. Y digamos que tenemos un perro y un gato. No quiero que sea demasiado largo. Y ahora solo quiero crear un iterado, un iterador animal. Sólo llamémoslo iterador animal. Y vamos a acceder a nuestro, nuestro array original y vamos a utilizar este método de mapa. Ok. Y como se puede ver en mi IDE, este mapa emitido llama a una función de devolución de llamada en cada elemento de una matriz. Y por elemento de una matriz sólo decimos el perro y el gato en este caso, esos se llaman elementos. Por lo que una función se va a llamar devolver un perro y devolver un gato, etcétera, etcétera. No te preocupes por las funciones de devolución de llamada sin embargo vamos a meternos en estas cosas más tarde. Entonces el primer argumento en este método de mapa es la función de devolución de llamada. Hasta se puede ver ese MID, me está diciendo. Y definamos una función de devolución de llamada que tome el elemento, que en nuestro caso es un animal. Es un tipo de tipo animal. Y luego hagamos algo con ese tipo de animal. Entonces en nuestro caso, vamos a solo consola de instrucción de registro que es literales de plantilla usados. Y digamos, no lo sé, estamos lidiando con un. Y entonces literalmente puedes tomar ese animal y ver lo que acaba de pasar. Se puede ver la consola dice que estamos tratando con un perro, estamos tratando con un gato. Entonces eso es lo que hace el método del mapa. Se necesita cada elemento de su matriz. Entonces en la primera iteración, en el primer bucle, se va a llevar perro. Va a poner a ese perro en esa función de devolución de llamada. Y eso va a nombrar. Va a poner a ese perro en una variable llamada tipo animal. Y entonces simplemente hacemos lo que nos plazca con él. En este caso, acabamos de hacer un simple mensaje de registro de consola de ese tipo de animal. Pero esto no afecta a la matriz original. Si escribo animales, aún tenemos a nuestro perro y gato y nada al respecto. Es solo un método que nos permite iterar a través de una matriz. Hemos pasado por mucho. Hemos pasado por mucho. Bien hecho. La esperanza está empezando a hacer escenas. Nos vemos pronto. 7. Por Por qué es lo necesario el buceo: Trabajar con hija es extremadamente importante a la hora de programar. Y muchas de las cosas que hemos estado haciendo en este momento habían sido como almacenar datos y lo estaríamos poniendo en objetos. Hemos estado definiendo variables, hemos estado creando matrices. Pero, ¿qué pasa con acceder a esas baterías? En un, puedes pensar si tienes una aplicación con miles de usuarios, te dan hija. Pero en algún momento vas a querer extraer esos datos y mostrarlos para usarlos para realizar cálculos sobre ellos. Y esto es que nosotros bucles se vuelve vital. Y aquí estamos hablando de bucear a través de objetos, pero solo ten en cuenta, una matriz es en realidad un objeto también. Se puede recorrer objetos y se puede recorrer en bucle a través de matrices. Pero una vez que tienes una matriz, una matriz de vainilla y comprar vainilla solo significa que tienes toda una cadena de valores. Una vez que has llegado a ese punto, se vuelve muy fácil recorrer por él. Entonces por eso estoy queriendo empezar con objetos y objeto más complicado que has definido. ¿ Cómo hacemos un bucle a través de eso? Y a menudo nos encontrarás en una situación en la que quieres mirar a través de tu objeto. Y la única forma de hacerlo antes de ESX era con un for in loop. Y en breve te mostraré un ejemplo de un for in loop. Pero permítanme decir que hay una mejor manera y que mejores formas de convertir su objeto en una matriz. Y luego puedes simplemente recorrer la matriz, porque ahora bucear sobre una matriz es muy fácil. Entonces, ¿cómo podemos convertir nuestro objeto en una matriz? ¿ Serán tres métodos muy populares, claves de punto de objeto, valores de punto de objeto y entradas de punto de objeto. Las claves de punto de objeto crean una matriz que contiene sólo los nombres de las propiedades, también conocidos como las claves del objeto. Valores de punto de objeto, probablemente ya adivinó, que crea una matriz que contiene el valor de cada propiedad dentro del objeto. Y las entradas de punto de objeto solo te da una matriz. Pero ahora en esta ocasión tienes tanto la clave como el valor. Siempre crea una matriz de matrices. Pero en breve te mostraré lo que esto significa. De acuerdo, entonces vamos a dar un paso atrás. Empezamos con un objeto complicado dentro de un objeto convertido en una matriz. Y podemos usar uno de estos tres métodos que acabamos de discutir. Haz eso. Y ahora podemos recorrer esta matriz como si se tratara de una matriz de vainilla normal. Y lo hacemos con d for, de loop. El bucle for es impresionante y es una forma mucho más fácil de recorrer elementos de una matriz. Permítanme dar un ejemplo. Simplemente te mostraré rápidamente cómo funciona este for loop. Digamos que definimos un montón de claves de frutas. Y es una matriz que es un plátano y un manga. Simple. Entonces, ¿qué hace un for of loop? Eso recorre cada tecla. Y lo que quiero decir con clave, donde tu clave en este caso en ese array, es el plátano. En la segunda iteración clave neta va a ser manga. Para const key, va a tomar la clave de la matriz. Pero ahora, sin que hagamos nada, asombro para de loop, ¿cómo sabe usar el array de llaves de frutas? Esperemos, entra un segundo argumento. Tienes que decirle a esta matriz, oye, encuentra cada clave de la matriz de llaves de frutas. Después abres este para de bucle con las llaves. Y podemos hacer lo que queramos con esa llave. Porque sabemos en cada bucle que la clave va a estar en el banano de primera instancia, y en la segunda instancia manga. lo que en esta instancia, nuestra sencilla clave de registro de consola solo hará que el fenómeno de registro de consola sea la primera iteración. Y luego en la segunda iteración consolaremos manga. Echemos un vistazo a algunos ejemplos más ahora. 8. Enlazado a través de un ejemplo de la matriz: Haciendo un bucle a través de hija para extraerlo. Es tan importante cuando se trata de programación. Y quiero realmente, quiero estresar. Entonces les voy a mostrar dos ejemplos. El que solo voy a recorrer los arrays, te mostraré los diferentes métodos. Y luego como hemos discutido en la conferencia, quiero realmente crear un objeto con propiedades, pares nombre-valor, y quiero recorrer eso. Entonces sin más preámbulos, entrémonos en ello. Voy a empezar a cortar con funciones más complicadas y llamadas y bucles. Porque hemos recorrido un largo camino. Y creo que te estás familiarizando realmente con los objetos fáciles tradicionales, las matrices y todo eso. Entonces vamos a crear una función. Digamos que tenemos toda una lista de miembros de nuestro lado. Y queremos recorrer cada miembro y darles un mensaje de bienvenida. ¿ Cómo hacemos eso? Vamos en primer lugar, vamos a crear una función y vamos a entrar en funciones en una sección completamente nueva. Entonces, no te preocupes aún por la sintaxis. Simplemente entiende el concepto. Definamos una función llamada Alta. Y decía que esa función toma a nombre de la persona. Todo lo que hace esta función es que devuelve nuestro mensaje de bienvenida. Bienvenido, y nosotros usando literales de plantilla, Sí, y sólo vamos a cancelar el nombre. Siguiente. Encontremos a nuestros miembros. Y digamos con qué, una lista completa. Y acabamos de empezar. Entonces sólo tenemos dos miembros, Tom y Jerry. Pero entonces digamos que conseguimos nuevos usuarios, nuevos usos. John y Wally. Por lo que principalmente listas que ha empujado a John. Y en cuanto al triste y empuje Wally, ahora, una lista de miembros debería contener cuatro miembros. Y lo hace. Y queremos saludar a todos los miembros. ¿ Cómo íbamos a hacer esto? Bueno, recuerda cómo sigo estresando estos nunca una manera correcta de hacer algo. Y hay muchas formas de recorrer esta matriz. Basta con mirar primero las formas tradicionales de la vieja escuela. Entonces el tradicional for loop, y algo que vale la pena recordar es que cada for-loop tiene llaves al final. Y es un poco como lo que queremos hacer en código, va en medio de estas llaves. Lo que difiere es lo que está aquí entre paréntesis. Entonces para lo tradicional, así que empecemos aquí con lo tradicional. Vieja escuela para bucle. Tenemos que definir una variable. Y esa variable itera por uno cada vez que se completa el bucle. Entonces podemos llamar a esto de cualquier manera. Pero tradicionalmente a la gente le gustaba enfriarlo. Yo, así que decimos déjame igualar 0, así que voy a empezar en 0. Y entonces el segundo parámetro en este for loop ve bajo qué condición continuará el bucle? Porque eventualmente el bucle va a tener que parar. De lo contrario va a ser un bucle infinito. Entonces digamos aquí, sólo queremos que esto itere ¿cuántas veces? Escribamos sólo cuatro veces porque se forman inversas, ¿verdad? Por lo que necesitamos que sea menos que el enlace de lista de miembros. Y entonces el tercer parámetro es lo que le pasa a i después de la primera iteración. Y queremos aumentar en uno. Entonces cuando iniciemos IS, hace el primer bucle, cuando termine, ese ojo se va a aumentar en uno. Y entonces se va a probar esta condición. El hábito lo hace. Y ahora quería encontrar un saludo, un particularmente acrecentante para cada miembro. Digamos saludo LIT. Aquí es donde queremos devolver alta función. Y recuerda la función hi, uno de sus parámetros de entrada era el nombre del individuo. ¿ Cuál es el nombre de este individuo en el primer bucle? Will va a ser simbolista. Y recuerda que para acceder a las propiedades en array, podemos usar unos corchetes. Y aquí estoy. En la primera iteración red RBF gire el nombre Tom. Y en todo queremos introducir registro de consola. Saludo. hoy lo tienes. Damos la bienvenida a Tom. Bienvenido Jerry. Bienvenido Jon. Bienvenido Molly, ¿qué genial es eso? Espero que entiendas qué es lo que hicimos, pero de nuevo, esto es un for-loop de la vieja escuela. Te mostraré una mejor manera de hacerlo. Pero antes de mostrarte la mejor manera de hacerlo, déjame mostrarte otra vieja escuela donde se llama el for in loop también es a la vieja escuela. El for in loop. De nuevo, tenemos los cuatro y luego ponemos estos corchetes rizados. Y ahora todo lo que tenemos que hacer es conseguir cuatro const nombre en el simbolista. Esta sintaxis está haciendo es en cada bucle que va a obtener cada elemento en nuestra matriz. Hemos llamado a nuestro nombre de elemento porque conocemos sus nombres, Tom, Jerry, John Wiley. Por lo que va a agarrar ese nombre en nuestro miembro objeto Ernest en nuestra matriz. Y entonces tradicionalmente lo que esto hace es que esto realmente acceda a todas las propiedades de prototipos también. Por lo que puedo ponerme muy engorroso y a veces accede a cosas que no deberían. Y por esta razón, a menudo se incluye una declaración if dentro de este bucle for. Y sólo hay que decir si simbolista y es una propiedad incorporada llamada su propiedad. Y todo lo que tenemos que decir como si cierta matriz tuviera su propia propiedad y eso está fuera de cualquier prototipo. Entonces queremos ejecutar este código. Entonces ahora hemos pausado esta declaración if. Terminamos el bloque. ¿Qué escribimos? Bueno, lo mismo. Queremos que nuestro saludo ejecute esa alta función. Y vamos a estar pasando en nombre del espejo. Entonces es lista de miembros y sí, no la hemos llamado. A mí me gusta lo hicimos por encima de una red de old-school for-loop. Sí, hemos definido cada iteración. Vamos a tener el nombre que se va a llamar nombre. Por lo que pasamos en nombre. Ahora ponemos nuestro saludo y todo lo que queremos hacer es registro de consola. Este saludo. Y Bob es tu tío. Ellos, vamos, Bienvenido Tom, bienvenido, Jerry, bienvenido, Jon. Bienvenido Molly. Pero se puede ver estos métodos orbitan engorrosos. Yahoo. De verdad tienes que pensarlo. Tienes una buena cantidad de mecanografía. Déjame mostrarte el for of loop, que es impresionante para de loop. De acuerdo, así que vamos a hacer un for of loop. Mi IDE nuevamente me ayuda con este iterador const de objeto. Entonces sí, tenemos nombre y voy a objetar es lista de miembros. Y verás lo mucho más fácil que es esto. Esto va a recorrer cada nombre, cada elemento de nuestra matriz, de nuestro objeto. Todo lo que tenemos que hacer ahora, los árboles salen saludo, que está ejecutando la función hi. Y ya tenemos nuestro nombre. Y luego podemos consola log. Nuestro saludo. ¿ Se puede ver lo mucho más fácil y sencillo que es para de loop? Genial. Pero quiero mostrarles un ejemplo más ahora porque, sí, hemos estado lidiando con una matriz simple. Quiero ahora tratar con objeto complicado. Entonces déjenme parar este video porque se está haciendo largo. Y en el siguiente video, vamos a estar lidiando con el objeto y luego vamos a iterar a través de objeto de deuda. Nos vemos pronto. 9. Ejemplo de bucle a través de objetos: Ahora vamos a ir a crear un objeto. Y vamos a utilizar esos métodos para convertir el objeto en array que vimos anteriormente. Hay tres métodos diferentes, y luego vamos a recorrer esa matriz usando el bucle for. Veamos cómo puede ser. Ese primer paso es, vamos a crear un objeto. Y digamos que nuestro objeto es una lista de compras de frutas. Dejemos que nuestro fruto sea un objeto. Y solo voy a estar usando la sintaxis literal del objeto por el bien de la simplicidad. Digamos que tenemos 12 plátanos a zanahorias y siete mangos. Consola Wii inicia sesión nuestra fruta fuera. Ahí está nuestro objeto con plátanos, zanahorias y mangos. ¿ Cómo comenzaríamos a iterar y hacer un bucle a través de estos datos? Bueno, la primera forma es mediante el uso de teclas de punto de objeto. Método uno. Teclas de punto de objeto. Definamos nuestras claves, LET frutas claves iguales. Y ahora ponemos los hachas. método de objeto construido en Javascript, claves de objeto. Y el parámetro que pasamos a las claves, el objeto fruto. Y si consolamos nos desconectamos. Tenemos literalmente ahora va a array de nuestras llaves, manana, zanahorias y mangos. Y fue tan fácil de hacer y es increíble trabajar con él. Veamos ahora el segundo método y ese es objeto add_values método a objeto valor de punto, valores de fruta tardía. El objeto. Vamos a acceder a este objeto incorporado en JavaScript y cómo conseguimos valores. Y pasamos en el objeto frutal una vez más. Y si consolamos cerramos esto, obtenemos los valores. Yahoo me sopla la mente lo simple que es esto realmente para extraer datos de objetos. Y cómo puedes ver hemos creado una matriz en ambas instancias, en claves de punto de objeto y objeto de valores. Hemos transformado nuestros frutos de objeto en matrices que contienen los datos que nos interesan. Pero ahora di que querías tanto las claves como los valores. ¿ Cómo haríamos eso? Vamos a pesar el aumento de puntos de objeto entra en la imagen. Echemos un vistazo. Método3. Intereses de objetos. Entonces ahora definamos árboles frutales. Nuevamente tenemos que acceder al objeto JavaScript. Y cómo hemos aumentado. Y pasamos en el objeto fruto. Y si podemos resolver esto, obtenemos una matriz de matrices. Recuerda cómo dije que el punto aumenta casi como una matriz de matrices. Y puedes ver por qué ahora, porque tu matriz general consiste en matrices más pequeñas de pares clave-valor. De acuerdo, genial, pero ahora ¿cómo iteramos a través estas entradas frutales y extraemos ambos fracasos? Echemos un vistazo. Entonces si utilizas Object.Create entradas, probablemente uno para extraer los pares de valor clave. Y vamos a hacer un for, of loop porque para off loops son impresionantes. Y si acabamos de hacer esto, si acabamos de hacer fruto de intereses frutales, ¿qué crees que pasaría? Consola Wii, tronco, fruta. Bueno, eso es aumento si caso los datos, solo va al registro de consola que matan porque va a tomar el primer elemento de ese general más grande un en la consola log eso. Pero, ¿qué pasa si queremos extraerse? ¿ Y si queremos perderlo diciendo, necesitas comprar x plátanos, necesitas comprar dos quilates. ¿ Cómo hacemos eso? De acuerdo, bueno, lo que es realmente genial es para de loop es esta fruta que puedes dividir en una matriz de nombre de fruta y número de Froude. Es decir, puedes llamarlo como quieras. Entonces sí, acabo de tener fruta. ¿ Sabes qué? Déjame en realidad hacerlo más intuitivo para ti. Llave de fruta, conjunto de nombre. Digamos que la clave de la fruta y que podría ser Valle de Alimentos. Entonces sabes que las que clave en las otras tienen cualquier red todo editar es para en la escuela es fácil. Y ahora deberíamos poder consola log. Usemos literales de plantilla y digamos que necesitas comprar fruta. Fruta. Clave. ¿Qué tan guay es esto? Una consola de ayudas registra. Necesitas de terminología, unos dos quilates cerca, siete mangos, lo tienen. Entonces este fue un ejemplo realmente profundo de tomar un objeto d estructurarlo mediante el uso de claves de objeto, valores de objeto. E incluso usamos intereses de objetos para sacar tanto las claves como los valores de ese objeto. Y luego una vez que tienes una matriz de valores, es tan fácil recorrer una matriz. Porque el for of loop, eso es simplemente muy intuitivo y funciona increíblemente bien con matrices. Sigamos. 10. Formas: Hemos aprendido acerca de los objetos, hemos aprendido acerca de las matrices. El, esta conferencia, va a ser épica. Pero permítanme empezar diciendo que todos los motores JavaScript utilizan los conceptos discutidos en esta conferencia como una forma de optimizar el código. Y como se puede ver por el bateo, trata de formas, pero diferentes motores llaman dar forma a cosas diferentes. Por lo que cuando empieces a buscar en Google esto, puede que te encuentres con terminología diferente. Algunas personas se refieren a éstas como clases ocultas, pero esto es confuso porque tenemos clases de JavaScript V8 causando mapas. Pero esto también es confuso porque recuerden que usamos esa iteración de mapa. Otros los llaman tipos javascript core causando estructuras. Pero el mono araña le llama formas y simplemente evitar confusión con otra terminología después de lado llamarlos formas también. Pero de todos modos, me digrego. Ahora sabemos cómo se definen los objetos en JavaScript. Hemos estado trabajando con ellos. Pero en esta conferencia, quiero sumergirme más profundamente. Quiero discutir cómo funcionan los motores JavaScript con los objetos. Al mirar lo que hemos hecho hasta ahora con los objetos, probablemente ya hayas adivinado que acceder a las propiedades es, con mucho, la tarea más común. A qué me refiero cuando, cuando tenemos un objeto, solo definamos un objeto de usuario a través del nombre y apellido. Va a ser muy común que consultemos esos valores. Por ejemplo, el nombre de usuario dot. Estamos pidiendo al motor que vaya a buscarnos el nombre de pila de este usuario. Y debido a esto, es crucial que JavaScript haga este proceso lo más rápido posible. ¿ De acuerdo? De acuerdo, lo consigues. Entonces, ¿cuál es la forma? Bueno, déjame decir esto. Eso es común tener múltiples objetos con los mismos nombres de propiedad o claves. Por ejemplo, vamos a crear un objeto de serpiente Dogen. Por ejemplo, digamos que teníamos un objeto de perro, ahí llamado dos claves, dos nombres, tipo y edad. Ahora creamos un objeto de serpiente, y también tiene tipo y edad. Es intuitivo que estos dos tengan la misma forma. Esos objetos tienen las mismas claves. E Italia significa en forma de arco. Las formas son solo objetos que tienen el mismo aspecto y tacto. Pero vamos a profundizar más para entender lo que hace JavaScript con los objetos. Entonces vamos a crear un objeto con propiedades x e y, cada una con un valor de 1020. Cuando creamos estos objetos, sabemos que se implementa el modelo de objetos JavaScript. Recuerda que miramos el modelo de objetos JavaScript y todo lo que quiero decir con esto es que cada objeto utiliza la estructura de datos del diccionario que discutimos anteriormente. Contiene las claves como cadenas. Aquí las claves son x e y, y esas claves apuntan a los atributos de propiedad respectivos. Ahora, cuando accedemos a la propiedad X en ese objeto, IE, realidad escribimos en nuestro código OBJ 0.8x, o en el caso de nuestro objeto estadounidense, escribimos user.name. Qué va a pasar. ¿ Los motores de JavaScript van a buscar en el objeto JS la clave para que los dolores. Y en ella se van a cargar los atributos de propiedad correspondientes. Y finalmente, una vez que lo haya hecho, va a devolver el valor. Se ve el mismo día entre corchetes. Va a devolver net en el caso de salida va a devolver estaño. Pero estos atributos de propiedad. ¿ Dónde se almacenan en la memoria? Déjame hacerte otra pregunta. ¿ Deberíamos almacenar estos atributos de propiedad como parte de su objeto JS? Antes de contestar eso, permítanme decir que si terminamos creando miles de objetos que tienen una estructura similar, IE, que tienen la misma forma. Out argumentó que realmente derrochamos almacenar el diccionario completo, que contiene nombres de propiedad y atributos asociados en cada objeto JS y. porque esto va a resultar en un montón de duplicación y uso innecesario de memoria. Convocatorias. Sabemos que no sería eficiente duplicar estos atributos de propiedad para cada objeto que tenga la misma forma. Entonces, ¿qué hace el motor JavaScript? Bueno, almacena una forma del objeto y lo hace por separado al objeto real en sí. Y esta forma almacenará todos los nombres y atributos de propiedad excepto los valores. En lugar de almacenar la propiedad value, la forma tiene que parar el valor de desplazamiento que hace referencia al objeto chase para que el motor sepa dónde encontrar el valor. Y esto significa que cada objeto JavaScript que tenga la misma forma apuntará exactamente a esta instancia hace una instancia de forma, sin duplicación y sin pérdida de memoria. Y debido a que cada objeto JavaScript es único, cada elemento va a tener valores diferentes. Significa que ese objeto sólo tiene que almacenar los valores únicos. Déjame mostrarte lo que quiero decir. Vamos a conseguir nuestro objeto con x e yAhora , en lugar de que ese objeto esté almacenando las claves, sólo va a valores de hábitos porque esos valores son únicos a él que un agonista, todos los valores 1020. Y ese objeto va a estar apuntando a una forma. Y esa forma es lo que va a estar almacenando las claves y las compensaciones asociadas. El x_max escenas. Por lo que sabemos cuando estás mirando la forma, el x apunta a atributos correctamente con un desplazamiento de Sarah. Y por eso el motor JavaScript va a saber que x tiene un valor de diez. ¿ Ya estás confundido? Bien. Es parte del viaje a parte del viaje. Quizás este ejemplo sea incluso más claro una vez que tengas múltiples objetos. Déjame mostrarte que ahora teníamos un objeto OBJ, acababan de tener x e yAhora vamos a crear OB J1 y OB J2. Entonces tenemos dos objetos ahora, pero con valores diferentes. Y esto probablemente va a hacer escenas Gina, porque ahora tenemos dos objetos y ellos cuentan con todos los valores únicos. Pero ambos apuntan a la misma forma porque ambos tienen la misma forma. Qué impresionante. Y realmente puedes ver ahora que en lugar de almacenar esa información en ambos objetos como probablemente atributos solo se almacena en una forma. Sólo recuerda, aunque te estés confundiendo, no solo recuerda esto. No importa cuántos objetos sean, cientos, miles, millones o miles de millones. Siempre y cuando tengan la misma forma, sólo tenemos que poner la información de forma y propiedad una vez. Pero hasta ahora sólo hemos visto ejemplos donde tenemos un objeto y una estructura predefinida. Nunca hemos tenido que agregarle propiedades. Cuál por supuesto plantea la pregunta, qué sucede cuando agregamos propiedades a un objeto que ya ha sido creado? ¿ Qué pasa con la forma? Esto es que transitamos cadenas y los árboles entran en escena. Vamos a crear el objeto de usuario. Y inicialmente ilustre sentada, así que está vacía, no tiene propiedades. ¿Cuál es su forma? Bueno, su forma también está vacía. Por lo que en este punto en el tiempo, el objeto de usuario está apuntando a una en forma de T. Simple, ¿verdad? Pero ahora agreguemos una propiedad llamada nombre a este objeto con un John válido. En cuanto hagas esto, se va a crear una nueva forma. El motor JavaScript ahora transita a esta nueva forma que contiene el nombre de la propiedad. El objeto de usuario tiene un valor de John como su primer desplazamiento. En este punto del tiempo, en realidad es el único offset. Pero sigamos adelante. Ahora agreguemos una propiedad llamada edad al objeto estadounidense y le damos un valor de 38, lo adivinaste. Se crea otra forma. El motor JavaScript vuelve a transitar a esta nueva forma que ahora contiene tanto nombre como edad. los atributos patrimoniales adscritos a esa edad. Nos dice que el valor para la edad se puede encontrar en el offset una posición de nuestro objeto de usuario, lo cual tiene sentido. Y así como una nota al margen que si y i, el orden en que se agregan propiedades al objeto sí impacta en la forma resultante. Por ejemplo, definimos el nombre y la edad de Dean, pero eso va a resultar en un tono diferente a si hubiéramos asignado primero a los 38 años. Y el nombre John vacunas sólo va a barajar alrededor de nuestras formas. De hecho, otra forma de representar esta imagen que estás viendo actualmente es la siguiente. Como puede ver, no necesitamos poner en entredicho la tabla completa de atributos de propiedad para cada forma. En cambio, si forma sólo necesita saber sobre la nueva propiedad que introduce. Por ejemplo, en este caso, no tenemos que almacenar la información sobre el nombre en la última forma porque se puede encontrar antes en la cadena. Y para hacernos trabajar, cada forma se vincula de nuevo a su forma anterior. Y por eso se llama cadena de transición. Es como una cadena, como una cadena grande con muchos eslabones. Y todas estas formas tienen enlaces entre sí retrocediendo. Ahora, en nuestro caso, si queremos acceder a la propiedad de nombre en nuestro objeto de usuario, que sabemos es John. Cuando escribimos y user.name, el motor JavaScript va a buscar nombre de la propiedad acercándose primero a la forma de edad. ¿ Por qué? Porque eso es lo más abajo de la cadena. No va a encontrar que el, por lo que el motor va a seguir teniendo que caminar por la cadena de transición hasta que encuentre la forma que introdujo la propiedad de nombre. Tiene sentido. Fukuoka, ahora casi terminamos, pero me quiero complicar un poco más. ¿ Qué pasa si tienes dos objetos que primero están vacíos y luego colocas propiedades diferentes en cada uno de ellos. Recordará cadenas de transición del Holoceno y árboles de transición. Aquí es donde entran los árboles porque en este caso vamos a tener que ramificarse. En lugar de tener una cadena de transición, podemos tener que tener un árbol de transición. Déjame mostrarte a lo que me refiero. Vamos a crear un usuario un objeto. Primero es NT, y luego reemplaza el nombre de la propiedad en él. Vamos a terminar con un objeto JS llamado Usuario uno que contiene un solo valor, en este caso John. Y también va a resultar en formas de armonía en dos formas, S, derecha, la forma EMT y la forma con sólo una propiedad llamada nombre. De acuerdo, y vamos a crear usuario para. usuario dos también va a comenzar con un objeto vacío, pero luego vamos a agregar una propiedad diferente llamada edad. ¿ Cuál es el resultado del wallace? Bueno, vamos a tener dos objetos, pero van a ser tres. Shapes va a ser para dar forma a cadenas. Uno relacionado con el usuario uno y otro relacionado con el usuario dos. Pero déjame preguntarte esto ahora, ¿esto significa siempre va a ser una forma indie asociada a cada objeto? No, en absoluto. Permítanme mostrarles otro ejemplo. Echa un vistazo a. Digamos que creamos usuario uno, empieza como AMD y tiene nombre de John. Sabemos en esta instancia vamos a tener un objeto JS, will Valley John, que apunta a una forma vacía que Dane transita a una nueva forma con el nombre de propiedad de nombrar. Sabemos esto, pero digamos que creamos un segundo usuario, pero esta vez de inmediato creamos una propiedad llamada nombre a ella. En este caso, hemos creado un objeto que inmediatamente tiene la propiedad name. Y esto significa que el motor JavaScript no ha tenido que partir de un objeto vacío y pasar a uno nuevo. De inmediato se acaba de ir al resultado final. Y voy a hacer un muy buen punto aquí. Esto es y. literales de objetos pueden ser muy buenos porque esta optimización y acabamos de ver, acorta la cadena de transición y hace que sea más eficiente construir objetos a partir de literales. Ahora, quiero ponerme un poco más complicado. Sólo aguanta conmigo. Agárrate fuerte, no te detengas. Ahora, ya casi terminas. Respuestas, información muy razonable, muy interesante. Vamos a crear un objeto de usuario con tres propiedades ahora, nombre, edad y audaz, deliciosos ochenta, bailarlos arriba. Como aprendimos antes, esto crea un objeto con cuántas formas? Con cuatro formas en la memoria. Eso es correcto. Y ahora para acceder al nombre de la propiedad en ese objeto, el motor JavaScript necesita seguir la lista vinculada. Se va a tener que empezar con la forma en la parte inferior. Y luego va a tener que trabajar su camino hasta la forma que introdujo nombre, que es donde la parte superior. Y como estoy seguro que ya lo has adivinado, esto va va a ser si lo hacemos con más frecuencia, sobre todo cuando los objetos tienen muchas propiedades. Entonces para acelerar la búsqueda de propiedades que motor JavaScript, Ed es una estructura de datos de tabla de formas. Y la tabla de formas es un diccionario mapeo claves de propiedad a las formas respectivas que introdujeron la propiedad dada. Aquí está la mesa de formas y cómo se ve. En efecto, ese es otro tipo de diccionario que acorta todo este proceso. Por ejemplo, se puede ver en la pantalla en la tabla de sacudidas, le dirá al motor JavaScript forma de encontrar estos valores de propiedad en qué forma encontrar estos valores de propiedad. Por lo que en la investigación para el nombre, todavía está comienza en la forma, en la forma posterior. Pero más tarde Puntos de Forma para sacudir tabla. Y ellos, el motor JavaScript sabe buscar en qué forma encontrar esa propiedad de nombre. Está haciendo router santos. lo puede creer o te vas en serio. Ahora tenemos otra mesa de formas. Pensaba que toda la razón de las formas era desprovista o búsqueda de diccionario. Ahora tenemos otra. alelos no son guetos. Los campamentos van a darse por vencidos. No, no te rindas y conozcas la respuesta. Y la razón es que la tabla de formas y las formas bonitas son un medio para un fin y eso es habilitar cachés en línea. cachés en línea o el verdadero secreto detrás entorno de tiempo de ejecución de JavaScript hace que las mandíbulas se arranquen tan rápido. Y no quiero entrar en demasiados detalles cachés en línea porque ese es todo un tema en sí mismo. Pero espero haberte dado suficiente sabor y suficiente conocimiento para que puedas profundizar más en este tema que te interesa. Pero no terminamos del todo con esta Legión porque a, quiero mostrarte cómo se ve una mesa agitada. En B. Sólo quiero introducir pero más al concepto de un caché en línea y lo que en realidad significa que es muy, muy alto, señor, sólo café amarillo. Sólo nos queda un minuto o dos minutos. Mex de esta conferencia. Está colgando. Volvamos a meternos en ello. Y no quiero meterme en cachés interiores. Sabemos que es otro tema entero en y por sí mismo que está en un nivel muy alto, así es como me gusta pensar en ello. Digamos que creamos una función llamada gusto que toma en un objeto de usuario y simplemente consola registrando el nombre del usuario. Cuando ejecuta la función por primera vez, la caché en línea buscaría el nombre de la propiedad y encontraría que el valor se almacena en el desplazamiento 0. Porque sabemos que el usuario un objeto tiene el nombre John, en este caso en el desplazamiento 0. Cuando ejecutes esa función, va a encontrar ese desplazamiento. Y el caché en línea memorizará la forma y el desplazamiento en el que su propiedad fue bombardeada. Entonces cuando miras el j es sabor de función, va a estancar que compensó a Zara en esa llamada de función. Y lo que esto significa es que si el motor JavaScript ve objetos con la forma que la caché en línea grababa antes, ya no necesita llegar a la información de la propiedad en absoluto. En cambio, la costosa búsqueda de información de propiedad se puede omitir por completo. Y esto es significativamente más rápido que buscar la propiedad cada vez. Déjame mostrarte a lo que me refiero. Entonces vamos a configurar la función de prueba con el usuario Calderon uno y las cachés en línea hacia el desplazamiento 0 en la propia función. Ahora, cuando lo llamamos al usuario dos, ¿qué crees que va a pasar? Bueno, en este caso, los cachés en línea lo van a reconocer. Tiene la misma forma. Y en lugar de tener que buscar los atributos de propiedad e ir a las tablas de formas, etcétera, etcétera. Pero sabe que el diablo dijo 0. Entonces todo lo que hace es que lo toma caché en línea de Zara y devuelve un valor Ali, de ese objeto. Genial, ¿verdad? De todos modos, hay un nivel muy alto de cachés en línea. No tienes que entenderlo realmente demasiado en profundidad ahora, pero si quieres cavar más profundo, Herbert, dado suficiente sabor. Bueno, esta ha sido una larga conferencia, así que gracias por estar conmigo. Bueno Dan, si tienes tan lejos, solo quieres recapitular rápidamente. Hemos aprendido cómo los motores JavaScript almacenan objetos y matrices, y cómo las formas y las cachés interiores ayudaron a optimizar las operaciones en estos objetos. Y en base a este conocimiento, ¿qué podemos quitarle? Bueno, si hay una cosa que podemos quitarle a esto práctico, extrañamos simplemente inicializar nuestros objetos de la misma manera. Para que no terminen teniendo formas diferentes. Por ejemplo, si desea crear un objeto de usuario, no cree uno con una propiedad de nombre, otro con un fname, Otro de nombre. Y otros son primero y luego un N mayúscula por nombre ahí. Entonces vamos a tener diferentes formas y va a complicar las cosas. Y así el fondo más bien ser consistente en cómo inicializar su objetivo de objetos. Espero que esto haya sido muy informativo. T, i? Mucha diversión juntándolo porque un tema bastante complicado y no mucha gente lo sabe, así que sí, disfrútalo. Y sigamos adelante. Vamos a entrar en algún JavaScript más para verte pronto.