Breaking

Post Top Ad

Your Ad Spot

lunes, 26 de octubre de 2020

Funciones de matriz de JavaScript más útiles

En este tutorial de JavaScript, veremos las funciones de matriz de JavaScript más útiles. Para este tutorial, tomamos el código fuente de los profesionales y lo pusimos todo en un solo depósito. El código fuente de los profesionales sería el JavaScript que impulsa los marcos de JavaScript más populares en la actualidad, como Angular, React, Vue, Mithril y muchos más. Una vez que tenemos todo este código fuente en el mismo archivo, verificamos el número de veces que se utilizó cada función de matriz en el código. Por supuesto, las funciones de matriz de JavaScript que tenían una gran cantidad de llamadas se presentan primero, ya que esto sugeriría que esas funciones particulares son muy útiles para los profesionales. Las funciones de matriz que no se utilizaron con tanta frecuencia se colocan más abajo en la lista. Veamos cuáles llegaron a la parte superior de nuestra lista de funciones de matriz de JavaScript más útiles.


  • 1¿Qué son las matrices de JavaScript?
  • 2Array.prototype.push ()
  • 3Array.prototype.indexOf ()
  • 4Array.prototype.slice ()
  • 5Array.prototype.toString ()
  • 6Array.prototype.filter ()
  • 7Array.prototype.join ()
  • 8Array.prototype.splice ()
  • 9Array.prototype.forEach ()
  • 10Array.prototype.concat ()
  • 11Array.prototype.shift ()
  • 12Array.prototype.unshift ()
  • 13Array.prototype.map ()
  • 14Array.prototype.sort ()
  • 15Array.prototype.pop ()
  • dieciséisArray.prototype.reduce ()
  • 17Array.prototype.some ()
  • 18Array.prototype.lastIndexOf ()
  • 19Array.prototype.reduceRight ()
  • 20Array.prototype.every ()
  • 21Array.prototype.reverse ()

  • 1. ¿Qué son las matrices JavaScript?

    En JavaScript, una matriz representa una colección ordenada de valores. La matriz consta de uno o más elementos, cada uno con una posición numerada dentro de la matriz. Esto también se denomina índice. Cualquier elemento de matriz dado puede contener cualquier tipo ofrecido por el lenguaje JavaScript. En otras palabras, puede mezclar y combinar los distintos tipos dentro de la misma matriz. Al igual que la mayoría de los lenguajes de programación, las matrices en JavaScript están basadas en cero. Esto significa que comienzan en 0 y avanzan desde allí. Las matrices en JavaScript crecen y se encogen como por arte de magia. Es decir, no es necesario que especifique el tamaño de la matriz antes de colocar valores en la matriz. A medida que agrega elementos, la matriz crece dinámicamente para usted. Lo mismo sucede cuando eliminas elementos. Todas las matrices de JavaScript tienen un enlace a Array.prototype que es cómo obtenemos acceso a todas las funciones muy útiles que cubriremos aquí en este tutorial. En el verdadero estilo de JavaScript, estas funciones no solo funcionan en cualquier matriz, sino también en cualquier objeto "similar a una matriz".


    2. Array.prototype.push ()

    array.push (elemento1,…, elementoN)

    Visión de conjunto

    La push()función agrega los argumentos que se le dan, en orden, al final de la matriz. Modifica la matriz directamente, en lugar de crear una nueva matriz.

    ¿Qué push () devuelve

    Cuando realiza una llamada a push(), devuelve el número total de elementos en la matriz, después de que los argumentos proporcionados se hayan agregado al final de la matriz.

    ejemplos de la función array.push ()


    3. Array.prototype.indexOf ()

    array.indexOf (searchElement [, fromIndex = 0])

    Visión de conjunto

    La indexOf()función JavaScript busca en una matriz un elemento que contenga un valor específico y luego devuelve el primer índice que contiene ese valor. Puede proporcionar un índice inicial para la función si lo desea; de lo contrario, la búsqueda comenzará desde el índice 0.

    Qué devuelve indexOf ()

    El índice más bajo que es mayor o igual al inicio de la matriz en la que el elemento es igual al valor dado. Si no se encuentra ninguna coincidencia, la indexOf()función devuelve -1.

    Ejemplos de funciones array.indexOf ()

    El ejemplo anterior es un poco más complicado. Tenemos una gran variedad de enemigos y puede haber varios de un enemigo dado. Al usarlo indexOf(), podemos encontrar todas las instancias de 'Storm Trooper' en nuestra variedad de enemigos. Ejecutar el código nos muestra que hemos encontrado un Storm Trooper en el índice 2 y el índice 5 de nuestra matriz.

    Este ejemplo hace uso de una función personalizada que podemos usar para asegurarnos de que todos nuestros buenos estén contabilizados. Comprobamos si el personaje existe en nuestra colección, y si no, lo añadimos a nuestro lado bueno.


    4. Array.prototype.slice ()

    array.slice ([inicio [, final]])

    Visión de conjunto

    La slice()función de JavaScript toma un argumento de inicio y finalización. Utiliza estos puntos de inicio y finalización para llegar a la matriz y eliminar una cantidad específica de elementos. La posición a la que hace referencia por inicio se incluye en los resultados, pero el final no se incluye. En otras palabras, todos los elementos se devuelven desde el principio hasta el elemento final, pero sin incluirlo. Si no proporciona un valor final, slice()devolverá el resto de la matriz comenzando desde el punto de partida dado. La matriz original se deja intacta.

    Qué rebanada () devuelve

    La slice()función devuelve una nueva matriz que contiene todos los elementos de la matriz original desde el elemento especificado por el punto de inicio proporcionado, y hasta, pero sin incluir, el elemento especificado por el punto final proporcionado.

    ejemplos de la función array.slice ()


    5. Array.prototype.toString ()

    array.toString ()

    La toString()función convierte todos los elementos de una matriz en cadenas y genera una cadena grande como una lista de elementos separados por comas.

    Ejemplos de funciones array.toString ()


    6. Array.prototype.filter ()

    array.filter (devolución de llamada [, thisArg])

    Visión de conjunto

    La filter()función de JavaScript es muy útil para hacer exactamente lo que dice, filtrando una colección de elementos en función de una prueba determinada. Cuando llama a la filter()función, debe pasarle una devolución de llamadaEsta devolución de llamada se ejecuta contra todos los elementos de la matriz. Si esa devolución de llamada da como resultado un truevalor, ese elemento en particular se agrega a una nueva matriz. La matriz original no se modifica.

    Qué filtro () devuelve

    filter() devuelve una nueva matriz que contiene solo los elementos de la matriz original que devolvió verdadero cuando se ejecutó la devolución de llamada proporcionada.

    ejemplos de la función array.filter ()


    7. Array.prototype.join ()

    cadena = matriz.join ([separador = ','])

    Visión de conjunto

    La join()función convierte cada elemento de una matriz en una cadena y luego concatena esas cadenas. Si se proporcionó la cadena de separación, se inserta entre todos los elementos de la cadena final.

    Que devuelve join ()

    La cadena que resulta de convertir cada elemento de la matriz original en una cadena y luego unirlos, con la cadena de separación entre los elementos.

    ejemplos de funciones array.join ()


    8. Array.prototype.splice ()

    array.splice (start, deleteCount [, item1 [, item2 [,…]]])

    Visión de conjunto

    La splice()función elimina cero o más elementos a partir de la ubicación de inicio proporcionada y reemplaza esos elementos con cero o más valores nuevos que se proporcionaron. Los elementos existentes en la matriz se cambian según sea necesario para dejar espacio para cualquier elemento agregado o eliminado. Lo que hay que recordar acerca de la splice()función, es que no modifica la matriz original directamente .

    Devoluciones

    Una matriz que contiene cualquier elemento que pueda haber sido eliminado de la matriz.

    ejemplos de la función array.splice ()


    9. Array.prototype.forEach ()

    array.forEach (devolución de llamada [, thisArg])

    Visión de conjunto

    La forEach()función ejecuta una función proporcionada en cada elemento de la matriz. forEach()no tiene valor de retorno y no devuelve la matriz original. forEach()está relacionado con el map()filter()every(), y some()funciones y, como tales, comparten algunos detalles relacionados. Todos esperan una función de devolución de llamada como primer argumento. El segundo argumento opcional es una forma de especificar el thisvalor de la función de devolución de llamada. Todas estas funciones comprueban la longitud de la matriz antes de hacer un bucle. Si la devolución de llamada proporcionada agrega elementos a la matriz durante su ejecución, esos elementos no se incluyen para el bucle por parte delforEach()También es interesante notar que si la devolución de llamada cambia los valores en la matriz original antes de que se repitan, esos valores cambiados se pasarán durante la ejecución de la devolución de llamada. También puede consultar el tutorial Funciones de orden superior en JavaScript.

    ejemplos de la función array.forEach ()


    10. Array.prototype.concat ()

    var new_array = old_array.concat (valor1 [, valor2 [,… [, valorN]]])

    Visión de conjunto

    concat()es una función que crea una nueva matriz que es el resultado de agregar los argumentos proporcionados a la matriz original. La matriz original se deja intacta y la nueva matriz es la original más los elementos agregados. Si alguno de los argumentos de la concat()función son en sí mismos una matriz, entonces se agregan los elementos de esa matriz proporcionada, en lugar de toda la matriz en sí.

    Devoluciones

    Una nueva matriz, que se crea agregando cada uno de los argumentos proporcionados a la matriz original.

    ejemplos de la función array.concat ()


    11. Array.prototype.shift ()

    array.shift ()

    Visión de conjunto

    La shift()función elimina y devuelve el primer elemento de la matriz original. Todos los elementos restantes en la matriz se desplazan una ranura hacia la izquierda para llenar el agujero creado al eliminar el primer elemento. Si intenta aplicar esta función a una matriz vacía, no hará nada y simplemente regresará undefinedLa shift()función no crea una nueva matriz, modifica la matriz original directamente.

    Devoluciones

    shift() devuelve el primer elemento de la matriz original.

    ejemplos de la función array.shift ()


    12. Array.prototype.unshift ()

    array.unshift ([elemento1 [,… [, elementoN]]])

    Visión de conjunto

    Un opuesto directo a la shift()función que acabamos de discutir es la unshift()función. unshift()inserta cualquier argumento que le pase al principio de la matriz. Todos los elementos existentes deben desplazarse hacia la derecha para dejar espacio para los nuevos elementos. Cada argumento que se pasa a unshift()se agrega en orden a partir del índice 0. Además, unshift()se modifica la matriz original directamente.

    Devoluciones

    La nueva longitud de la matriz.

    ejemplos de la función array.unshift ()


    13. Array.prototype.map ()

    array.map (devolución de llamada [, thisArg])

    Visión de conjunto

    Se trata de una función de JavaScript muy útil y se utiliza todo el tiempo en software profesional. La map()función recorre cada elemento de la matriz, ejecutando una función de devolución de llamada en cada elemento. Una vez que map()ha completado el ciclo a través de la matriz, toma los resultados de cada devolución de llamada aplicada a cada elemento y devuelve esos resultados en su totalidad como una matriz. Te queda una nueva matriz con valores actualizados y una matriz antigua que tiene los valores originales. Estas dos matrices tienen la misma longitud. Cuando se invoca la devolución de llamada, se hace con tres argumentos. Estos son el valor del elemento, el índice del elemento y el objeto Array que se atraviesa. Si se proporciona el segundo parámetro opcional map(), se utilizará comothis valor para cada ejecución de la devolución de llamada.

    nota: Elmap()yforEach()funciones parecen que son los mismos, pero en realidad son diferentes. La diferencia es queforEach()itera sobre una matriz y aplica alguna operación con efectos secundarios a cada miembro de la matriz, como guardar cada uno en la base de datos o algún otro efecto secundario. map()por otro lado, itera sobre una matriz, actualiza cada miembro de esa matriz y devuelve otra matriz del mismo tamaño con los miembros transformados (como convertir una matriz de cadenas a minúsculas).

    Devoluciones

    map() devuelve una nueva matriz con elementos calculados por la función de devolución de llamada proporcionada.

    ejemplos de la función array.map ()


    14. Array.prototype.sort ()

    array.sort ([compareFunction])

    Visión de conjunto

    Si desea ordenar una matriz en JavaScript, puede hacerlo con la sort()función incorporada. sort()aplica la ordenación directamente a la matriz original, no se realiza ninguna copia de la matriz. Opcionalmente, puede proporcionar una función de devolución de llamada que determinará el comportamiento del ordenamiento. Si no proporciona uno, la sort()función primero convertirá todos los elementos en cadenas y luego los ordenará en función de algo llamado valor de punto de código Unicode. Básicamente, eso significa alfabético, pero con algunas reglas especiales, como letras mayúsculas antes de minúsculas.

    Devoluciones

    sort() devuelve una referencia a la matriz original.

    ejemplos de la función array.sort ()

    Como podemos ver en el ejemplo anterior, cuando no proporciona una función de devolución de llamada al método de clasificación, es posible que el orden no sea el esperado. Las reglas para realizar pedidos en Unicode son un poco únicas. Por ejemplo, los números van antes de las letras mayúsculas y las letras mayúsculas antes de las minúsculas. Además, una matriz de números se convierte en cadenas antes de ordenar, por eso vemos 33 antes que 4 y 9 en el ejemplo anterior. A continuación, se muestra un ejemplo de función de devolución de llamada para mostrar los números de pedido como podría esperar.


    15. Array.prototype.pop ()

    array.pop ()

    Visión de conjunto

    Lo contrario de la push()función sería la pop()función. La pop()función elimina el último elemento de una matriz, disminuye la longitud de la matriz y devuelve el valor que se eliminó de la matriz. Si intenta aplicar el pop()a una matriz vacía, simplemente se le undefineddevolverá.

    Devoluciones

    pop() devuelve el último elemento de la matriz en la que se llama.

    ejemplos de la función array.pop ()


    16. Array.prototype.reduce ()

    array.reduce (devolución de llamada [, initialValue])

    Visión de conjunto

    reduce()acepta una función como primer parámetro que actúa como un operador binario. Esta función de devolución de llamada toma dos valores, opera sobre ellos y devuelve un resultado. El número de veces que se ejecuta la función de devolución de llamada es siempre uno menos que la longitud total de la matriz original. Por ejemplo, si la matriz original tiene una longitud de 10, la devolución de llamada se ejecutará 9 veces. El resultado final es un valor combinado.

    Devoluciones

    El valor reducido de la matriz, que es el valor de retorno de la última vez que se ejecutó la función de devolución de llamada.

    ejemplos de la función array.reduce ()

    En este ejemplo, usaremos array.reduce()para operar con valores contenidos dentro de una matriz simple de objetos. array.reduce()es un poco más desafiante que algunas de las otras funciones útiles de matriz, así que dedique algo de tiempo adicional a esta si no hace clic de inmediato.