Transcripciones
1. Introducción: Bienvenidos, bienvenidos, bienvenidos a mi disco Alumnos Kielce a arrancar 12 y series JavaScript. Y en esta trama, vamos a estar discutiendo un término vital cuando se trata de JavaScript. Y ese término son funciones. ¿Cuáles son las funciones? O las funciones te permiten en sus escenas muy básicas, ejecutar código una y otra vez y otra vez sin reescribir el código. Entonces, por ejemplo, si tienes que inscribir botones en la página web y cuando un usuario hace clic en un botón, quieres que suceda lo mismo. No quieres duplicar código. Preferirías escribir un bloque de código rápido dentro una función y ejecutar esa función cada vez que se haga clic en el botón Registrarse. Eso es sólo un ejemplo. Entonces, ¿qué vamos a cubrir en esta clase en particular? Vamos a estar hablando de lo que funciona apagado. Vamos a estar viendo la diferencia entre las declaraciones de
funciones y las expresiones de función. Vamos a estar viendo el enlace de la palabra clave esta en JavaScript. Vamos a estar mirando la sintaxis de flecha. Incluso vamos a estar mirando en volts funciones JavaScript, como la función matemática, eso va a ser súper, súper interesante. Entonces, ¿quién es este último otoño? La buena noticia es, es para todos los niveles. Si eres un desarrollador experimentado, seguro que vas a aprender algo nuevo si apenas estás empezando. No te estreses, ya sabes, mi estilo ya empezó lo básico y lo jalé y sigo consiguiendo más y más pensamientos. Estoy súper, súper emocionado. No puedo esperar a verte en los primeros datos. Adios.
2. ¿Qué es una función?: Bienvenidos a la primera conferencia sobre funciones. Y como vimos la analogía de dirección que les di a todos una función es como un bloque de código que pueden guardar y reutilizar más tarde cuando quieran. Y como mencioné anteriormente, las funciones son el pan y la mantequilla de la programación. Tienes que saber lidiar con funciones porque no quieres estar duplicando código cada vez que quieres realizar una tarea repetitiva. Entonces lo que esto significa es que escribes una función una vez y puedes usarla tantas veces en el futuro. Y así como un FYI de un lado, recuerden punto y coma, hicimos esto en una sección de Sintaxis. Generalmente, los puntos y comas se utilizan para separar las sentencias JavaScript ejecutables. Pero como una función no es una declaración ejecutable, y con eso me refiero a que no se ejecuta automáticamente. Tienes que llamarlo realmente va a invocar eso, lo veremos en breve. Y debido a esto, no es común terminar funciones con punto y coma, aunque a veces incluso me atraparás haciéndolo por error y otros desarrolladores. Entonces no es el fin del mundo, pero solo ten en cuenta, no
tienes que terminar una función con punto y coma. Y como acabamos de decir, las funciones no se ejecutan de inmediato, es que sí consigues IFIS expresiones de función invocadas de inmediato, pero no nos estamos metiendo en eso ahora. En general, las funciones no se ejecutan de inmediato. Entonces, ¿cómo se ve una función? ¿ Cómo lo escribimos? Bueno, en primer lugar, necesitas decirle a JavaScript que estás creando una función. ¿ Cómo se hace eso? Bueno, la respuesta simple es que solo usamos la palabra clave function. Ahora antes de ir más allá, hay algunas maneras en que puedes crear una función en JavaScript. Nosotros los vamos a mirar. Pero no importa de qué forma uses, sea cual sea el método que utilices para crear una función, estos conceptos generales que estoy enseñando en nuestro aplicado a cada método diferente. Entonces si entiendes lo que te estoy enseñando ahora, puedes aplicar esto a cualquier método de creación de una función y la recogerás mucho más rápido. Entonces aquí sólo vamos a usar una declaración de función. Para declarar función, tenemos la palabra clave function, genial, sonar JavaScript sabe que queremos crear una función. Pero estarás de acuerdo conmigo en que probablemente vamos a querer crear cientos, si no miles, de funciones en nuestra aplicación. Por ejemplo, podría querer crear una función que saluda a tu usuario cuando entre a tu página, es posible que quieras crear otra función que determine si es miembro o no. Es posible que desee crear otra función para determinar si está desactivando su cuenta o no. Y si lo hace, quieres darle otro mensaje o una alerta. Estas son funciones diferentes y por eso, hay
que distinguir entre una función de otra. Es necesario saber qué función llamar a qué función desea ejecutar. ¿ Y cómo hacemos esto? Bueno, eso es correcto. Necesitamos darle un nombre a nuestra función que
sepamos qué función ejecutar cuando la necesites. Y llamemos a nuestra prueba de función por el bien del argumento. Ahora, ¿cuál es la siguiente cosa que necesitamos? Bueno, a medida que empieces a desarrollar, querrás estar pasando argumentos a esta función. Por ejemplo, ¿qué tal si quisiéramos dar un usuario de toalla de alerta de bienvenida? No queremos que la alerta diga, hola, usuario aleatorio. Nos gustaría que la alerta dijera algo como hola John, alto 10x. Y lo que nos permite hacer eso como tenemos que pasar en argumentos, tenemos que pasar en variables. Y para poder pasar en variables, es necesario tener paréntesis. Y eso es un gas. Tienes una palabra clave de función. Llamamos a nuestra función gusto al cliente. Podemos llamarlo como queramos. Y luego hay que tener los paréntesis. Pero ahora digamos que queremos pasar a nombre del usuario. Entonces, solo pongamos eso en una variable llamada nombre. Y sí, va entre los paréntesis. ¿ Y qué es lo último que tenemos que hacer? Bueno, si solo lo levantas a esto, entonces.. JavaScript no sabría qué hacer. Genial. Hemos definido la función, llamaríamos el gusto. ¿ Qué va a hacer? En qué momento no hace nada. Y aquí es donde entran los tirantes rizados y no se confundan con los objetos. Esto no es un objeto cuando JavaScript ve en la palabra clave de función, va a saber que esas llaves, o simplemente un lugar donde definimos nuestro código. Y en la programación, ese lugar entre las llaves se llama solo un bloque, llamado bloque de código. Y eso es con la carne y el corazón de nuestro código JavaScript vivirá. Continuando con nuestro ejemplo. Solo alertemos hola al usuario. Y aquí vamos a usar literales de plantilla, que hemos visto en la sección Sintaxis. Y eso es todo. Es así, literalmente, como escribes una función. No es una ruta tan difícil. Es intuitivo, es fácil. Y lo mejor de todo, tiene mucho sentido. Pero en este punto del tiempo, sólo
hemos definido una función. No lo hemos ejecutado, no lo hemos llamado un en lenguajes de programación para ejecutar una función se conoce como invocar o llamar a esa función. Nuevamente, no se intimiden con estas palabras. Eso es todo invocar medios. Pero vamos a saltar y ver cómo en realidad invocamos esta función. Entonces como mencioné, invocar una función solo significa ejecutarla o ejecutarla. Echemos un vistazo a nuestra función de nuevo, prueba de función, donde solo alertamos hi name para recordarte que el gusto es solo un nombre personalizado que le dimos a nuestra función. Podemos llamarlo como queramos. ¿ Y cómo ejecutamos esta función? Tomaremos nuestro nombre, en este caso, gusto? Todo lo que hacemos es seguirlo por paréntesis. Es así de sencillo. No le estás diciendo al motor JavaScript que vaya y ejecute esta función. Pero aguanta. Nosotros sí definimos que esta función necesita una variable llamada nombre, un argumento llamado nombre. Entonces hagámoslo. Sólo pongamos a los hombres. Y eso es todo. Eso es todo lo que haces para invocar una función. Genial, hemos cubierto la teoría de que ahora, como siempre, veamos algunos ejemplos.
3. Invoking vs. la vuelta de una función: Antes de seguir adelante, sólo un ejemplo muy rápido, Recuerda cómo acabamos de decir que para invocar una función, hay
que hacer los paréntesis dobles. ¿ O qué pasa si no se incluyen los paréntesis dobles? Déjame mostrarte. Solidificar ahora función llamada lobo. Y todo lo que Wolff hace como consola registra a la pantalla. Ahora si no incluimos los paréntesis, ¿qué va a pasar? Las instancias de Linux no van a ejecutar la función, literalmente te devolverá la función en sí. Entonces solo ten eso en cuenta si quieres crear instancias de esta función y ponerla en variables, asegúrate de no poner los paréntesis atrás porque en cuanto pones los paréntesis atrás, ejecuta el función. Déjame mostrarte. Si nos vamos y ponemos entre paréntesis, ¿qué va a pasar? Bueno, vamos al registro de consola a la pantalla, cómo tienen sentido. Pero hay mucho más para ir. Sigamos con ello.
4. Conferencia divertida: haz un clic en texto y cambia texto: Funciones, veremos algunos ejemplos. En realidad quiero mostrarte dos ejemplos. Ahora, uno va a ser relativamente simple, el otro va a ser un poco más complejo porque ahora siento que te metes en ello. Me siento como tú de verdad y voy a estar estructurando archivos como lo haríamos en un sitio web real. Por lo que también puedes tener una idea de cómo vinculamos JavaScript con nuestro HTML. De acuerdo, ejemplo número uno, solo
quería tener texto simple. Cuando hacemos clic en ese texto, quiero que sea reemplazado por otro texto y quiero hacerlo escribiendo una función. Entonces sí, acabo de obtener un documento en blanco de Visual Studio Code. Todo lo que necesitamos hacer ahora es crear una carpeta y llamémoslo nuestro proyecto. Digamos que son cuatro J bajo ninguna función. Porque las cosas viejas, Project funden en nombre, vamos a tener un
archivo HTML de punto índice porque así comienza el apóstol. Tenemos que empezar aquí. Y esto es crear una plantilla HTML estándar en nuestro cuerpo que es crea un encabezado. llamaremos ejemplo de función. Tengamos un párrafo. Este es un ejemplo de cambio de texto a través de una función. Cambiar texto mediante el uso de una función de créditos. Y si hacemos click en OK. Go Live server, luego lo mostramos en un sitio web. Esto es lo que vemos ejemplo de función. Este es un ejemplo de cambio de texto. Genial, que si hago clic de todos modos, no pasa nada. Por lo tanto, volviendo a nuestro editor de texto, qué es lo que tenemos que hacer ahora tendrá que crear un archivo JavaScript. Y digamos dentro de esta estructura de carpetas grandes, tenemos otra carpeta llamada pública. Y dentro de esa carpeta, tienes tu archivo de script. Nosotros, escribimos todo nuestro JavaScript. Y ahora quiero que creemos una función que simplemente reemplace al gusto. Y recuerda, ¿qué necesitamos para crear una función? Vamos a decirles mapaches a JavaScript que estamos escribiendo una función, por lo que usamos la palabra clave function. Ahora necesitamos nombrar nuestra función. Es solo genial se muestra porque queremos mostrar tomas. Recuerda necesitamos los paréntesis después del nombre, si
acaso queremos analizarlo a través de argumentos. Y entonces tenemos que escribir realmente nuestro código entre paréntesis rizados. Y todo lo que queremos hacer es documentar.escribir función ISL. Según se ha invocado. Walden. Y es una función que otra vez, si volvemos aquí, no
va a funcionar porque aún no hemos hecho el enlace entre nuestra página HTML índice, haciendo clic en este párrafo, gallina nuestro archivo JavaScript. Entonces hagámoslo. Volvamos atrás. Sí, está bien. Nuestro archivo de índice. Y una vez que la pasta haya pasado por todo nuestro HDL y todo eso esté cargado en pantalla. Entonces va a golpear esta etiqueta de guión. Y la etiqueta de script va a hacer referencia a nuestro archivo JavaScript. Por lo que está en la carpeta pública y dentro de la carpeta pública y un archivo llamado script.js. Entonces lo que es genial de esto es que si vamos a nuestra página web y
refrescamos el puesto de clics no hace nada porque no le hemos dicho al navegador que cuando hacemos click, queremos que esa función se ejecute. Un pollo. Esto, Esto es genial. Si inspeccionamos este documento, entonces usted va a su pestaña Red y nosotros actualizamos. Se puede ver que se está cargando nuestro archivo de script. Si hace clic en el archivo de script todavía función GCF que hemos escrito dentro de él en rábanos. Un poco de información interesante para ti. Ahora, hagamos el vínculo entre marcar este texto y esto requiere cambiar. Entonces si volvemos a nuestro editor y miramos este texto de párrafo, este párrafo es donde salimos JavaScript para ser activado. Dentro de aquí, podemos definir un evento on click y listar solo ejecutar nuestra función show. Ten en cuenta que con un evento onclick, cualquier cosa entre buenas comillas es JavaScript. Por lo que ni siquiera tenemos que refrescar show. Por ejemplo, solo hagamos una alerta. Podemos, podemos escribir JavaScript directamente dentro de estas comillas. Y si volvemos aquí y hacemos click aquí, estos están alerta. Entonces está funcionando. Si volvemos a nuestro expediente, no
ejecutamos la alerta. En realidad queremos ejecutar nuestra propia función personalizada llamada show, que está en nuestro archivo JavaScript por aquí. Y si vamos aquí y hacemos click, ahí vamos. Documento.Escribir. Todo el texto ha sido sustituido por nuestra función, ha sido invocado, bien hecho. Entonces espero que esto esté haciendo escenas. Empezamos con un archivo HTML índice. Hemos definido nuestro párrafo, hemos hecho referencia ahora.
5. Diversión: muestra una cita aleatoria: ¿ Y si queremos un botón y cada vez que presionas ese botón, quieres que cambie el texto del párrafo. Entonces digamos que tenemos cuatro o cinco cotizaciones. Cada vez que pulses ese botón, grosor, selecciona aleatoriamente una de esas citas y muéstrala a la pantalla. ¿ Cómo haríamos eso? Hagámoslo juntos. Entonces el primer paso es crear una carpeta totalmente nueva. Y se llama nosotros función de proyecto avanzado. Ok, dentro, sí, vamos a tener un archivo index.html. Hemos pasado por esto, sabemos que aquí es donde tenemos que
empezar a crear una plantilla estándar. Y aquí vamos a tener un botón. Y llamemos a este botón mostrar cotización. Y ahora quiere un contenedor donde podamos mostrar las cotizaciones n. Así que solo tengamos una etiqueta de párrafo por ahora. Esto lo vemos en línea. Solo echemos un vistazo a cómo se ve. Deberíamos simplemente ver un botón vacío que no hace nada cuando hacemos clic. Entonces mostrar cotización, no pasa nada. Todavía no hemos definido nada, pero sabemos que tenemos un botón debajo del botón. Vamos a tener una etiqueta de párrafo que ahora está vacía, pero eso va a estar mostrando nuestras cotizaciones. Volvamos a nuestro editor y trabajemos en nuestra cotización. Entonces vamos a crear de nuevo. Digamos que tenemos una carpeta pública. Y dentro de la carpeta pública, digamos que tenemos tu script, tu JavaScript, donde sonamos nuestro JavaScript. Y aquí dentro queremos aparecer bastante así que definamos una función. Empezamos con la palabra clave de función, llamamos, ahora lo que queramos. Sólo llamémoslo mostrar cotización n dentro de los tirantes rizados. Ahí es donde tenemos todo nuestro código, nuestra carne. Y así es como nos vamos a estar metiendo en el uso de diferentes tipos de datos que hemos aprendido? Por eso es importante que aprendimos esas cosas antes desconocidas ahora. Entonces el primer paso es que necesitamos un lugar donde almacenar todas nuestras cotizaciones. ¿ Nosotros haríamos eso? ¿Cómo haríamos eso? Recuerda, las cotizaciones son solo cuerdas. Tipo de datos de cadena. ¿ Cómo podemos estancar múltiples cotizaciones es en una matriz
, porque una matriz almacena múltiples valores. Entonces llamemos a nuestras cotizaciones de matriz. Y empieza haciendo que nuestra nueva matriz esté vacía. No tenemos cotizaciones en el aseado. Y ahora agreguemos nuestras cotizaciones. ¿ Cómo agregamos cotizaciones? Llamaremos a nuestra matriz? Nosotros afirmamos que el primer elemento de la matriz, y recuerden, comienza con el índice 0 porque hace referencia a donde en la memoria vamos a acceder a esto desde un ahora es 0, vamos a acceder directamente desde su punto de partida mismo, que es blanco 0. Primera cita es, cuando llegues al, el extremo de tu cuerda, ate un nudo en ella. Y agreguemos otra cotización. En otra cotización, accedemos a nuestra nueva matriz, que ahora tiene un elemento en ella. Y ahora queremos que sea el segundo elemento de la matriz. Y esta cita puede ser, no
es nada permanente sino cambio? No es nada permanente. Pero agreguemos otra cotización. Accedemos a nuestro array. Ahora está diciendo que queremos que sea el tercer elemento. Y que esta cita POR otra cosa. Diga que la suerte es un dividendo de dulce. Y vamos a hacer un eje más, nuestra matriz. Queremos que este sea el cuarto elemento de la matriz. Y esta cotización sólo puede ser, es, toma tanta energía para desear como lo hace para planear. Entonces ahí vamos. Tenemos nuestras cotizaciones, tenemos cuatro cotizaciones dentro de esta matriz. Ahora lo que queremos que haga es que solo queramos mostrarlos aleatoriamente cuando se ejecuta
esta función show quote, cuando se invoca. ¿ Cómo se hace eso? Bueno, necesitamos crear un número aleatorio entre 03 para acceder a cada una de estas cotizaciones. Cómo hacen eso me dejará anotar primero, después te explicaré qué es lo que hemos hecho imágenes, deshazte de este año. Entonces todo lo que vamos a hacer es definir una variable aleatoria que siga cambiando. Y esta variable aleatoria será la que llame a nuestra matriz de citas. Entonces en efecto, es, este rand va a reemplazar estos números, 012 o tres, que aleatoriamente un número que sigue cambiando. Es todo lo que estamos tratando de hacer. Podemos acceder al objeto matemático de JavaScript. Y vamos a acceder al método completo en él, que simplemente lo hace alrededor de número entero. De lo contrario, va a producir números aleatorios que
no son un número entero y no podremos acceder a él en nuestro array. Eso es todo lo que hace esta función de piso. Entonces vamos a hacer que el exceso de la función matemática de JavaScript sea aleatoria. Y debido a que el punto matemático aleatorio produce número entre 01, necesitamos multiplicarnos por la longitud de nuestra matriz
para permitir que esta variable aleatoria tome valores. La misma longitud es nuestra matriz. Entonces por eso vamos a multiplicar por la longitud de las cotizaciones. Y eso es todo. Literalmente hemos definido nuestra variable aleatoria. Ahora bien, ¿cuál es el último paso? Permítanme sólo comentar esto. ¿Sabes lo que está pasando? Crea un número aleatorio entre 03 y ahora. ¿ Qué tenemos que hacer? Bueno ahora tenemos un XY es nuestro párrafo. ¿ Recuerdas esa etiqueta de párrafo? Vuelve a mostrarte en el archivo índice, tenemos esta etiqueta de párrafo. Queremos mostrar la cotización en esa etiqueta de párrafo. Señor. Sí, tenemos que identificar la etiqueta de párrafo e insertar nuestra cotización dentro de ella. De acuerdo, genial, entonces ¿cómo identificamos la etiqueta de párrafo? Bueno, esto lo hemos hecho en una de las conferencias anteriores. Pero solo para recordarte, JavaScript tiene un método getElementsBytagName incorporado, y se puede acceder a ese método en el objeto documento. Entonces getElementsByTagName. Queremos conseguir el párrafo. Y recuerda lo que dije antes, esto produce una lista de nodos. Por lo que tenemos, tenemos que acceder realmente al primer ítem de esta lista. Entonces queremos cambiar el atributo HTML interno de este párrafo. Y queremos que eso sea igual a qué? Eso es correcto. Accedemos a nuestro array de cotizaciones y pasamos en esta variable aleatoria. Y esto debería estar en el debería funcionar. Déjame explicarte todo en realidad primero, vamos a ver si funciona y luego te explicaré cómo funciona todo
esto de Matemáticas Floor al azar. Entonces vamos a nuestra página de índice. Si volvemos a nuestra página web y hacemos clic en esto, no va a pasar nada porque no hemos dibujado un vínculo entre hacer clic en este botón para ejecutar esa función, razón por la
cual tenemos que volver a nuestra página de índice. Lo primero que tenemos que hacer es referir nuestro archivo de script. Y eso está en la carpeta pública, y está en un archivo llamado script.js. Ahora, todo lo que tenemos que hacer es
definir cuándo se
llama a la función y lo vamos a hacer siempre que se haga clic en el botón. Por lo que insertamos un evento onclick en este botón. Y ahora necesitamos ejecutar nuestra función. A qué llamamos a nuestra función le echará un vistazo. Llamamos a eso funcion show quirk. Por lo que necesitamos volver a nuestro archivo de índice y necesitamos ejecutar. Claro, deja de fumar. Siempre que se haga clic en ese botón. Pero a ver si esto funciona. Vayamos a la página web. Refrescar. Haga clic en show incómodo. En el párrafo ego obtiene la cita insertada en él. Nada permanente más que cambio. Y cada vez que hago clic en esta cotización
, cambia. ¿Qué tan impresionante es esto? Para entender nuestras poderosas funciones todo no
tenemos que reescribir código cada vez que haces clic en un botón. Es solo ejecutar esa función una y otra vez y otra vez. De acuerdo, así que probablemente te estés preguntando cómo funcionó esta función matemática por aquí. Renta, Math.Piso, punto matemático aleatorio. ¿ Qué hace todo esto?
6. Math.random: De acuerdo, entonces te muestra qué método aleatorio es. Vamos a crear un nuevo archivo muy rápido. Y ahora esta es una conferencia larga, así que no tardaré mucho en OMP. Simplemente lo llamaremos Meteor.js. Vamos a cerrar todo lo demás. acaba de explicar el concepto general de lo que hemos hecho. Yo quiero empezar a co-ocurrir. Y ahora déjame mostrarte qué es lo que hicimos. En primer lugar, ¿qué hace que las matemáticas punten tipo aleatorio, está incorporado en JavaScript. Por lo que tuvimos acceso a este objeto automáticamente. Digamos solo número tardío igual math.pi, número de modus de consola
aleatoria y tardía. El Yeager y él leyó a Tommy, guarda el archivo, obtenemos un nuevo número aleatorio. Pero notarás que estos números están entre 01. Entonces cuando tenemos nuestra matriz, y es simplemente delicioso, digamos que la matriz LIT equivale a 135. Para acceder a estos, tenemos que usar 01 o dos. Por ejemplo, si quería una consola, cierre sesión el primer elemento
dentro, dentro de los corchetes, entre corchetes, tengo que tener enteros enteros. En este caso, o bien tengo que tener 0. Uno haría. Y eso recupera el valor de esa matriz. Entonces estás de acuerdo conmigo ya con número de uso
consciente porque número y mantenimiento ahorro ahora, así puedes ver que siempre está entre 01. Entonces, precisamente por eso multiplicamos el math.pi al azar por número. Y por qué número debemos multiplicar? Bueno, teníamos cuatro citas, así que lo multiplicamos por cuatro. Consola log array.length. Aquí tenemos tres, pero para mantenerlo similar al ejemplo anterior, te mostraré esto. Basta con poner uno más. Ahora tenemos lleno. Entonces multiplicamos esto por cuatro, pero en lugar de escribir realmente el número cuatro, simplemente lo decimos de nuevo. Bueno, vamos a multiplicarlo por su longitud. Ahora sabemos que el número más grande, esto puede ser tan lleno, un número más pequeño, esto puede ser un 0. Tú conmigo hasta ahora mayor. Pero ahora, ¿puedes ver cómo estos producen números tan aleatorios? Si tratamos de ir array y tratamos de acceder a un número como este, no
pudimos, no existe. Tiene que ser un número entero. Y por eso utilizamos Math.Floor. Y el Math.Floor siempre devuelve el entero más grande menor o igual a como número. Entonces por ejemplo, en la pantalla por el momento vemos los números 2.940 usando piso de metanfetaminas solo regresan a sostener para hacer escenas. Entonces todo lo que hicimos fue incluir una función de matemática.piso frente a toda una descripción aquí. Y la UGA. Por lo que ahora la variable numérica siempre estará entre 03. ¿ Qué tan impresionante es eso? Eso es exactamente lo que hicimos, que nos permitió acceder a todos los elementos de la matriz. La esperanza tiene sentido. Sigamos adelante.
7. ¿Cuál es la palabra clave de RETURN: Es importante entender la palabra clave return. Pero, ¿por qué? Echaremos un vistazo. Vamos a crear una función que acaba de agregar a y b Recuerda a la función crediticia, necesitamos la palabra clave de función. Ahora tenemos que ponerle nombre. Sólo llamémoslo agregar. Y sumemos dos números, a y b que pasarán a la función. Y mira esto. Voy a regresar. Javascript entiende lo que esto significa y voy a explicar en breve lo que significa. Y vamos a devolver un plus b. Y si ejecutamos esta función, es punto co-ocurrir. Y sumemos 510. Y su consola es ruidosa, registro de consola. Consideran. Se le ocurre una respuesta de 15, como esperaríamos. Pero, ¿qué significa en realidad esta palabra clave return? Echemos un vistazo. Hay palabra clave convertida simplemente tiene como objetivo la ejecución y adivinaste que devuelve un valor. ¿ Y si estos estrechos para invadir en esa instancia, indefinidos como devueltos, no ahora, indefinidos. Y algo más a tener en cuenta es que la declaración de retorno se ve afectada por la inserción automática de punto y coma. A lo que me refiero, tomemos nuestro ejemplo de función donde devuelve un plus B. Si tuviéramos que escribir retorno y en una nueva línea, escribimos un plus B. ¿Qué va a pasar? Will el analizador va a interpretar que se devuelve punto y coma y nombre a más b punto y coma. Y el punto importante a darse cuenta con esto es que el a plus b en esta instancia sería un alcanzable. Entonces, ¿cómo podemos devolver algo que se propagó a través de múltiples líneas? Bueno, en ese caso, sólo hay que encerrarlo entre paréntesis. Eso funcionaría. Echemos un vistazo a otro ejemplo rápidamente. Muy bien, así que algunos ejemplos más sobre la palabra clave return. Recuerda cómo dijimos que cuando usas la palabra clave return at detiene la ejecución de la función. ¿ Qué significa eso? Bueno, eso primero significa que si tenemos otras variables, definimos sin pelo igual a diez, d igual a 20, y consolamos log c más d Realmente se
puede ver mi IDE está como encanrecido estas declaraciones. Y la razón por la que son grandes desastres que estos no se van a ejecutar. Si sumamos 510 de nuevo en puesto nos muestra 15. Si quisiéramos ver ambos, entonces
tendríamos que volver a posicionarlos por encima de la declaración de retorno. Sólo ahora la consola log c más d y devuelve 15. Y siempre debes tener cuidado con la palabra clave return. Porque si no lo tienes, puede causar cosas raras. A lo que quiero decir, vamos a conseguir un tablón. Recuerda clunker, no hemos usado eso desde hace tiempo. Apenas en la página de inicio y remix haciendo clic en este nuevo botón aquí. Y podemos simplemente por defecto un archivo HTML,
CSS, y JavaScript vacío estándar . Y lo que es bonito de Planck es a la izquierda puedes especie de ver tu diseño de archivo de proyecto. Se puede ver que te sientas, tienes tu archivo de índice. Y si hacemos click en nuestro archivo de índice, se
puede ver que hace referencia al archivo JavaScript dentro de la carpeta lib. Es solo un buen resumen para ti. Es agradable ver cómo encaja todo. Pero ahora lo que quiero hacer es que quiero crear en el archivo de índice, vamos a crear un párrafo con ID demo. Entonces todo lo que estoy queriendo hacer, y en nuestro archivo JavaScript, que sabemos ya está referenciado en nuestro archivo de índice. Entonces sabemos que esto se va a ejecutar. Definamos una función llamada prueba. Y en gusto vamos a pasar en un nombre variable un argumento. ¿ Recuerdas cómo vimos este ejemplo antes? Y aquí todo lo que quiero hacer es escribir en ese párrafo Hola Vecino. Es todo lo que queríamos hacer. Por lo que ahora hemos definido nuestra función. Todo lo que necesitamos hacer ahora es acceder a su etiqueta de párrafo e insertar este texto en ella. Entonces, ¿cómo accedemos a una etiqueta de párrafo? Recordamos, empezamos con el documento porque esa es la aplicación global. Accedemos a un método incorporado en ese elemento get por ID. Y entonces podemos escribir lo que queramos dentro de él. Entonces aquí vamos a empezar con documento. Obtener elemento por ID, en este caso la demo ID Decebalus. Y ahí dentro nos preguntamos justo dentro de su HTML interno, queremos ejecutar esta función y digamos el Wally del usuario. Ahora todo lo que tenemos que hacer es previsualizar esto. Se puede ver es hola clunker. Ahí se insertó en el archivo index.HTML, y ahí vamos y encontramos. Es otra razón por la que si no tienes la palabra clave return, ¿recuerdas lo que dije? Devuelve indefinido. Acabo de probarme dos años Y esto es raro. Crees que Ys y no regresando Hola 10x. Y la razón es que, como lo
adivinaste, necesitas la palabra clave return. Entonces si ahora regresamos hola nombre y se refresca, deberíamos de recibir hola dolly y hacemos el ansioso. Y un ejemplo más. Vamos a abrir la consola de Chrome. Y tiene otro ejemplo es la función creativa. Llamemos a nuestra función gusto por falta de una palabra mejor. Y en, sí, sólo definamos un perro. Y digamos que su nombre es perrito. Está bien. Ahora bien, si ejecuto esta función, ¿qué esperas que te devuelvan? cual no hemos incluido la palabra clave return. Entonces sí, esperaría que lo indefinido fuera arrojado. Y eso es exactamente lo que pasó. Entonces, ¿qué pasa si creamos otra función? Y sólo llamémoslo gustos también. Y no estoy siendo muy creativo aquí con los nombres. Y está altamente dopado a igual valor. Ahora en lugar de cerrar y terminar la función, pongamos esa palabra clave return. ¿ Y qué queremos? Return will, digamos sólo que queremos que el perro regrese aquí D2, que es su nombre. Entonces cuando corro gusto a qué crees que debería pasar ahora? Es correcto, deberíamos ver que somos cuarto. Th, dos serán cuarto. Por lo que estos fueron solo tres ejemplos rápidos de cómo la palabra clave return puede afectar el resultado de la ejecución de su función a la velocidad en una mina. Es un punto bastante importante a tener en cuenta. Sigamos adelante.
8. 2 tipos de funciones: declaración vs. la expresión: Ahora antes de seguir adelante, que va a echar un vistazo rápido a los tipos de funciones. Recuerda qué objetos había diferentes formas de crear un objeto. Teníamos literales, teníamos constructores, teníamos el método de creación, teníamos la clase, o lo mismo con funciones. Tenemos diferentes formas de crear una función. Pero lo que es bonito es que está aquí. Es un poco más sencillo porque solo hay dos formas de definir una función en JavaScript. Tenemos una declaración y tenemos una expresión. La declaración que hemos estado viendo a menudo a través nuestros ejemplos de que cuando tenemos la palabra clave function, entonces tenemos el nombre de nuestra función sin embargo decimos hola, tenemos los índices de PR donde pasamos en un parámetro. Y luego tenemos las llaves donde realmente definimos nuestra función aquí. Simplemente definimos a Hai Nan mediante el uso de literales de plantilla. Entonces esa es una declaración de función. Bueno, ¿cómo escribiríamos la misma función pero usando una expresión de función? Bueno, sí, se puede ver lo similar que es. Simplemente definimos una variable llamada SayHi y asignamos net la función. Se puede ver en ambas instancias, tenemos que usar la palabra clave function es esta sintaxis de flecha la cual vamos a llegar sobre ti. Pero antes de entrar en eso, se
puede ver la forma tradicional de crear ambas funciones significa que teníamos que usar la palabra clave function. Así que vamos a sumergirnos en estos con un poco más de detalle. Tenemos una declaración de función en el ascensor y expresión de función
melódica a la derecha. Y el significado de ambas funciones son exactamente el mismo. Y con eso, solo quiero decir que ambos crearon función y robaron función en una variable llamada variable. Di hola. Entonces probablemente estés preguntando, bueno entonces ¿por qué tener un método sobre el otro? Y la respuesta es que hay una diferencia más sutil. Y esa diferencia es el momento de cuándo se crea la función. Y se puede crear una función de inmediato o posterior. Y con una declaración de función, se crea de inmediato. Y con una expresión de función, sólo se crea, Se llama. Y les voy a mostrar ejemplos de lo que esto significa en la próxima conferencia. Entonces no te preocupes si no entiendes completamente lo que esto significa ahora que solo a un nivel muy, muy alto, eso solo significa que la declaración de función, realidad
puedes llamar a la función aunque la hayas definido más adelante en tu código. De acuerdo, pero ahora veamos las expresiones de función con un poco más de detalle. Lo primero que notarás es que puedes almacenar la función en una variable. Cómo lo hemos llamado, di hola. Y lo otro a tener en cuenta es x_k con expresiones de función. ¿ Te das cuenta de cómo no damos la función real y m? Mira la declaración de función donde decimos función y seguimos eso por el nombre de la función llamado SayHi. Sí, solo definimos una función. Bueno, en jerga de programación, eso sólo se conoce como una función anónima, es sólo una función sin nombre. Como que le hemos dado un nombre porque lo ponemos en una variable que no le hemos dado
directamente a la función un nombre como lo tenemos para la declaración de función. Y una de las otras ventajas masivas con una expresión de función es una dudosa. Y otra vez, no te intimiden con estas palabras raras. Todo lo que significa es que cuando se quiere usar una función una vez, a menudo lo
haces a través del método llamado iffy inmediatamente invocado expresión de función. Eso es lo que representa. Y no quiero estar entrando en expresiones de función invocadas de inmediato en este momento. Si eres como yo, no
quieres tener curiosidad en cuanto a lo que esto realmente significa por el bien de rascarse a cada uno. Permítanme que les dé un ejemplo rápido. Digamos que tenemos un elemento de párrafo con una ID de gusto en nuestro HTML. Y todo lo que queremos hacer es que JavaScript ejecute código que coloque una cadena llamada Yj en su párrafo. ¿ Cómo vamos a hacer eso? Bueno, por supuesto, primero necesitamos empezar con la etiqueta de guión. Dean Leeds, define una expresión de función. Aquí no estamos haciendo una declaración. Estamos haciendo una expresión de función. Vamos a acceder al objeto de documento de JavaScript, que es tu página web general. Y en documento del PNUMA, automáticamente
obtenemos acceso a un elemento get por método ID. El ID, queremos un buen gusto, y luego queremos cambiar su HTML interno a sí. Entonces ahí lo tienes. Estos son expresión de función. Cerramos la etiqueta de guión y lo hicimos. Pero el problema con esto es que no hemos llamado pesada a esta función. Ahora acabamos de definir una expresión de función. Por lo que con una expresión de función invocada de inmediato, queremos decirle al motor que ejecute esto de inmediato, automáticamente. Cómo vamos a hacer eso, lo haremos, todo lo que tienes que hacer es que tengas que encerrar tu código entre paréntesis. Y luego te vas, le has dicho a JavaScript que esto es un iffy y ejecutar una función. ¿ Recuerdas lo que teníamos que hacer? Hacen un seguimiento, tuvimos que seguir esa función por paréntesis. Y es lo mismo con una dudosa. Sigues la función con paréntesis y Bob es tu tío. Acabas de crear tu primera función de auto invocación. Entonces permítanme mostrarles algunos ejemplos ahora, ejemplos
prácticos de las diferencias entre una expresión y una declaración de función.
9. Declaraciones de función con función vs. expresiones de función: Expresiones de función por un lado, declaraciones de
función por otro, Johann, esto puede ponerse bastante confuso. Entonces solo pensé limitar ejemplos resonantes en ti. Echemos un vistazo primero a una declaración de función porque eso es lo que solíamos utilizar para la declaración de función. Y sólo tengamos una función llamada perro, esa consola lo registra sonido. ¿ Cuál es el primer paso con la declaración de función? Tenemos que decirle a JavaScript que estamos a punto de definir una función en. Tenemos que llamar algo a una función. Entonces llamémoslo hablar. Necesitamos los paréntesis porque quizá queramos pasar argumentos a una letra. Y luego definimos nuestro código dentro de las llaves, digamos sonido igual. Y entonces todo lo que queremos hacer es que queremos consola registren el sonido a la pantalla. Y para ejecutar o invocar esta función, ¿qué necesitamos hacer? Así es, necesitamos usar nuestro mismo nombre, un include, paréntesis. Y luego vas a los registros de consola. Entonces esa es la declaración de función. Hemos estado viendo muchas declaraciones de funciones. Deberíamos estar cómodos con eso. Bonobo, ¿qué pasa con una expresión de función? Echemos un vistazo. Función. expresión de función lo hará, la mayor diferencia sintáctica en cómo
se ve es que la ponemos en una variable y es una función anónima, eso siempre es suerte. Entonces definamos ket. Y puede haber una función. Pero ahora en este caso, ten en cuenta, no
hemos llamado nada a nuestra función, y por eso se llama función anónima. En la declaración de función anterior, agregamos función y llamamos a nuestro perro de función. Sí, sólo tenemos una función que la estamos asignando a una variable llamada gato. Entonces es casi lo mismo. Simplemente está estructurado de manera diferente. Y hagamos lo mismo después. Suena miau. Y queremos consola log el Sur. Nada nuevo ahí en ejecutar una expresión de función. Nuevamente, sólo usamos el nombre de nuestra variable y la encerramos entre paréntesis. Miao, Hou. Entonces probablemente piensa, Ok, cool, ambos
se ven un poco parecidos. Sienten lo mismo. ¿ Por qué tener que desperdiciar para declarar una función? ¿ No es esto más confusión? Will no es como no lo es. Depende de lo que quieras hacer con estas funciones. Y como acabamos de decir en la conferencia, la principal diferencia es el momento de cuándo se pueden utilizar estas funciones. Déjame mostrarte. Entonces, sólo vamos a desplazarnos hacia abajo. Y permítanme decir que el tiempo es la principal diferencia. Por lo que las declaraciones de función se pueden utilizar en todo el ámbito. Y lo que quiero decir con eso es, digamos que
la función Declaraciones se puede usar en todo su alcance. Y sí, sólo vamos a estar lidiando con el alcance global. Y te mostraré un ejemplo. Esto acaba de volver a nosotros decir hola función y dijo si queremos
pasar en el nombre del usuario y sólo la consola registra un mensaje de bienvenida. Por lo que el primer paso de la declaración de función es decirle a
JavaScript que recrea una función por la palabra clave function. Nosotros lo llamamos, decimos hola, lo
llamamos como queramos. En esta instancia, queremos pasar en un nombre y luego escribimos nuestro código entre estas llaves. Y todo lo que queremos hacer aquí es que queremos consola log. Y vamos a usar literales de plantilla. Y sólo vamos a decir hola, nombre, función razonable. Y vamos a invocar la función. A ver qué pasa. Di hola y pasamos en Tang. Y sí, va a consola de registro. Hola Tom. Pero déjame preguntarte esto, ¿qué pasa si ejecutamos esa función? Los cuatro incluso declararon la función? ¿ Qué va a pasar? Bueno, mira las declaraciones de función cómica se pueden utilizar en todo su alcance. Ella tenía global. Entonces si movemos el say hi Tom a la parte superior, va a funcionar porque el analizador, cuando golpee esta función, cuando esté pasando el archivo, incluso antes de que sea ejecutado y renderizado a la pantalla. Ya va a tener almacenada la función say hi. Eso va a saber exactamente cuál es esa función. Entonces cuando vayas y lo llames, incluso antes de que lo hayamos definido en nuestro código, será código válido, ¿qué sucede con las expresiones de función? Serán expresiones de función. Las expresiones de función son accesibles y utilizables cuando se define. Y lo que quiero decir con esto, bueno, vamos a crear exactamente la misma función. En lugar de saludar, solo llamémoslo, dile adiós. Entonces vamos a decir, digamos Por función igual, una función anónima, porque ahora no hemos nombrado a esta función. Se va a pausar a nombre. Y aquí solo queremos consola log usando literales de plantilla por. Y ellos nombran. Nuevamente una función muy sencilla. Y si quieres ejecutar, dile adiós con la palabra Tom, funciona. Todo en este punto funciona. Y no tendrías preferencia alguna por usar uno u otro en este escenario. Pero, ¿qué pasa si ejecutamos eso? Intentamos ejecutar, digamos comprar antes de que hayamos declarado la variable, antes de declarar la función. Echemos un vistazo. Vamos a subir esto y golpear que nos están echando en Irak. Digamos que el bi no está definido. Y ese es el punto que estoy tratando de hacer con esto. No podemos acceder a expresiones de función antes de que se declare. Simplemente y, pasemos. No lo sé. Simplemente no sólo iba a lidiar con ello. Enfriar. Y sigamos adelante.
10. Las funciones son como valores: Esto sólo va a ser una conferencia rápida esta noche. Quería mencionar la red es funciones en JavaScript están disponibles. Y lo que significa es que podemos lidiar con ellos. Y eso suena extraño, pero podemos tratar con él como un valor. Y todo lo que quiero decir con eso es que puedes arrojar funciones, puedes pasarlas a otras funciones. Puedes asignarlo a variables. Y esto hace que las funciones en JavaScript impresionantes un inigualable con sus otros idiomas no sean tan flexibles. No se puede hacer esto con funciones. Déjame mostrarte lo que quiero decir. Simplemente te daré un ejemplo de asignar una función a una variable. Podemos definir cualquier función que fuimos. Entonces, solo trabajemos con una declaración de función porque es muy fácil e intuitivo hacer estos y excluye la función perro. Y esto es sólo ir al registro de la consola. Bueno, nada nuevo entonces. Pero ahora podemos tratar esta función como un valor y asignarla a otra variable. Qué cosas impresionantes. Por lo que literalmente podemos ir LET perro salchicha, perro. Y ahora en este punto del tiempo, cabezas de perros
salchichas se les asignó el valor de esa función. Entonces para ejecutar este Voc, funcionaré. Utilizamos los paréntesis normales. Cell, son X's son perro salchicha. Y ejecutado. El ego consola registra riqueza. Y por supuesto, tenemos el perro salchicha, pero también tenemos nuestra función de perro que podemos ejecutar. Y eso también ejecuta con a la consola y lo tienen. Solo quería mostrarte esto antes de seguir adelante porque sé que esto podría parecer simple, pero tiene profundos impactos en ti y yo como desarrolladores porque JavaScript es increíble como nosotros, nos permite tanta flexibilidad para trabajar con funciones tirarlos y ponerlos en variables realmente es genial. Entonces, antes de que pasáramos a cosas más complicadas, solo
quería compartir esto contigo.
11. La nueva sintaxis ARROW explicada: Esta sección sobre funciones no estaría completa si no discutiéramos las funciones de flecha. Las funciones de error son solo una forma concisa, una forma rápida de definir expresiones de función. Y es uno de los cambios más prácticos introducidos por ES6 o ES 2015. Y la forma en que me gusta verlo es que introduce dos grandes beneficios. Beneficio número uno, que es el más intuitivo y obvio, Es sólo más corto escribir, nos
lleva menos tiempo y es más fácil. Tomemos nuestra expresión de función say hi. Sabemos cómo está escrito eso. Ya hemos visto esto antes. Para que puedas ver con sintaxis de flecha, tomamos paréntesis dobles y ponemos todos nuestros argumentos en NY, usamos la sintaxis de flecha. Y luego definimos nuestro código en las llaves. Por lo que es muy similar a la antigua. Es sólo un poco más rápido. Pero dependiendo de lo que queramos hacer con nuestro código, incluso
podemos simplificarlo aún más. Por ejemplo, si no tienes parámetros, lo que significa que no estamos queriendo pasar variables o argumentos, entonces puedes hacerlo. Permítanme mostrarles un ejemplo. Si no tienes perímetros, crear expresiones de función a través de la sintaxis de flecha es súper simple. Echemos un vistazo. Definamos una variable llamada SayHi. Y ahora normalmente, tendríamos que incluir ahora la función de palabra clave. Sí, ¿no lo haríamos? No con sintaxis de error. Eso es lo que es tan guay. Solo podemos tener corchetes de apertura y cierre. Ahora tenemos que incluir la sintaxis de flecha. Y luego tenemos corchetes rizados de apertura y cierre una vez más. Y esto es sólo ir al registro de la consola altamente. Y ahora, ¿qué he hecho mal aquí? Para los paréntesis, registro de consola, diga ego alto, y si ejecuto, di hola, it console logs, hola ahi. No hay problema con eso. Pero ni siquiera tenemos que tener los corchetes de apertura, cierre, Dewey. Simplemente podemos tener el guión bajo y otros ejemplos. Vamos, digamos por igual. Y sí, solo puedes tener el guión bajo. No puede ser mucho más simple. Net no puede tener la sintaxis de flecha, los corchetes rizados de apertura y cierre. Y sí, sólo vamos al registro de consola por el. Y eso es a, si ejecutamos esta expresión de función, obtenemos pi Day. O si tienes un parámetro en los corchetes de apertura o incluso opcional, ni siquiera
tienes que tener corchetes de apertura. Permítanme mostrarles otro ejemplo. Okey-dokey. ¿Y si solo tienes un parámetro? Bueno, es muy sencillo. Se define una variable de nuevo llamada SayHi. Recuerda normalmente ahora necesitaríamos la palabra clave function, pero como estamos usando sintaxis de error, estamos reemplazando eso por el error. Entonces, ¿qué hacemos? Bueno, cuando tienes un parámetro, ni siquiera
necesitas abrir y cerrar paréntesis. Simplemente puede escribir el argumento, Utilice la sintaxis de flecha. Y nuevamente, nuestra opinión cerrando corchetes rizados. Y entonces ahora todo lo que queremos hacer es iniciar sesión en consola usará literales de plantilla. Alto. Nombrado. Ahí vas. Literalmente lo hemos hecho. Hemos reemplazado toda la complicada y engorrosa forma de expresiones de función en una sola línea. Y podemos consolar esto para ver si funciona. Y dice, hola, indefinido. Ah, nos olvidamos de pasar con un nombre. Pasamos en nombre de la salvajemente carretera de la NSA. Entonces sabemos que eso funciona. Y la forma más sencilla que podemos dibujarlo como si sólo estuviéramos regresando una expresión. Ni siquiera tenemos que tener los tirantes rizados. Echemos un vistazo a un ejemplo rápido de cómo se ve eso. Y ahora, si eres un giro sólo una expresión, ni siquiera
necesitas corchetes rizados. ¿ Qué tan demente es eso? Permítanme darles otro ejemplo. Entonces digamos que tenemos una expresión de función y tenemos una, vamos a poner eso en una variable podría agregar. Ahora ordinariamente necesitaría poner función. No tenemos que poner función podría estar usando sintaxis de flecha. Digamos que tenemos dos argumentos, num1 y num2. Y todo lo que queréis hacer ahora es que queríamos devolver la adición de estos dos. Entonces tú y yo sabemos normalmente que lo pondríamos entre paréntesis rizadas y podemos. Pero el punto es con la sintaxis de flecha, podemos acabar con eso porque ahora sólo estamos devolviendo una expresión. Estamos regresando nulo m1 más m2. Y quiero decir, eso es tan elegante, ¿no? Es hermoso. Es como el arte. Y si ejecutamos esta función y pasamos en 12, recuperamos tres, el ego, el hábito,
el índice de aerosol es mucho, mucho más fácil de usar. De acuerdo, entonces esas son algunas diferencias sintácticas con la sintaxis de flecha, pero ahora algo un poco más significativo. Beneficio número dos, no hay ningún enlace de esta palabra clave. Esto es tan crucial. La función de error no se vincula. De esta manera. Y por supuesto, esto es teoría. Déjame mostrarte exactamente lo que esto significa.
12. ¿Qué significa la vinculación de ESTA TE.: ¿ De qué va esta palabra clave? ¿ Qué hacemos, qué estamos haciendo? ¿ Cómo funciona, y qué hace el alma de sintaxis de error? ¿ Qué significa cuando dice que no hay vinculante de esto? Echemos un vistazo a lo que todo esto significa. Pero empecemos en una función constructora muy simple. Recuerde, con una función extractora, el valor de esto está ligado al objeto recién creado que se está creando. Y esto tiene sentido, ¿verdad? Bueno, vamos a crear una función constructor Persona donde sentamos este nombre igual. Y recuerda cuál fue el segundo paso con una función constructora. Era para usar la nueva palabra clave, esa tribu. Y cuando hacemos eso, cuando decimos let user es igual a nueva persona, lo que realmente estamos haciendo es el valor de esto está siendo ligado
al objeto recién creado a eso significa cuando nos referimos a esto en nuestra llamada de función, esto se refiere a la usuario, el objeto recién creado. Y si consola logramos cerrar sesión usuario, podemos ver que ahora hemos establecido esta propiedad de nombre, que es nombre de usuario a Molly. Entonces eso tiene sentido, ya lo sabes. Pero ahora vamos a cavar más profundo. Ahora vamos a sentar un temporizador usando el intervalo establecido y los intervalos de sentarse en la función JavaScript masiva. Ya veremos cómo funciona. Entonces vamos a comentar esto para que no consigamos nombres de variables conflictivos. Y de nuevo, definamos la función de Harrison. Y digamos que este nombre está hirviendo. Y ahora lo que quiero hacer es sólo quiero decir para incluso ir y usar qué? Solo quiero consola log hi, cada 1 segundo a la consola. ¿ Cómo haríamos eso? Simplemente definiremos un método llamado display. Y lo haremos igual a JavaScript en Bolt sit interval. Y puedes ver que mi IDE realmente lo ha recogido para mí. Estoy establecido intervalo. Entonces cómo funciona el intervalo enfermo ya que tienes que tener paréntesis y puedes ver mis identificaciones ya diciendo que el primer argumento tiene que ser nuestro manejador. En otras palabras, va a ser nuestra función. Se llama destinatario. Los tejidos tienen una función que se llama sheriff. Podemos llamarlo como queramos. En realidad no importa en esta instancia. Y fuimos a la consola, iniciamos sesión a la pantalla. Hola, así que vamos a hacer por ahora. Y el segundo argumento en esta función de intervalo establecido. Y si solo pongo un ID de coma ya me dice que es el tiempo de espera. Eso es cuántos segundos laboratorios dominantes antes antes de que se vuelva a llamar a esta función. Y esto es en milisegundos. 100 milisegundos es de 1 segundo. Y lo tienen. Tiene nuestra función. qué va a pasar cuando creemos un nuevo objeto y ejecutemos esto, echemos un vistazo. Por lo que deja usuario igual a persona mu. Y lo que voy a hacer ahora en realidad es que quiero poner esto en la consola de Google Chrome, solo va a ser más fácil para nosotros ver los resultados de nosotros. Entonces sí, yoga, tiene nuestra consola. Entonces todo lo que quiero hacer es que quiero copiar esta función. Vamos a nuestra consola y está pegado aquí. Y lo que va a pasar ahora es que cada segundo máximo se va a mostrar a la consola. Y se puede ver que eso es exactamente lo que está pasando. Es lo que esperaríamos. Pero, ¿qué pasa si quisiéramos exhibir? El nombre de pila, Wally, cada secreto. ¿ Crees que podríamos hacer eso? Sí. Por cierto, en caso de que te estés preguntando por qué se ha ejecutado esto cada segundo, solo tienes que dar un paso atrás y pensar en qué es lo que hemos hecho. Hemos definido una función constructor. Hemos definido un nuevo usuario, y hemos ejecutado esta función constructor. El problema es que con el intervalo SEC es como cuando la parcela pasa por ella y se ejecuta, nunca se detiene. Ni siquiera lo hemos definido para parar a Sue va a continuar indefinidamente. De todos modos. Volviendo al punto que nos ocupa, ¿qué pasa si quisiéramos mostrar volumen no alto sino alto? Por lo que queríamos acceder al nombre de pila. Bueno, tu primer pensamiento podría estar bien, genial. Vamos a usar literales de plantilla e ir en el registro de la consola e ir alto. Y logramos cerrar la sesión de este nombre, ¿verdad? Un poco hacer escenas que parecían vamos a copiar esta función. Eso es bueno. Nuestra consola nuevamente nos detuvo en clara la consola. Ahora peguemos nuestra función recién creada. ¿ Qué va a pasar? Hola, indefinido. Y este es el punto que estoy tratando de hacer con expresiones de función. Este método de intervalo de asiento es sólo una función normal. No hay nada especial en ello. Pero lo que está sucediendo es que esta palabra clave se está configurando en el objeto global, no se
está enviando
al objeto recién creado en casi ignora el alcance actual en el que se encuentra. Y sólo hace referencia a esto como al objeto global. Y déjame demostrarte esto, no lo que dio una plática arriba. Y ahora recuerden cómo dije que dentro de esta expresión de función, que esta palabra clave, cuando usamos una expresión de función que está haciendo referencia al objeto global, me permitirá demostrárselo a ustedes. Y para demostrártelo, o tenemos que hacer es deshacernos de él. Simplemente se deshace de todo el bote de consola y solo controla esto. Entonces lo estamos haciendo. Y vamos a copiar esa expresión y está pegada en Google Chrome. Ahora, ¿qué va a pasar? El ego, este es el objeto de ventana que se está consolando cada segundo a la pantalla. Nuevamente, de vuelta a la consola. Entonces estamos de vuelta en la consola y sabemos cuál es el problema. No queremos que esto esté ligado al objeto global. Casi queremos esto. Mujeres, casi sí queremos que esto quede ligado al contexto original. No queremos que se reemplace por necesitarnos. Y eso es exactamente a lo que nos referimos cuando decimos que la sintaxis de flecha no vincula esto. Así que digamos ahora queríamos que esto se atara en su contexto original. Este es el punto completo de una sintaxis de flecha. Entonces déjame mostrarte, en lugar de tener esta función de sintaxis show, vamos a reemplazarla con sintaxis de flecha. Por lo que no necesitamos la función y ni siquiera necesitamos nombrarla. Todos. Necesitamos abrir y cerrar paréntesis y el error. Ese es el único cambio que necesitamos hacer. Ahora si copiamos esta función y pegamos esto en el navegador, sigue yendo de nuestro ejemplo anterior. Vamos a refrescar la página. Despeja la consola, pega la disfunción en necesidad. ¿ Qué va a pasar ahora? Esto es perfecto porque ahora tenemos consola registrando el objeto de usuario recién creado. Y vamos a parar de nuevo esto. Permítanme refrescar la página. Despeja la consola. Volvemos aquí. Ahora somos capaces de usar sintaxis literal. Y podemos decir, hola, este nombre. Y copiamos esto, lo
pegamos en nuestro navegador. Deberíamos conseguir hola Wally, cada segundo. Qué increíble como nosotros y espero que se hundió en que esto es lo que está haciendo la sintaxis de error. Si volvemos a nuestra consola es solo una cosa más que quiero mostrarles. Otra forma de demostrar que esto está apuntando al objeto
de la persona está dentro de nuestra expresión de función. Sí, después de definir primero a Nemo, incluso antes de que no importe, solo
podemos decir que alcance tardío igual a esto. Y lo que podemos hacer es que podemos consola log scope igual a la, esta palabra clave. Hacer estos dos iguales. Y de nuevo, vamos a copiar esto. Pega en nuestra consola. Will platos despejados al principio, pegados en nuestra consola. Y debemos hacernos realidad. Y nosotros sí. Entonces ahí lo tienes, ahí lo tienes. Hemos ido en profundidad en cuanto a lo que esto significa y la sintaxis de flecha y cómo impacta a la palabra clave esta. Espero que te hayas divertido.
13. Recap de tiempo: Quien, señor, hemos aprendido una cantidad increíble en poco tiempo. Y a veces solo es bueno dar un paso atrás y averiguar dónde encaja todo. Entonces eso es lo que pensé que esto sería una recapitulación muy, muy rápida. A menudo la gente se confunde entre variables, objetos y funciones. Sólo veamos qué les ofrecen. Variables miembro, dijimos que deberíamos estar usando constante. Déjalo, esta es la nueva sintaxis introducida por ES6, const y tardía o variables. Y todo una variable es, es un contenedor para almacenar una pieza de información. Piensa en tu despensa. Pones comida en un recipiente. Etiquetas ese contenedor y lo pones en el estante. Eso es todo una variable, es sólo un contenedor. Cuando usamos const, sabemos que no queremos que eso cambie nunca, por ejemplo, mi nombre. Pero cuando usas la palabra clave let, dices que realmente puedes reasignar esa variable si quieres. Entonces, por ejemplo, cada año tu edad va a cambiar. Stats variable, tienes eso cubierto. ¿ Y un objeto? O un objeto también es algo así como un contenedor. Pero no solo almacena un valor que almacena
una gran cantidad de pares de valor de nombre y separas cada par de valor de nombre por común. Ya hemos visto esto. Y para definir un objeto, hay
que usar esos corchetes rizados. Eso es lo que le dice a JavaScript, hey, este es un objeto tratado como un objeto. Y finalmente tenemos funciones por las que acabamos de pasar. Y una función y me gusta pensar como una palabra de hacer que haga algo. Y nos enteramos de la nueva sintaxis de flecha. Y aprendimos que las diferentes formas de definir una función están mirando ahora donde decimos let with y hemos usado la sintaxis de flecha, esa es una expresión de función. Y hemos visto que deberíamos estar usando la palabra clave return apunta a la ejecución de la función. ¿ Y cómo invocamos una función? ¿ Cómo lo llamamos? ¿Cómo lo ejecutamos? Se puede ver que todos estos nombres son sólo palabras de fantasía, pero todos significan lo mismo. Bueno, para invocar la función con, tenemos que usar el nombre off porque tenemos que
decirle a JavaScript a qué función queremos llamar. Y entonces sólo seguimos eso por paréntesis. Y eso es todo. Entonces da un paso atrás, mira estos en un pedazo de papel. Tener vista a ojo de pájaro. Y entonces se puede empezar a sentir por qué necesitamos los tres. No podemos simplemente acabar con uno. Espero que esta haya sido sección realmente, realmente genial. Y espero que hayan disfrutado del curso. He tenido una tremenda cantidad de diversión juntándolo. Me encantan las cosas. Y la buena noticia es que aún no hemos terminado. Te veré pronto.
14. Método de toLowerCase(): introducción: A quien supongo que lo que acabo de escuchar esta mañana desde nuestra primera vez, hice una sesión de yoga y estoy destrozada. Hicimos esta cosa llamada, creo que se llamaba el Pájaro del Paraíso. Pyres me voló la cabeza. Entonces, de todos modos, estoy en mucho dolor ahora mismo. Pero eso no debería detenernos a aprender sobre JavaScript. Y muy específicamente, quiero que aprendamos de este método llamado dos minúsculas. Suena sencillo, pero solo quiero que entiendas exactamente cómo funciona porque es un método muy, muy útil que nos proporciona directamente de la caja por JavaScript. Ahora bien, aunque no toma ningún argumento, es un método súper práctico. ¿ Por qué? Bueno, en muchos casos, quieres que tu texto o quieres que tus cadenas sean insensibles a mayúsculas y minúsculas. Aka, No quieres capitales a una falsificación, lo que sea que estés haciendo. Por ejemplo, si tienes una lista y un usuario escribe en una palabra determinada, a
veces quieres ver o quieres comparar si esa palabra está en la lista y no quieres que las mayúsculas arruinen tus fórmulas. En ese caso, ¿por qué no simplemente convertir todo en minúsculas? Y para ello, si utilizamos las dos minúsculas emitidas. Entonces sin más preámbulos, saltemos rápidamente a la presentación y
empecemos a hablar del método de dos minúsculas disfrutando. Entonces, ¿qué es exactamente este método ToLowerCase? manera muy simplista todo lo que hace, y es muy intuitivo. Convierte tu gusto todo en minúsculas. En otras palabras, el método ToLowerCase devuelve la cadena de llamada, la cadena en la que la has llamado. Convierte ese valor de cadenas todo en minúsculas. Y podría simplemente parar aquí, pero quiero que sepas solo un poquito más de esos métodos ToLowerCase. En primer lugar, es una función de JavaScript que nos proporciona el lenguaje JavaScript. Segundos IQ no toma ningún argumento, pero no dejes que eso te engañe. Sigue siendo un método muy poderoso. Y lo que realmente quiero que entiendas todavía, y quiero hacer una pausa en este punto, es que el método toLowerCase no altera la cadena original. En cambio, genera la nueva cadena modificada. La levadura era todas letras minúsculas. Déjame subirme a la consola y déjame mostrarte lo que quiero decir con esto. De acuerdo, entonces sabemos que el método en minúsculas no afecta a la cadena original. Yo sólo quiero demostrártelo ahora, ¿cómo voy a hacer entonces? Vamos, vamos a crear una cadena y vamos a llamarla sólo una frase original. Y esto sólo decir, hacer que sea igual a ranas locas o simplemente, bueno, ya sabes, locas. ¿ Cómo es eso? Y entonces vamos a crear una nueva frase. Por lo que esta fríquela frase más baja. Y sí, quiero que accedamos a nuestra frase original. Y esto es lo que quiero que hagamos a continuación en un eje, el método de dos minúsculas. Y lo que es realmente impresionante es que debido a que tenemos una cadena y esta frase original es una cadena tensa, automáticamente
tenemos acceso al método Javascripts ToLowerCase. ¿ Cómo accedemos a ella? Saldremos con la notación de puntos? Y por supuesto, solo podemos empezar a escribir ToLowerCase y nuestro IDE ya recoge este método. Por lo que puedo hacer clic en Tab. Paréntesis abiertos y cerrados para ejecutar ese método. Y estamos terminados y espolvoreados. Ahora, puedo abrir un navegador y podemos consola registrar cosas a la pantalla. Pero quiero usar algo llamado Crocker. Vamos a mi ficha de extinciones aquí. Y acabo de empezar a escribir Crocker. Y puedes ver que he instalado co-ocurren en mi IDE. Es realmente, realmente útil, tan altamente recomendable. Y todo lo que necesitamos hacer para ejecutar Crocker es que literalmente llamamos aquí el cuadro de búsqueda. He presionado la tecla Control Shift en mi teclado y quiero iniciar un reloj o en el archivo actual. Es solo un plug-in extra y nos permite
ejecutar JavaScript en tiempo real en este archivo. Es todo lo que hace. Entonces aquí vamos y todo lo que quiero hacer es que quiero cerrar la sesión de la frase original. Y se puede ver el azul toma datos. Eso es lo que se está consolando, piernas lo que nos está regresando por JavaScript. Y este es Crocker trabajando. Simplemente nos permite ver nuestros efectos en tiempo real para su muy útil. Ahora bien, ¿qué crees que va a pasar cuando regresemos sentencia más baja? Bueno, seguro que probablemente ya lo adivinaste. Todos. Va a pasar es que obtenemos exactamente lo mismo que todo en minúsculas. Pero lo que he logrado demostrarles es que nuestra frase original,
esa frase original que escribimos juntos no ha cambiado. Este método ToLowerCase no altera esa cadena original. De acuerdo, se observan un poco haciendo santos. Sigamos. Está bien, genial. Por lo que hemos visto que no altera la cadena original. Infectados genera uno nuevo. Pero en este punto del tiempo, aún puede que te estés rascando la cabeza. Es posible que te estén atrapando y el ruido proporcionado por JavaScript. Pero exactamente lo hacemos de. Y la respuesta a esto es tambores por favor. Eso viene del objeto string en JavaScript. Y solo recuerda que el objeto string es un objeto global para todas las cadenas. Nuevamente, déjame subirme a la consola y las imágenes te muestran dónde podemos encontrarla. Vamos a retomar exactamente donde lo dejamos. Recuerda que
escribimos la frase, la convertimos en minúsculas. Ahora, solo quiero demostrarles que tiene que estar en una cuerda. Entonces una forma de hacerlo es usar el tipo de operador. Entonces vamos a la consola de registro. Y vamos y tipo de. Y queremos ver cuál es nuestro tiempo original. Y podemos ver lo que nos devuelve JavaScript es un tipo de cadena. Entonces conocemos nuestros síntomas cadena variable original, y por eso podríamos ejecutar este método ToLowerCase. Pero probablemente te preguntes manera es este método exacto a partir de una ¿cómo lo ves? Will, es muy, muy sencillo. Vayamos a abrir un navegador. Por lo que sólo voy a hacer clic derecho en mi Chrome mu llamado Nieto. Y vayamos a la cookie de la consola. Subiremos y subamos la consola. El museo India, para que veas lo que está pasando. Y es muy sencillo. Todo lo que quiero hacer es que quiero consola y hacer, por cierto, es diferente al registro de consola. Nos da lo que queramos hacer caliente. Pero en formato JSON como, en formato arbolado. Y por supuesto lo que quiero hacer es que quiero obtener el objeto string JavaScript. Porque recuerden sabemos que nuestra frase original es una cuerda. Entonces sabemos que es de tipo string. Y si abrimos cuerda, y de nuevo no es mucho aquí. Tenemos ligados, tenemos nombre. Pero lo que queremos ver es este prototipo porque hereda muchos métodos y propiedades. Y como es una cadena, es prototipo como una cadena aquí, obtenemos muchos métodos y propiedades del tipo de cadena. Y si nos
desplazamos hacia abajo, deberíamos encontrar a minúsculas. Y ahí está. Y literalmente lo hemos encontrado, ya
sabes, exactamente de dónde viene. Haciendo parece que no hemos terminado del todo. Entonces volvamos a saltar de nuevo a la conferencia. Hemos visto que proviene de un objeto de cadena y un caso alto, es bastante intuitivo que solo funciona con cuerdas. Si intentas analizar en otros tipos hijas, como null indefined, incluso un número que JavaScript parser wall te arroja un error. De hecho, obtendrás un error de tipo. Así que solo asegúrate de tomar el tipo antes de analizarlo en esta función. De lo contrario tu aplicación se estrellará. ¿ De qué estoy hablando? Bueno, déjame saltar una vez más a la consola y conduce a codificar juntos sólo para ver esto en acción. Una última cosa antes de terminar esto, recuerda que decimos que sólo se puede usar en un tipo de cuerda. Entonces vamos a desplazarnos hacia arriba con en realidad recién terminado será recogiendo exactamente donde lo dejamos. Está claro la consola. Entonces, ¿qué significa esto? Bueno, esto significa que si tenemos un número, digamos sólo 85 e intentamos acceder a minúsculas. ¿ Qué crees que va a pasar? Bueno, obtenemos un error de sintaxis, token
inválido o inesperado. No podemos llamarlo método ToLowerCase en un número. Tiene sentido. ¿ Y qué tal una especie de matriz? Entonces digamos que tenemos una moraine solo con un artículo en él llamado BU. Y tratamos de acceder a minúsculas como económico. No, obtenemos un error de tipo. No podemos llamar a esta función en eso. ¿ Y qué pasa con indefinido? Bueno, si intentamos acceder de nuevo a minúsculas en indefinido, nuevo, no va a funcionar. ¿ Y qué tal ahora si intentamos nula? Creo que eso va a funcionar. Entonces este es el punto que estoy tratando de hacer. Sólo podemos acceder al método ToLowerCase en cadenas. Espero que te estés divirtiendo y discutiendo mucho. Por lo que esto es solo un poco más de detalle en el método
ToLowerCase que podría no haber conocido previamente. Llavero mantente motivado y nos vemos en la próxima conferencia.
15. Método .from(): introducción: Espero que te estés divirtiendo mucho en este curso. Por mucho que yo lo soy. Me encanta juntar estas cosas y me fui enseñando lo que tipo de aprendí a lo largo de muchos, muchos años. De todos modos, lo siguiente que quería que discutiéramos muy brevemente es otra cama muy útil, una función un poco avanzada en JavaScript llamada array de. ¿ Y qué hace este método? De lo que el nivel muy, muy, muy básico, todo lo que hace es crear una matriz, pero no a partir de una matriz, porque serían inútiles. Crea una matriz a partir de dos tipos de cosas diferentes. Crea una matriz a partir de un objeto similar a una matriz. Y todo lo que quiero decir con eso es que es un objeto que tiene una propiedad de longitud. Y dos, puedes crear una matriz a partir de un objeto iterable. Gracias Doc met pulsate. De todos modos, esto no es importante ahora mismo. Lo importante a entender es que la matriz del método toma algo y lo convierte en una matriz. Entonces, ¿por qué queremos hacer eso? Will, si podemos crearlo en algo así como una matriz, podemos tener ciertos métodos y propiedades disponibles para nosotros que podemos usar en ese objeto recién creado, toda
una matriz creada por Tetraedro. Así que decir un poco haciendo santos. No te preocupes si no es lo primero que quiero que entiendas cuál es la matriz de método, que está en la matriz misma. A lo que me refiero con este límite, salta a la consola y muéstrale rápidamente. Tengo mi consola abierta. Sí, y lo único que quiero mostrarte es una manera de encontrar esto desde apareado. Y como mencioné, está en el objeto array dentro de JavaScript mismo. ¿ Cómo puedo demostrarlo? Bueno, primero, vamos a consolar la matriz. Y si hacemos eso como la matriz que nos proporciona JavaScript, abrimos eso. Nos desplazamos hacia abajo. Y ahí está. El, es el de lo hace bastante simple, ¿verdad? Entonces ahí vamos. Sabemos que la matriz del método como se encuentra en el objeto array de
JavaScript tiene sentido, ¿verdad? Pero aún no hemos terminado. Déjame saltar a la conferencia y
hablemos de este método con un poco más de detalle.
16. Array.from() : ¿Cómo funciona?: Entonces, ¿de qué se trata exactamente el subarray del método? Vamos muy intuitivamente, y básicamente todo lo que hace es crear una matriz a partir de un objeto similar a una matriz en un objeto iterable. Pero no voy a meterme en eso ahora. Del mismo modo, al igual que el método ToLowerCase, la matriz de la metodología es una función JavaScript pura. De hecho, se introdujo como parte de ES6. Es6, por cierto, fue sólo una revisión importante y actualización a ES cinco. Y probablemente no te estés rascando la cabeza, pero quizá ya hayas olvidado de dónde viene. Y acabamos de ver que proviene del objeto array en sí. Pero estas son todas las cosas que ya sabes. Entonces, ¿cómo funciona? Bueno, es muy fácil acceder a este método. Empezamos accediendo al objeto array de JavaScript dentro de xi's, el método from. Y el método front toma un argumento y su argumento es un objeto similar a una matriz. Pero antes de hablar más de lo que hace, pasa al editor de codificación y conduce a ver cómo funciona en acción. Antes de empezar a entrar en más detalle en el array desde el método, solo
quiero que entiendas cómo funciona. Entonces recuerda lo que dije. Tiene que ser un objeto similar a una matriz en objeto
iterable para que podamos usar esta matriz desde el método. Entonces, ¿cómo funciona? Bueno, definamos un objeto similar a una matriz. Y esto simplemente sea muy, muy sencillo aquí. ¿Sólo digamos qué? De acuerdo, entonces sabemos que es una cuerda en este caso. ¿ Cómo le gusta a la matriz de Luke? Bueno, en primer lugar, solo quiero decir Aflac Corker, open cooker solo nos permite ejecutar JavaScript en tiempo real dentro de nuestro editor de texto. Por lo que no tenemos que seguir saltando al navegador. Es sólo que es mucho más rápido de tipo de subir tu código. Es realmente útil. De todos modos. ¿ Cómo funciona? Bueno, vamos a la consola registrar algo y vamos a acceder al objeto array de JavaScript en nombre. Sabemos que hay un método llamado desde. Y queremos pasar en nuestra matriz como y como puedes ver, toma nuestro objeto similar a una matriz valen la pena y lo convierte en una matriz, cual es realmente, realmente impresionante. Y puedes ver aquí, nuestra matriz solo consiste en cada litro en esa cuerda. Y es todo, está hecho. El top volver a la conferencia. Enfria y hacer cosas. Miramos un ejemplo muy sencillo. Pero sólo ten en cuenta que ¿qué significa este objeto parecido a una matriz? Simplemente significa que el objeto necesita tener una propiedad de longitud y elementos indexados. ¿ A qué me refiero con esto? Bueno, volvamos a subir a la consola otra vez en esto sólo mira exactamente de lo que estoy hablando. Fluoruro. Entonces aquí hemos mirado este ejemplo, pero ¿cómo y por qué funciona? Recuerde, el método de matriz de no funcionará en todo. De hecho, como la descripción un poco de temporada, como hablamos, sólo funciona en array como objetos. Y lo que eso significa es que en el objeto necesita tener una propiedad de longitud y elementos de índice D4. ¿ A qué me refiero? Bueno, tiene una consola. Entonces déjame hacer clic derecho en Google Chrome aquí. Nueva Incognito IMRT. Déjame ir a una consola. Y tipo de hacer escenas. ¿Puedes ver eso? Y recuerda lo que dijimos. Sólo definamos perro o objeto similar a una matriz como valor. Y sabemos que la matriz del método funciona en nosotros. Acabamos de ver un ejemplo de eso. Sería y Bueno, para mostrarte, vamos a consolar hacer esta matriz como objeto y quiero mirar su protón. Y si cargamos esto, sabemos que es de tipo string. Y si abrimos el método de cadena, lo que es impresionante es que tenemos esta propiedad de enlace. Eso es lo que quiero decir con un ID de objeto similar a una matriz tiene que tener esta propiedad de enlace para que la matriz de hace que funcione. Ahí vas. La esperanza está haciendo escenas. Volvamos a saltar de nuevo a la conferencia o las probabilidades. Espero que esté empezando a tener más sentido para ti. Y recuerda lo que dije antes que sí se necesita más de un argumento. En realidad, puede tomar hasta tres argumentos, puede tomar un mapa, y puede tomar lo que quieras que esto se refiera. Y ten en cuenta que estos argumentos son opcionales. No tienes que ponerlos en esta función para nada. Y mucha gente realmente combina el, este argumento opcional en esa función de mapa en sí. Por lo que muchas veces solo verás dos argumentos en la matriz desde el método. En fin, no quiero entrar en demasiados detalles sobre esto. Te puedo mostrar rápidamente de qué se trata el mapa. Entonces en la parte superior sobre al editor de texto otra vez. Y echemos un vistazo a cómo funcionaría eso. último, pero no menos importante, veamos cómo funciona el segundo argumento a la matriz desde la función. ¿ De qué se trata todo? Bueno, eliminemos todo lo que teníamos en nuestra pantalla previamente. Y esto definir una matriz es sólo decir que nuestra matriz tiene un perro y lo adivinaste. Un gato. Freeway, simple. Ahora lo que quiero hacer es definir una función de manejador. Quiero llevar todo dentro de esta matriz y quiero cerrar sesión algo en
la pantalla para que se use la palabra clave de función de JavaScript. Eso es genial. Se manejador, podemos llamarlo como queramos. La mano se va a llevar un animal en cada caso. Y todo lo que quiero hacer es que solo quiero devolver una declaración y voy a estar usando literales de plantilla aquí. Y lo que voy a decir es que voy a decir un animal caminando, caminando. Entonces ahí lo tienes. Eso no es nada demasiado profundo. Se trata de una función muy, muy sencilla. Ahora, ¿qué quiero hacer? Bueno, vamos a la consola log existir la matriz del método. Sabemos que queremos acceder a este tipo de array. Una mano tiene, se puede ver aquí, si sólo la guardamos con un argumento, literalmente no tiene sentido que lo hagamos porque ya es una matriz. Entonces no tiene sentido crear una matriz a partir de una matriz. Pero es el segundo argumento ese mapa que quiero que entendamos. Y el segundo argumento es lo que hemos definido como esta función de manejador. Y ahí vamos. Regresó a nosotros. En la pantalla se encuentra un perro paseando y un cacareado caminando. Esta es una nueva matriz. Ahora, se ha creado una matriz totalmente nueva, y se toma, cada elemento de la matriz original cuesta a través de una función de mapa, y nos devuelve una nueva matriz. ¿ Eso tiene sentido? Y de eso se trata todo. Espero que te estés divirtiendo. Y creo que a estas alturas como que tienes una buena sensación intuitiva. Sigue las obras. Tan bien hecho. Estoy muy, muy impresionado. Espero que se esté muriendo por hacer un poco más escenas. Y no te preocupes, a medida que te encuentras con estos en tu carrera de codificación, empezarás a usarlo cada vez más y más y se volverá mucho más intuitivo. Solo quería que supieras sobre el array de MRD porque es un, puede ser extremadamente útil, lo que me lleva al siguiente tema. Y es por eso que necesitamos saber sobre el array de MTD. ¿ Por qué siquiera lo discutí en este curso? A veces vamos a querer trabajar con métodos que están disponibles desde el objeto array. Por ejemplo, el para cada método sólo está disponible en el objeto array. Y para poder acceder a ese método, veces
tenemos que convertir lo que trabajamos dentro de nuestro código en una matriz. ¿ Eso tiene sentido? Y por encima de esto, la matriz de método es extremadamente útil. Te permite hacer muchas otras cosas como clonar matrices,
eliminar duplicados, incluso llenar una matriz,
etcétera, etcétera, etcétera, que son muchas cosas que puedes hacer. Y lo más definitivamente vas a estar usando menos cuando trabajes con colecciones DOM. Y me trae de vuelta a eso primero, a
veces queremos usar métodos que solo están disponibles en el objeto array. Entonces cuando estás trabajando con una colección DOM, por ejemplo, y HTMLCollection. A veces necesitamos convertir eso en un objeto array para acceder a los métodos que queremos. Entonces supongo que lo que estoy tratando de decir es que resulta útil cuando te encuentras y trabajas con un objeto similar a una matriz. Está proporcionando un poco más de claridad sobre lo que hace este método. No te preocupes, sólo nos estamos metiendo en ello. Entonces no te asustes si no lo entiendes del todo. Gh, llegará a través del tiempo. Espero que hayas disfrutado de este cool hasta ahora Huike, manteniéndote motivado y te veré en la próxima conferencia.
17. Método () de indexOf(): introducción: Otra función muy increíble en JavaScript se conoce como este índice de función. ¿ Y qué hace? Bueno a nivel muy básico, eso te dice si un elemento dado se puede encontrar en una matriz o una cadena. El índice de método se sumó a la norma 8ma 262ª en la quinta edición. El, lo que eso significa se dice a Eleusis agregó el tercero de diciembre de 2009. Entonces lo que intento decir es que no tienes que preocuparte por que los navegadores no incorporen este método. Cada navegador de hoy le permitirá utilizar el índice de método. De acuerdo, gran cliente, los navegadores antiguos pueden aceptar un perro. ¿ Cómo se ve cuando empezamos a usarlo? Will en primer lugar, se llama al índice de método escribiendo sus palabras, es palabras clave índice off. Ese Dean toma dos argumentos. El primer argumento es el ítem de búsqueda y aka el ítem que desea buscar. Y el segundo argumento es opcional. Es el punto de partida de tu búsqueda. No te preocupes, vamos a estar viendo ejemplos de esto en breve. Entonces el ego, eso es un poco lo que parece, de alto nivel. Y como mencioné, vamos a estar viendo ejemplos. Pero antes de que lo hagamos, eso es algo muy importante que debes entender. Y ese es este método IndexOf solo existe para dos tipos hijas en JavaScript. El primer tipo de hija que existe al borrar. ¿ Qué es una matriz? En JavaScript? Y array es solo una sola variable que se utiliza para almacenar diferentes elementos y tener en cuenta, la matriz JavaScript es un objeto global, lo que significa que puedes acceder a él desde la forma que quieras. Pero basta de hablar. En realidad quiero saltar a nuestro editor de textos y
quiero empezar a codificar un aumento contigo. Y quiero empezar a mirar este índice de método, específicamente en matrices. Saltemos a la consola y todavía está jugando.
18. Uso de indexOf() con matrices: De acuerdo, entonces aquí estamos. Y quiero que empecemos a codificar juntos, pero quiero que vayamos paso a paso,
despacio, poco a poco atrapar a un mono. El primero que mencionamos es que este índice de existe en tipos de $2 en JavaScript. Y el primer auto top que estamos viendo es el array. Entonces déjame demostrártelo antes de ir más lejos en nuestra codificación, fui al registro de consola. Todo lo que es solo consola hacer fuera el objeto array. Si abrimos esto y miramos su prototipo es un índice de método, ellos, vamos, ¿nos pueden ver? Entonces ahora acabo de probarle que sí existe en la matriz, ese objeto de matriz global en JavaScript. Es la forma en que viene. De acuerdo, así que ahora vamos a nuestra codificación. Se, está arriba. Acabo de tener un archivo app.js en blanco abierto aquí, y estoy dirigiendo el caucus de coca. Muy útil por cierto, varía. Hugely útil. Sigo diciéndolo, pero es muy bueno. De acuerdo, lo primero que quiero que tipo de llegar a través de ti es uno como una matriz, voluntad 50. Vamos a crear una matriz y lo usamos por los corchetes. Sí, y sólo quiero decir, soy el primer elemento. El segundo elemento. Y lo adivinaste, yo soy el tercer elemento, C. Aquí vamos, hemos creado una matriz. Utilizamos esos corchetes. ¿ Y cómo accedemos a matrices? Lo primero que quiero mencionar es que las matrices de JavaScript o Sarah. ¿ A qué me refiero con eso? Solo quiero decir que el primer elemento de una matriz siempre es índice en 0. Y el último elemento siempre se puede encontrar en el índice que es igual al valor de
la propiedad de longitud de la matriz minús1. Déjame mostrarte a lo que me refiero. Entonces vamos a la consola log nuestro array. Y recuerda cómo dije que es 0 indexado x es el primer elemento de la matriz. Escribimos 0. Yo soy el primer elemento. Y por supuesto que no hicimos eso para los siguientes artículos, ¿verdad? Podemos ir 012 en el primero y el segundo y el tercer elemento. ¿Tiene sentido? Y lo otro que quiero mencionar es que cada matriz tiene una propiedad de longitud. Entonces si la consola desconecta nuestra matriz y accedemos a esta propiedad llamada links, sabemos que nuestra matriz tiene tres ítems. Por lo que un consejo muy útil a la hora de codificar. Y hasta voy a entrar aquí, siempre
podemos Xs el último artículo en NRA así. Y esto es muy, muy útil. Entonces por favor recuerda esto para teclear la solución. Basta pensar en qué es lo que acabamos de hacer. Sabemos que la longitud de la matriz es de tres. Y si miras su registro de consola justo arriba, sabemos que hemos accedido al último elemento, yo usando array y el índice dos. Y recuerda, las matrices JavaScript siempre están indexadas a 0. Entonces sabemos que el último elemento de la matriz es esa longitud de matriz, que es tres menos uno, lo que nos lleva a dos. Entonces todo lo que trato de decir es acceder al último elemento en array. Todo lo que tenemos que hacer es acceder a nuestro array. Y ahora si no sabes cuál es el enlace,
es muy útil acceder a la propiedad link, que en este caso es indefinida porque no hay un cuarto elemento en la matriz. Por lo que siempre minos1. ¿ Tiene sentido? Eso espero. Y los herbicidas obtienen una sensación más intuitiva sobre cómo funcionan las matrices. La otra cosa que quiero mencionar, los líderes logísticos. A veces los hombres odian borrar cosas. Hemos pasado tanto tiempo para tratar de conseguir puntos a través y acabo de borrar, es un poco triste, hombre arriba el flúor, pero de todos modos, vamos a crear una nueva matriz, 123. Otra cosa que quiero simplemente mencionar con matrices que son bastante peculiares es que no se puede usar la notación de puntos para acceder a los elementos. Este es un punto importante. Entonces, por ejemplo, registramos en consola nuestra matriz y tratamos de obtener el primer elemento. No nos va a dejar hacerlo. En realidad obtenemos un error de sintaxis. Entonces sólo ten eso en cuenta. Y no es, ya sabes, hay nada especial en esto. Infectar. Las propiedades Javascript que comienzan con un dígito nunca pueden ser referenciadas con documentación siempre deben existir en el uso de notación de corchetes. El matiz de JavaScript, no te preocupes. Ok, pero probablemente te estés preguntando cliente, no
quiero aprender sobre matrices. Estamos en el tema de índice de n. eres un 100% correcto. Solo quería que te familiarizaras con las matrices antes de saltar a ella. ¿ De acuerdo? El punto que quiero hacer con las caídas de índice es que devuelve el primer índice en el que se puede encontrar
un elemento dado en la matriz o no existe en la matriz. Se devuelve Minus1. ¿ A qué me refiero? Vamos a dejar definir una matriz llamada animales. Y tiene un warthogs que tiene una jirafa. Y dice que consiguió un búfalo. Y dice que tiene una línea. ¿ Cómo funciona? Bueno, veamos. Vamos a registrar la consola para que realmente podamos ver el resultado de lo que estamos produciendo. Lo primero con el fin de acceder a nuestro índice de es acceder a una matriz. Y la matriz al que vamos a acceder es nuestra matriz de animales. Queremos ahora acceder al índice de método que ha incorporado en todas las matrices. Y busquemos platicar. ¿ Qué esperarías ver? ¿ Dónde se encuentra warthogs? Así es, está ubicado en el índice 0. Recuerda que las matrices JavaScript siempre están indexadas en Bass Sarah. Entonces si tratamos de encontrar warthogs, podemos ver devuelto a nosotros es 0. Eso tiene mucho sentido. Y sólo voy a duplicar este código. Ahora busquemos Buffalo. ¿ Cuál crees que será el número de índice que será? Escribamos nuestro número esperado para ver si eso es correcto. Ahora lo que quiero hacer es, busquemos perro. ¿ Qué crees que va a pasar con el perro? Bueno, como mencioné, si no se encuentra, se nos devuelve uno
negativo como mixins. Entonces sólo recuerda, negativo uno significa que no se encuentra. Y lo último que quiero mencionar justo antes de seguir adelante es que el índice de método compara elementos en tu matriz usando estricta igualdad. En otras palabras, utilizando el mismo método utilizado por el signo triple igual. Sólo recuerda eso. De acuerdo, Clyde, Todo esto está bien y bien, pero sólo estamos usando un argumento en este índice de array. Quiero usar ambos y quiero entenderlo con
más detalle mientras es bueno escuchar a mi compañero estudiante. Eliminemos todas estas consolas. Ahora busquemos a este animal destrozado por la guerra. Pero digamos nuestro índice de método. Solo queremos empezar en el segundo ítem de nuestra matriz,
a desde el índice uno en adelante. ¿ Qué crees que pasará entonces? Pasemos a nuestro segundo argumento en este método. Y digamos que queríamos empezar desde el segundo elemento de la matriz. Bueno, claro que no existe porque sabemos que estamos mirando desde jirafa en adelante y no hay tirón de pared. Esta mirada a otro ejemplo que ahora se mira a Mozilla. Y digamos nuestro índice de acoplado para buscar de digamos, el tercer ítem en la matriz número dos. Y en este caso, sí devuelve nuestro número de índice. Entonces es muy, muy cool. Y sabemos que sí existe. Esta es una especie de cómo funciona un segundo argumento. Zai Kai, tiene sentido. Espero así que hayamos trabajado mucho con matrices, pero ahora voy a saltar de nuevo al canal tardío uno es mirar el segundo tipo hija, donde podemos empezar a usar este índice de método.
19. Uso de indexOf() con strings: Me estoy divirtiendo toneladas. Espero que hayas aprendido mucho. Sólo volvamos a donde empezamos. Recuerda dijimos que sólo existe en dos tipos de hijas. Este índice de método, el top de primer orden que hemos visto como matrices. ¿ Qué opinas los pañales de segundo orden? Bueno, se desenrolla, por favor. Por lo que esta diapositiva que estás viendo aquí es una muy importante, te
da una visión general de muy alto nivel de este índice de método. Hemos mirado un montón de ejemplos con matrices. Quiero terminar esta conferencia ahora viendo ejemplos con nosotros trabajando con cuerdas, empiezan a ver cómo funciona eso. Va a ser muy divertido. Confía en mí. Oye, guau, esto es realmente genial. Acabamos de hacer matrices, pero ahora quiero que nos pongamos a cuerdas. ¿ Cómo funciona eso? Y es realmente emocionante. Ya verás que no. Entonces, saltemos a ello. Cou, bien, ¿por dónde empezamos? Lo primero que quiero mostrarles aquí es que si conseguimos nuestra consola, la consola, la matriz, es simplemente en realidad despejar una consola y hagamos lo mismo con las fortalezas. Bastante sencillo. Hemos sido una cuerda. Nos fijamos en su prototipo. Nos desplazamos hacia abajo y ellos, mis queridos estudiantes es índice de esto es una segunda charla hija y JavaScript que nos da acceso a este impresionante método útil. Entonces vas, solo quería demostrarte que se encuentra en este tipo punteado también. Si volvemos a nuestro editor de codificación, LETE punto mirando esto en acción. Entonces borremos nuestra Eurasia. Hemos mirado matrices. Ahora es crea, no
sé, una frase. Y es sólo decir, Hola, mundo. El universo. A menudo sé qué le pasa a mi tema hoy. bienvenida. El día de hoy voy a sentenciar, sabemos que esto es de tipo string. ¿Cómo sabemos eso? Todo su consola log tipo de sentencia. Y es bastante obvio que sabemos que es una cuerda. Porque sabemos que es una cuerda. Sabemos que tenemos acceso a este índice de método. Entonces definamos una variable llamada AIM, eso es exceso de oración al. Y busquemos algo. Busquemos poco palabra da la bienvenida. Veamos como muertes, ¿de qué manera crees que sería? Consola inicia sesión en la pantalla y obtenemos un número 26. ¿ Por qué 26? ¿Será? No está contando juntos. Sabemos que este es el índice 012345678910111213141516 17181920. Veinte uno, veintidós, veintitrés, veinticuatro, veinticinco. Y por supuesto 26 es camino da la bienvenida comienza. Muy, muy útil. Método es definir una constante llamada frase adenoma. De nuevo, y digamos, oye, ¿
estás aprendiendo mucho en este curso? Espero seguir aprendiendo. Empecemos a usar este punto de lista de índices. Obteniendo campo más intuitivo, definamos una nueva variable de JavaScript llamada palabra de búsqueda. Esto es lo que queremos buscar. Y digamos que queremos buscar la palabra aprendizaje. Podemos ver en primer lugar, directamente del murciélago, tenemos dos palabras, ¿
no? Aprendizaje y aprendizaje. Entonces sólo ten eso en cuenta. Definamos una nueva variable llamada primera vez. Y acceda a nuestra constante de oración. Eso es acceder a este índice de método. Y busquemos palabra buscaremos. Vamos a la consola registra primer tiempo de espera. Son ocho, y sabemos que son ocho porque es el octavo personaje desde el principio es esta primera palabra de aprendizaje. Pero ahora, ¿cómo accedemos a la segunda palabra de aprendizaje? ¿Cómo vamos a hacer eso? Déjame darte una pista. Utilizemos el segundo argumento en el método OLS índice. Entonces todo lo que tenemos que hacer es definir una nueva variable llamada segunda vez. Salgamos de nuestra sentencia. Apenas se dio cuenta de una sentencia impecable incorrectamente. Entonces vamos a exceso de índice fuera. Lo que queremos hacer ahora es que queremos buscar toda la palabra de búsqueda. No te preocupes. Esta vez, queremos utilizar el punto de partida. ¿ Y por dónde queremos empezar? Empecemos el, se funda primer ítem, que es la primera vez, más uno. Entonces ahora sabemos que va a buscar a través de nuestro array, pero solo comenzando después de haber pasado la primera palabra de aprendizaje. Esperanza que eso tenga sentido. Si consolamos cerramos esta sesión, llegamos al 44, que es exactamente lo que esperaríamos. Usar probabilidades de índice de esta manera puede ser muy útil en tu código y puedes hacer muchas cosas con él. No lo sé. Vamos a darle un ejemplo. Definamos una solución cool variable uno, usemos literales de plantilla y digamos el índice de la primera. Y usaremos la palabra de búsqueda variable. Palabra desde el principio es. Y va a ir la primera vez. Y si regresamos esto a la pantalla, literalmente
nos sacamos console.log. El índice de la primera Palabra de aprendizaje desde el principio es de 80. ¿ Qué tan impresionante es esto? Combinamos muchas cosas que combinamos literales de plantilla, combinando el signo dólar llaves para incorporar expresiones y variables con en nuestra plantilla literal. Es muy, muy cool y te va a ayudar mucho en el camino. Por supuesto, podemos hacer lo mismo para solución a solución a. ¿ Qué acabamos de copiar esto en lugar de hacerlo todo de nuevo. Sabemos que esta es la segunda búsqueda donde desde el principio no es la primera vez, la segunda vez. Y si regresamos eso, obtenemos exactamente lo mismo. Pero ahora estamos haciendo referencia a la segunda palabra de aprendizaje. Porque sé que a veces nos dejamos llevar y quizá voy un poco más avanzado de lo que necesitas saber ahora mismo. Pero confía en mí, esto te ayudará en tu codificación Corea. Y quiero que te conviertas en un maestro en todas las cosas. Espero que sea hora de tener sentido. La otra cosa que quiero mostrarles es que eliminemos todo. Quiero mostrarles que la ruta de índice es sensible a mayúsculas y minúsculas. Entonces, ¿a qué me refiero? Will, si tenemos una palabra y La palabra es violada perro. Si ahora consolamos log y accedemos a nuestra cadena de palabras, accedemos al método de índice y buscamos perro. Sabemos que existe. De nuevo, esto tendría sentido, pero ¿qué pasa si hiciéramos lo mismo? Pero sí, fuimos a buscar la palabra rojo. Como se puede ver, es sensible a mayúsculas y minúsculas. Habíamos devuelto uno negativo, AKA no existe. Si cambiamos la r pequeña a R grande, sí existe. Es infantum, el primer elemento de nuestra matriz. Espero que tu aprendizaje a tiempo. Lo último que quiero atravesar es que 0 no evalúa a verdadero y negativo uno no evalúa a falso. Recuerda si tenemos una r pequeña, es una negativa que no coacciona a falso. Es una especie de matiz raro cuando se trata de este método. Entonces, ¿cómo te demuestro esto? Me permitirá demostrárselo mediante el uso de JavaScripts if statement. Y lo que quiero transmitir aquí, quiero decir si es una palabra,
correcto, contiene, digamos, tasa. Si denso evalúa como falso, entonces ejecutemos este código. Digamos que registro de consola. Este es el inicio correcto. Inicio. De lo contrario registro de consola, este es el inicio incorrecto. Y ahora verás un problema. Ya verás que por la cloaca, lo que se nos devuelve es la respuesta equivocada. Sabemos que el pequeño r no debe existir en nuestra cuerda porque sólo tiene el capital en nuestro radar. Entonces, ¿por qué estamos golpeando el segundo inicio de sesión de consola en nuestra declaración if? El motivo es, es que el negativo no evalúa como falso. Se caen, vamos a golpear este inicio y es la respuesta equivocada. Por lo tanto, el punto que estoy tratando de hacer es que al verificar si existe una cadena específica dentro de otra cadena, la forma correcta es usar minús1. Por ejemplo, si sustituimos falso por minús1 mentiras no está funcionando. Minus1 d vamos, obtenemos la respuesta correcta esta vez. Puntos muy, muy importantes que acabo de compartir con ustedes. Por favor, ten eso en cuenta. Entonces z lo tienes. Acabamos de usar índice sobre los rayos. Acabamos de usarlo con cuerdas. Hemos discutido varias formas en las que puedes usar a. Sabemos que como k escenas que tienen ventana que no
se puede tipo de negativa coercitiva a falsa. Y estos son temas bastante avanzados. Entonces no lo den por sentado. Celebra los pequeños triunfos. De todas formas, sigamos adelante y nos vemos en la próxima conferencia.
CM Code_Zone, !false | funny, because its true
