Home-theater-designers
Los desarrolladores web de todos los niveles, desde programadores novatos hasta expertos en codificación, se dan cuenta de la importancia de JavaScript en el desarrollo de sitios web modernos. JavaScript es tan dominante que es una habilidad esencial saber si va a crear aplicaciones web.
Uno de los bloques de construcción más poderosos integrados en el lenguaje JavaScript son las matrices. Las matrices se encuentran comúnmente en muchos lenguajes de programación y son útiles para almacenar datos.
JavaScript también incluye funciones útiles conocidas como métodos de matriz. Aquí hay quince que debe examinar de cerca para desarrollar sus habilidades como desarrollador.
¿Qué son los métodos de matriz?
Métodos de matriz son funciones integradas en JavaScript que puede aplicar a sus matrices. Cada método tiene una función única que realiza un cambio o cálculo en su matriz, lo que le ahorra la necesidad de codificar funciones comunes desde cero.
Los métodos de matriz en JavaScript se ejecutan usando una notación de puntos adjunta a su variable de matriz. Dado que son solo funciones de JavaScript, siempre terminan entre paréntesis, que pueden contener argumentos opcionales. Aquí hay un método adjunto a una matriz simple llamada myArray .
|_+_| |_+_|
Este código aplicaría un método llamado pop a la matriz.
Matriz de ejemplo
Para cada ejemplo, use una matriz de muestra que llamaremos myArray , para realizar los métodos. Siéntase libre de abrir su consola y codificar.
|_+_|
Estos ejemplos supondrán que conoce la base de qué es JavaScript y cómo funciona . Si no lo hace, está bien, todos estamos aquí para aprender y crecer.
¡Profundice en estos quince métodos de matriz poderosos!
1. Array.push ()
Que hace: empujar() toma su matriz y agrega uno o más elementos al final de la matriz, luego devuelve la nueva longitud de la matriz. Este método modificará su matriz existente.
Agregue el número 20 a la matriz ejecutando empujar() , usando 20 como argumento.
|_+_|Compruebe si funcionó:
|_+_| |_+_|Ejecutando el empujar() El método en myArray agregó el valor dado en el argumento a la matriz. En este caso, 20. Cuando marque myArray en la consola, verá que el valor ahora se agrega al final de la matriz.
2. Array.concat ()
Que hace: concat () puede fusionar dos o más matrices en una nueva matriz. No modifica las matrices existentes, sino que crea una nueva.
Llevar myArray y fusionar una matriz llamada newArray en ello.
|_+_| |_+_| |_+_|Este método funciona de maravilla cuando se trata de múltiples matrices o valores que necesita combinar, todo en un paso bastante simple al usar variables.
3. Array.join ()
Que hace: entrar() toma una matriz y concatena el contenido de la matriz, separados por una coma. El resultado se coloca en una cadena. Puede especificar un separador si desea utilizar una alternativa a la coma.
Eche un vistazo a cómo funciona esto con myArray. Primero usando el método predeterminado sin argumento separador, que usará una coma.
|_+_| |_+_|JavaScript generará una cadena, con cada valor de la matriz separado por una coma. Puede usar un argumento en la función para cambiar el separador. Obsérvelo con dos argumentos: un solo espacio y una cadena.
|_+_| |_+_|El primer ejemplo es un espacio, que forma una cadena que se puede leer fácilmente.
El segundo ejemplo usa (' y ') , y hay dos cosas que debe saber aquí.
Primero, usamos la palabra 'y' para separar los valores. En segundo lugar, hay un espacio a ambos lados de la palabra 'y'. Esto es algo importante a tener en cuenta al usar entrar() . JavaScript lee los argumentos literalmente; por lo tanto, si se omite este espacio, todo se agrupará (es decir, '2and4and5 ...', etc.) ¡No es una salida muy legible!
4. Array.forEach ()
Que hace: para cada() (distingue entre mayúsculas y minúsculas) realiza una función en cada elemento de su matriz. Esta función es cualquier función que cree, similar a usar un bucle 'for' para aplicar una función a una matriz, pero con mucho menos trabajo en el código.
Hay un poco más de para cada() ; mire la sintaxis, luego realice una función simple para demostrar.
|_+_|Estamos usando myArray , para cada() se aplica con la notación de puntos. Coloca la función que desea usar dentro del paréntesis del argumento, que es función (artículo) en el ejemplo.
Echa un vistazo a función (artículo) . Esta es la función que se ejecuta dentro de forEach () y tiene su propio argumento. Estamos llamando al argumento artículo . Hay dos cosas que debe saber sobre este argumento:
- Cuando forEach () recorre su matriz, aplica el código a este argumento. Piense en ello como una variable temporal que contiene el elemento actual.
- Eliges el nombre del argumento, se puede nombrar como quieras. Por lo general, esto se llamaría algo que lo haga más fácil de entender, como 'elemento' o 'elemento'.
Con esas dos cosas en mente, consulte este sencillo ejemplo. Agregue 15 a cada valor y haga que la consola muestre el resultado.
|_+_|Estamos usando artículo en este ejemplo como la variable, por lo que la función se escribe para sumar 15 a cada valor a través de artículo . Luego, la consola imprime los resultados. Así es como se ve en una consola de Google Chrome.
El resultado son todos los números de la matriz, ¡pero con 15 agregados!
5. Array.map()
Que hace: mapa() realiza una función en cada elemento de su matriz y coloca el resultado en una nueva matriz.
Ejecutar una función en cada elemento suena como forEach (). La diferencia aqui es mapa() crea una nueva matriz cuando se ejecuta. forEach () no crea una nueva matriz automáticamente, tendría que codificar una función específica para hacerlo.
Use map () para duplicar el valor de cada elemento en myArray y colóquelos en una nueva matriz. Verás lo mismo función (artículo) sintaxis para un poco más de práctica.
|_+_| |_+_|Verifique los resultados en la consola.
|_+_| |_+_|myArray no ha cambiado:
|_+_| |_+_|6. Array.unshift ()
Qué hace: similar a cómo funciona el método push (), el unshift () El método toma su matriz y agrega uno o más elementos al inicio de la matriz en lugar del final, y devuelve la nueva longitud de la matriz. Este método modificará su matriz existente.
|_+_|Al registrar la matriz en la consola, debería ver el número 0 al comienzo de la matriz.
|_+_| |_+_|7. Array.sort ()
Qué hace: La clasificación es una de las operaciones más comunes que se realizan en una matriz y es muy útil. JavaScript clasificar() El método de matriz se puede utilizar para ordenar una matriz de números o incluso cadenas con una sola línea de código. Esta operación está en su lugar y devuelve la matriz ordenada modificando la matriz inicial. Tome un conjunto diferente de números para myArray esta vez.
|_+_|Dado que la clasificación se realiza en su lugar, no es necesario declarar una variable separada para la matriz ordenada.
|_+_| |_+_|De forma predeterminada, la matriz se ordena en orden ascendente, pero opcionalmente puede pasar una función personalizada al clasificar() método para ordenar la matriz de la manera deseada. En este caso, pasé una costumbre función de flecha para ordenar la matriz numéricamente en orden ascendente.
8. Array.reverse ()
Qué hace: como sugiere el nombre, el marcha atrás() El método se utiliza para invertir el orden de los elementos de la matriz. Tenga en cuenta que esto no invierte el contenido de la matriz, sino solo el orden en sí. Aquí hay un ejemplo para comprender mejor este método:
|_+_|Registre la salida en la consola para verificar la operación.
|_+_| |_+_|Como puede ver, el orden de los elementos se ha invertido. Anteriormente, el elemento en el último índice (elemento 14 en el índice 6) ahora es el elemento en el índice cero y así sucesivamente.
9. Array.slice ()
Que hace: rodaja() se utiliza para recuperar una copia superficial de una parte de una matriz. En términos más simples, este método le permite seleccionar elementos específicos de una matriz por su índice. Puede pasar el índice inicial del elemento del que desea recuperar y los elementos y, opcionalmente, también el índice final.
Si no proporciona el índice final, se recuperarán todos los elementos desde el índice inicial hasta el final de la matriz. Este método devuelve una nueva matriz y no modifica la existente.
|_+_|En el código anterior, todos los elementos desde el segundo índice hasta el último índice se recuperan ya que no se pasa el parámetro de índice final. Registre ambos arreglos en la consola.
|_+_| |_+_|Evidentemente, la matriz inicial no es modificada por el método slice () y en su lugar devuelve una nueva matriz que se almacena en el slicedArray variable. Aquí hay un ejemplo en el que el parámetro de índice final también se pasa al rodaja() método.
|_+_| |_+_|10. Array.splice ()
Que hace: empalme() es un método de matriz útil que se utiliza para eliminar o reemplazar elementos en la matriz en su lugar. Al especificar el índice y el número de elementos a eliminar, modifica la matriz.
|_+_|En el ejemplo anterior, el myArray la matriz se empalma del índice 2 y se eliminan 3 elementos de ella. La matriz ahora consta de:
|_+_|Para reemplazar los elementos en lugar de simplemente eliminarlos, puede pasar cualquier cantidad de parámetros opcionales con los elementos que desea reemplazar, como este:
instalar linux en chromebook sin crouton|_+_| |_+_|
11. Array.filter ()
Qué hace: El filtrar() El método es un método de matriz útil que toma una función que contiene una prueba y devuelve una nueva matriz con todos los elementos que pasan esa prueba. Fiel a su nombre, este método se utiliza para filtrar los elementos que necesita de los otros elementos. La filtración se realiza mediante una función que devuelve un valor booleano.
He aquí un ejemplo de filtrar() método utilizado para obtener solo aquellos elementos de la matriz que son divisibles por 2.
|_+_|En el ejemplo anterior, se pasa una función de flecha como parámetro que toma cada número de la matriz original y verifica si es divisible por 2 usando el módulo ( % ) y igualdad ( === ) operador. Así es como se ve la salida:
|_+_|12. Array.reduce ()
Que hace: reducir() es un método de matriz que toma una función reductora y la ejecuta en cada elemento de la matriz para generar un valor único mientras regresa. Toma una función reductora con una variable acumuladora y una variable de elemento actual como parámetros requeridos. El valor del acumulador se recuerda en todas las iteraciones y finalmente se devuelve después de la iteración final.
Un caso de uso popular de este método es calcular la suma de todos los elementos de la matriz. La implementación de esta funcionalidad es la siguiente:
|_+_|Se pasa 0 como segundo parámetro en el ejemplo anterior, que se utiliza como valor inicial de la variable del acumulador. los sumOfNums La variable contendrá el valor de retorno de la reducir() método que se espera que sea la suma de todos los elementos de la matriz.
|_+_| |_+_|13. Array.include ()
Qué hace: buscar un elemento en una matriz para verificar si está presente es una operación que se usa con bastante frecuencia y, por lo tanto, JavaScript tiene un método incorporado para esto en forma de incluye () método de matriz. Así es como puede usarlo:
|_+_|Este método toma un parámetro requerido, el elemento a buscar y un parámetro opcional, el índice de matriz desde el cual comenzar a buscar. Dependiendo de si ese elemento está presente o no, regresará cierto o falso respectivamente. Por tanto, la salida será:
|_+_|14. Array.indexOf ()
Que hace: índice de() El método se utiliza para averiguar el índice en el que se puede encontrar la primera aparición de un elemento especificado en la matriz. Aunque es similar al método includes (), este método devuelve el índice numérico o -1 si el elemento no está presente en la matriz.
|_+_|índice de() El método usa igualdad estricta para verificar si un elemento está presente, lo que significa que el valor, así como el tipo de datos, deben ser los mismos. El segundo parámetro opcional toma el índice desde el que comenzar la búsqueda. Según estos criterios, la salida se verá así:
|_+_|15. Array.fill ()
Qué hace: a menudo, es posible que deba establecer todos los valores de la matriz en un valor estático como 0. En lugar de utilizar un bucle, puede probar el llenar() método para el mismo propósito. Puede llamar a este método en una matriz con 1 parámetro obligatorio: el valor con el que llenar la matriz y 2 parámetros opcionales: el índice inicial y final para completar. Este método modifica la matriz existente.
|_+_|Al registrar la salida en la consola, verá:
|_+_| |_+_|Próximos pasos en su viaje con JavaScript
Las matrices son una parte poderosa del lenguaje JavaScript, por lo que hay tantos métodos incorporados para hacer su vida más fácil como desarrollador. La mejor manera de dominar estos quince métodos es practicar.
A medida que continúe aprendiendo JavaScript, MDN es un gran recurso para obtener documentación detallada. Siéntete cómodo en la consola y luego mejora tus habilidades con los mejores editores de JavaScript para programadores. ¿Listo para construir su sitio web con JavaScript? ¿Por qué no echar un vistazo a algunos marcos que puede considerar?
Cuota Cuota Pío Correo electrónico 6 marcos de JavaScript que vale la pena aprenderExisten muchos marcos de JavaScript para ayudar con el desarrollo. Aquí hay algunos que debe conocer.
Leer siguiente Temas relacionados- Programación
- JavaScript
- Consejos de codificación
Nitin es un ávido desarrollador de software y un estudiante de ingeniería informática que desarrolla aplicaciones web utilizando tecnologías JavaScript. Trabaja como desarrollador web autónomo y le gusta escribir para Linux y Programación en su tiempo libre.
Más de Nitin RanganathSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse