{"id":196,"date":"2023-05-19T12:11:32","date_gmt":"2023-05-19T15:11:32","guid":{"rendered":"https:\/\/danielsegovia.com\/plataforma\/?p=196"},"modified":"2023-07-07T14:01:10","modified_gmt":"2023-07-07T17:01:10","slug":"10-metodos-de-arrays","status":"publish","type":"post","link":"https:\/\/danielsegovia.com\/plataforma\/10-metodos-de-arrays\/","title":{"rendered":"10 – M\u00e9todos de arrays"},"content":{"rendered":"\n

Hoy nos toca volver seguir trabajando con Arrays.
Recuerda que puedes visitar el contenido de los fundamentos de Arrays<\/a> y tambi\u00e9n ver la grabaci\u00f3n de la clase.<\/p>\n\n\n\n

Ahora llega el momento de manipular de forma m\u00e1s eficiente lo que pasa dentro del array, es decir, \u00bfsi quiero agregar un elemento al inicio c\u00f3mo hago? \u00bfsi quiero buscar un elemento tengo que recorrer todo el array? A lo largo de est\u00e9 art\u00edculo iremos viendo diferentes m\u00e9todos que nos permitan realizar est\u00e1s y varias acciones m\u00e1s.
Al final del art\u00edculo veras un ejemplo s\u00faper com\u00fan que se suele tomar en muchas entrevistas y que podr\u00e1s resolver con los m\u00e9todos que veremos, claro que no es tan f\u00e1cil tendr\u00e1s que aplicar l\u00f3gica para resolverlo :-)<\/p>\n\n\n\n

M\u00e9todos de array<\/h2>\n\n\n\n

En la clase pasada vimos la propiedad length que nos dec\u00eda la cantidad de elementos que ten\u00eda un Array<\/p>\n\n\n\n

const array = [11, 22, 33];\nconsole.log(array.length); \/\/ Output: 3\narray.push(44);\nconsole.log(array.length); \/\/ Output: 4<\/code><\/pre>\n\n\n\n
Hoy veremos algunos m\u00e9todos pero empecemos que es una propidad y que es un m\u00e9todo.
Son temas que iremos viendo con mayor profundidad a lo largo del primer m\u00f3dulo del curso pero a grandes  en JavaScript, una propiedad es un valor asociado a un objeto (en nuestro caso el array). Puede ser cualquier tipo de valor, como una cadena de texto, un n\u00famero o un booleano. Las propiedades proporcionan informaci\u00f3n sobre el objeto y se acceden utilizando la sintaxis de punto (objeto.propiedad<\/code>) o la sintaxis de corchetes (objeto['propiedad']<\/code>).
Como en el ejemplo anterior array.length<\/code> nos devuelve 3<\/p>\n\n\n\n
Por otro lado, un m\u00e9todo es una funci\u00f3n asociada a un objeto<\/strong> (en este caso al Array). Los m\u00e9todos son acciones o comportamientos que el objeto puede realizar. Se definen dentro del objeto y se invocan utilizando la sintaxis de punto (objeto.metodo()<\/code>). Los m\u00e9todos pueden utilizar los valores y propiedades del objeto para realizar c\u00e1lculos, modificar el estado del objeto o interactuar con otros objetos.
Como en el ejemplo anterior array.push<\/code> a\u00f1ade un nuevo elemento al array (ejecuta una acci\u00f3n)<\/p>\n\n\n\n
En resumen, una propiedad es un valor asociado a un objeto que proporciona informaci\u00f3n sobre el objeto, mientras que un m\u00e9todo es una funci\u00f3n asociada a un objeto que representa un comportamiento o una acci\u00f3n que el objeto puede realizar.<\/p>\n\n\n\n
pop<\/h3>\n\n\n\n
El m\u00e9todo pop()<\/code> elimina el \u00faltimo elemento de un array y lo devuelve.<\/p>\n\n\n\n
const array = [1, 2, 3];\nconst lastElement = array.pop();\nconsole.log(lastElement); \/\/ Output: 3\nconsole.log(array); \/\/ Output: [1, 2]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
unshift<\/h3>\n\n\n\n
Con el m\u00e9todo unshift()<\/code>, podemos agregar uno o m\u00e1s elementos al inicio de un array y obtener la nueva longitud del array.<\/p>\n\n\n\n
const array = [2, 3, 4];\narray.unshift(1, 6);\nconsole.log(array); \/\/ Output: [1, 6, 2, 3, 4]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
shift<\/h3>\n\n\n\n
El m\u00e9todo shift()<\/code> elimina el primer elemento de un array y lo devuelve.<\/p>\n\n\n\n
const array = [1, 2, 3];\nconst firstElement = array.shift();\nconsole.log(firstElement); \/\/ Output: 1\nconsole.log(array); \/\/Output: [2, 3]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
concat<\/h3>\n\n\n\n
El m\u00e9todo concat()<\/code> nos permite combinar dos o m\u00e1s arrays y devuelve un nuevo array.<\/p>\n\n\n\n
const array1 = [1, 2];\nconst array2 = [3, 4];\nconst newArray = array1.concat(array2);\nconst newArray2 = array2.concat(array1);\nconsole.log(newArray); \/\/ Output: [1, 2, 3, 4]\nconsole.log(newArray2); \/\/ Output: [3, 4, 1, 2]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
slice<\/h3>\n\n\n\n
Con el m\u00e9todo slice()<\/code>, podemos obtener una copia superficial de una porci\u00f3n espec\u00edfica de un array en un nuevo array.
Indicamos el \u00edndice de inicio y el \u00edndice de fin<\/p>\n\n\n\n
const array = [1, 2, 3, 4, 5];\nconst newArray = array.slice(2, 4);\nconsole.log(newArray); \/\/ Output: [3, 4]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
indexOf<\/h3>\n\n\n\n
El m\u00e9todo indexOf<\/code> se utiliza en JavaScript para buscar la primera aparici\u00f3n<\/strong> de un elemento en un array y devuelve su \u00edndice<\/strong> correspondiente. Si el elemento no se encuentra en el array, el m\u00e9todo devuelve -1<\/code>.<\/p>\n\n\n\n
La sintaxis del m\u00e9todo indexOf<\/code> es la siguiente: array.indexOf(elemento)<\/code>. Donde elemento<\/code> indica el valor que deseamos buscar en el array.<\/p>\n\n\n\n
Algunos puntos importantes a tener en cuenta:<\/p>\n\n\n\n
    \n
  • El m\u00e9todo indexOf<\/code> realiza una b\u00fasqueda estricta, lo que significa que compara los valores utilizando el operador de igualdad estricta (===<\/code>).<\/li>\n\n\n\n
  • Si el elemento se encuentra en el array, el m\u00e9todo devuelve el \u00edndice de la primera aparici\u00f3n.<\/li>\n\n\n\n
  • Si el elemento no se encuentra en el array, el m\u00e9todo devuelve -1<\/code>.<\/li>\n<\/ul>\n\n\n\n
    Aqu\u00ed tienes un ejemplo de uso del m\u00e9todo indexOf<\/code>:<\/p>\n\n\n\n
    const array = [1, 2, 3, 4, 5];\nconsole.log(array.indexOf(3)); \/\/ Output: 2\nconsole.log(array.indexOf(6)); \/\/ Output: -1<\/code><\/pre>\n\n\n\n
    Con est\u00e1 funci\u00f3n podr\u00edas validar que exista determinado elementos en tu array<\/p>\n\n\n\n
    const array = [\"Juan\", \"Pedro\", \"Celeste\", \"Romina\"];\nconst buscar = \"Gast\u00f3n\"\nif(array.indexOf(buscar) === -1){\n    console.log(`${buscar} no est\u00e1 en el array`)\n}else {\n    console.log(`${buscar} se encontr\u00f3 en el array`)\n}<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    Iteraciones<\/h2>\n\n\n\n
    Ahora nos centraremos en los m\u00e9todos de iteraci\u00f3n, que nos permiten recorrer y transformar los elementos de un array de manera efectiva<\/p>\n\n\n\n
    forEach<\/h3>\n\n\n\n
    El m\u00e9todo forEach()<\/code> nos permite ejecutar una funci\u00f3n proporcionada una vez por cada elemento del array. Es una forma sencilla de iterar sobre los elementos.<\/p>\n\n\n\n
    const array = [1, 2, 3];\narray.forEach((element) => {\n    \/\/multiplico cada elemento x 2\n    console.log(element * 2);\n});\n\/\/ Output:\n\/\/ 2\n\/\/ 4\n\/\/ 6<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    map<\/h3>\n\n\n\n
    El m\u00e9todo map()<\/code> crea un nuevo array con los resultados de llamar a una funci\u00f3n proporcionada en cada elemento del array. Es \u00fatil cuando queremos transformar los elementos del array.<\/p>\n\n\n\n
    const array = [1, 2, 3];\nconst newArray = array.map((element) => {\n  return element * 2;\n});\nconsole.log(newArray);\n\/\/ Output: [2, 4, 6]\n<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    filter<\/h3>\n\n\n\n
    El m\u00e9todo filter()<\/code> crea un nuevo array con todos los elementos que cumplan una condici\u00f3n especificada. Nos ayuda a filtrar los elementos del array.<\/p>\n\n\n\n
    const array = [10, 2, 14, 3, 11, 15];\nconst filteredArray = array.filter((element) => {\n  return element > 10;\n});\nconsole.log(filteredArray);\n\/\/ Output: [ 14, 11, 15 ]<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    reduce<\/h3>\n\n\n\n
    El m\u00e9todo reduce()<\/code> aplica una funci\u00f3n a un acumulador y a cada elemento del array (de izquierda a derecha) para reducirlos a un \u00fanico valor. Es \u00fatil cuando queremos realizar c\u00e1lculos o agregaciones<\/p>\n\n\n\n
    const array = [1, 2, 3, 4, 5];\nconst sum = array.reduce((accumulator, element) => {\n  return accumulator + element;\n}, 0);\nconsole.log(sum);\n\/\/ Output: 15<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    some<\/h3>\n\n\n\n
    El m\u00e9todo some()<\/code> comprueba si al menos un elemento del array cumple una condici\u00f3n especificada. Retorna un valor booleano.<\/p>\n\n\n\n
    const array = [1, 2, 3, 4, 5];\nconst hasEvenNumber = array.some((element) => {\n  \/\/busco si hay al menos un elemento par\n  return element % 2 === 0;\n});\nconsole.log(hasEvenNumber);\n\/\/ Output: true<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    every<\/h3>\n\n\n\n
    El m\u00e9todo every()<\/code> comprueba si todos los elementos del array cumplen una condici\u00f3n especificada. Retorna un valor booleano.<\/p>\n\n\n\n
    const array = [1, 2, 3, 4, 5];\nconst allGreaterThanZero = array.every((element) => {\n  \/\/busco si todos los elementos son mayores a cero\n  return element > 0;\n});\nconsole.log(allGreaterThanZero);\n\/\/ Output: true<\/code><\/pre>\n\n\n\n
    <\/p>\n\n\n\n
    Diferencias entre forEach y map<\/h3>\n\n\n\n
    Te cuento esto como tip, es una de las preguntas de entrevista m\u00e1s t\u00edpica
    \u00bfQu\u00e9 diferencia hay entre forEach y map?
    <\/p>\n\n\n\n
    \n
    \n
    const array = [1, 2, 3];\narray.forEach((element) => {\n    console.log(element * 2);\n});\n\/\/ Output:\n\/\/ 2\n\/\/ 4\n\/\/ 6<\/code><\/pre>\n<\/div>\n\n\n\n
    \n
    const array = [1, 2, 3];\nconst newArray = array.map((element) => {\n  return element * 2;\n});\nconsole.log(newArray);\n\/\/ Output: [2, 4, 6]<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
    forEach<\/code> es un m\u00e9todo de iteraci\u00f3n que se utiliza para recorrer los elementos de un array y ejecutar una funci\u00f3n proporcionada en cada uno de ellos. No devuelve un nuevo array<\/strong>, sino que simplemente itera sobre los elementos existentes. Mientras que map<\/code> tambi\u00e9n es un m\u00e9todo de iteraci\u00f3n que recorre los elementos de un array y aplica una funci\u00f3n proporcionada a cada uno de ellos. La diferencia es que map devuelve un nuevo array<\/strong> con los resultados de aplicar la funci\u00f3n a cada elemento del array original.<\/p>\n\n\n\n
    Desaf\u00edo laboral<\/h2>\n\n\n\n
    La serie de fibonacci es una de las m\u00e1s utilizadas en entrevistas para medir la capacidad l\u00f3gica del entrevistado, aqu\u00ed te dejo el planteo para que intentes resolverlo y puedas compartirlo con la clase en nuestro pr\u00f3ximo encuentro.<\/p>\n\n\n\n
    Escribe un script que comience con una variable llamada hasta<\/strong> y cree un array con los primeros n\u00fameros de la secuencia de Fibonacci. La secuencia de Fibonacci siempre comienza<\/strong> con los n\u00fameros 0 y 1, y cada n\u00famero subsiguiente se calcula sumando los dos n\u00fameros anteriores.<\/p>\n\n\n\n
    Ejemplos:<\/p>\n\n\n\n
      \n
    • hasta = 3 resultado [0, 1, 1] \/* suma 0 + 1 para obtener la \u00faltima posici\u00f3n *\/<\/li>\n\n\n\n
    • hasta = 4 resultado [0, 1, 1, 2]  \/* suma 1 + 1 para obtener la \u00faltima posici\u00f3n *\/<\/li>\n\n\n\n
    • hasta = 5 resultado [0, 1, 1, 2, 3]  \/* repite l\u00f3gica anterior *\/<\/li>\n\n\n\n
    • hasta = 6 resultado [0, 1, 1, 2, 3, 5]<\/li>\n\n\n\n
    • hasta = 7 resultado [0, 1, 1, 2, 3, 5, 8]<\/li>\n<\/ul>\n\n\n\n
      let hasta = 6;\n\n\/* tu c\u00f3digo empieza aqu\u00ed *\/<\/code><\/pre>\n\n\n\n
      \u00a1Buena suerte y divi\u00e9rtete! Si tienes alguna pregunta o necesitas ayuda adicional, estar\u00e9 encantado de ayudarte en la pr\u00f3xima clase.<\/p>\n\n\n\n
      <\/div>\n\n\n\n
      Reviv\u00ed la clase en vivo<\/p>\n\n\n\n
      \n