Saltar al contenido
Apuntes FS(+)

Clase 5 - Métodos de arreglo y string

#array #javaScript #string

Arreglos

//  Longitud = 5
[22, 11, 0, 3, 7];
//    0   1  2  3  4


const footballPlayers = [
  'Messi',
  `Alvarez`,
  'Martinez',
  'Romero',
  2,
  Symbol(),
  { a: 'foo' },
];


console.log(footballPlayers[3]); // Romero
console.log(footballPlayers.length); // 4

Métodos de Array

  • Formas de crear un Array en JavaScript
new Array(3); // arreglo vacío de tamaño 3
new Array(3, 4, 5, 5)[(3, 4, 6)];

at(index)

  • Devuelve el elemento en la posición indicada
const numbers = [1, 2, 3, 4];
numbers.at(1); // 2


numbers.at(-1); // 4

with(index, value)

  • Sirve para cambiar el valor de un índice dado
  • Devuelve el nuevo arreglo con el elemento reemplazado
  • NO modifica el arreglo original
const numbers = [1, 2, 3, 4];
numbers[1] = 22;


numbers.with(1, 22); // [1, 22, 3, 4]

push(el1, el2, …)

  • Añade uno o varios elementos al final del array
  • Me devuelve la nueva longitud del array
  • SI Modifica arreglo original
const numbers = [1, 1, 3, 5];
console.log(numbers.push(555)); // 5
console.log(numbers); // [1,1,3,5,555]

pop()

  • Elimina el último elemento del array
  • Me devuelve el elemento eliminado
  • SI Modifica arreglo original
const numbers = [1, 1, 3, 9];
console.log(numbers.pop()); // 9 y [1, 1, 3]

unshift(el1, el2, …)

  • Añade uno o varios elementos al comienzo del array
  • Me devuelve la nueva longitud del array
  • SI Modifica arreglo original
const numbers = [1, 1, 3, 5];
console.log(numbers.unshift(555, 444)); // 6
console.log(numbers); // [555, 444, 1, 1, 3, 5]

shift()

  • Elimina el primer elemento del array
  • me devuelve el elemento eliminado
  • SI Modifica arreglo original
const numbers = [12, 1, 3, 9];
console.log(numbers.shift()); // 12

slice(start, end)

  • Devuelve los elementos desde la posición inicial hasta la final(opcional) SIN INCLUIR
  • Puede usar números negativos, cuenta desde la derecha
  • Si pongo un numero gigante toma hasta el final .length
  • NO modifica el arreglo original
const numbers = [1, 2, 3, 4];
numbers.slice(1, 2); // [2]
numbers.slice(0, 3); // [1, 2, 3]
numbers.slice(-2); // [3, 4]

splice(start, deleteCount, item1, itemN)

  • Cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.
  • Si se omite el deleteCount borra todo desde el comienzo
  • me devuelve un array con los elementos eliminados
  • SI Modifica arreglo original
const numbers = [1, 2, 3, 4];
numbers.splice(1, 1); // [2]
numbers.splice(0); // [1, 2, 3, 4]
console.log(numbers); // []


numbers.splice(1, 1, 555);
console.log(numbers); // [1,555,3,4]


numbers.splice(1, 1, 555, 333);
console.log(numbers); // [1,555,333,3,4]

toSpliced(start, deleteCount, item1, itemN)

  • Hace lo mismo al splice solo que NO modifica el arreglo original
  • Devuelve el nuevo arreglo con los valores modificados
const numbers = [1, 2, 3, 4];
numbers.toSpliced(1, 1, 555, 333);
console.log(numbers); // [1, 2, 3, 4]

sort(compareFunction)

  • Ordena los elementos de un array modificando el original.
  • Si no se pasa compareFunction, ordena como strings (ej. [10, 2] → [10, 2]).
const numbers = [3, 1, 4, 2];
numbers.sort(); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (modificado)


numbers.sort((a, b) => b - a); // [4, 3, 2, 1] (orden descendente)
  • compareFunction:
    • Devuelve un número negativo si a debe ir antes que b (no cambia el orden).
    • Devuelve 0 si a y b son iguales (se mantienen en la misma posición).
    • Devuelve un número positivo si a debe ir después que b (se intercambian).
const numbers = [10, 5, 8, 1];
numbers.sort((a, b) => a - b);
console.log(numbers);


const fruits = ['banana', 'apple', 'cherry'];
words.sort();
console.log(fruits);


// si quisieramos ignorar mayusculas y minusculas
const words = ['Banana', 'apple', 'cherry'];
words.sort((a, b) => a.localeCompare(b));
console.log(words);


words.sort((a, b) => b.localeCompare(a));
console.log(words);


words.sort((a, b) => {
  const strA = a.toLowerCase();
  const strB = b.toLowerCase();


  if (strA > strB) {
    return 1;
  }
  if (strA < strB) {
    return -1;
  }
  return 0;
});
console.log(words);

toSorted(compareFunction)

  • Hace lo mismo que sort(), pero NO modifica el original.
const numbers = [3, 1, 4, 2];
const sortedNumbers = numbers.toSorted();
console.log(sortedNumbers); // [1, 2, 3, 4]
console.log(numbers); // [3, 1, 4, 2] (sin modificar)

findIndex(callback) o findLastIndex(callback)

  • Retorna el índice del primer (o último) elemento que cumpla la condición.
  • Devuelve -1 si no encuentra coincidencias.
const numbers = [10, 20, 30, 40];
numbers.findIndex((num) => num > 25); // 2
numbers.findLastIndex((num) => num > 25); // 3

find(callback) o findLast(callback)

  • Retorna el primer (o último) elemento que cumpla la condición.
const numbers = [10, 20, 30, 40];
numbers.find((num) => num > 25); // 30
numbers.findLast((num) => num > 25); // 40

every(callback)

  • Devuelve true si todos los elementos cumplen la condición, sino false.
const numbers = [2, 4, 6, 8];
numbers.every((num) => num % 2 === 0); // true
numbers.every((num) => num > 5); // false

some(callback)

  • Devuelve true si al menos uno cumple la condición, sino false.
const numbers = [2, 3, 6, 8];
numbers.some((num) => num % 2 === 0); // true (hay números pares)
numbers.some((num) => num > 10); // false

forEach(callback)

  • Ejecuta la función para cada elemento, pero no retorna nada.
const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num * 2)); // 2, 4, 6


// Apliquemos un descuento del 10%
let prices = [100, 250, 450, 60, 150];


prices.forEach((price, index, arr) => {
  arr[index] = price * 0.9;
});
console.log(prices); // [90, 225, 405, 54, 135]


// Creemos un arreglo de números elevados al cuadrado
let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = [];


numbers.forEach((number) => {
  squaredNumbers.push(number ** 2);
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

map(callback)

  • Retorna un nuevo array con los valores modificados.
  • NO modifica el arreglo original
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6]
console.log(numbers); // [1, 2, 3]


// Creo un arreglo de string que digan "Indice[index]: valor"
let numbers = [10, 20, 30, 40, 50];
let stringArray = numbers.map((number, index) => `Indice[${index}]: ${number}`);


console.log(stringArray); // [ 'Indice[0]: 10', 'Indice[1]: 20', 'Indice[2]: 30', 'Indice[3]: 40', 'Indice[4]: 50' ]

filter(callback)

  • Retorna un nuevo array con los elementos que cumplen la condición.
  • NO modifica el arreglo original
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // [2, 4]
console.log(numbers); // [1, 2, 3, 4, 5]

reduce(callback, initialValue) o reduceRight(callback, initialValue)

  • Reduce el array a un único valor aplicando la función acumuladora.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10


const reversedConcat = numbers.reduceRight((acc, num) => acc + num, ''); // "4321"


// Encontrar el valor máximo del arreglo
let numbers = [5, 10, 315, 20, 2345];


let maxNumber = numbers.reduce((max, num) => {
  if (num > max) {
    return num;
  } else {
    return max;
  }
}, numbers[0]);


// O de manera mucho más simplificada
let maxNumber = numbers.reduce(
  (max, num) => (num > max ? num : max),
  numbers[0]
);


console.log(maxNumber); // 25


// Calcular el promedio
function calculateAverage(numbers) {
  let totalSum = numbers.reduce((accumulator, num) => accumulator + num, 0);
  let average = totalSum / numbers.length;
  return average;
}


let numbers = [5, 10, 15, 20, 25];
let average = calculateAverage(numbers);


console.log(average); // 15

Métodos de String

  • Si bien un string es un primitivo, JavaScript crea un objeto temporal String con el valor del primitivo para trabajarlo con métodos y luego elimina este objeto temporal

split(separator, optionalLimit)

  • El método split() divide el string en un arreglo de strings.
let sentence = 'Hello world, this is JavaScript';


let wordsArray = sentence.split(' ');


console.log(wordsArray); // ["Hello", "world,", "this", "is", "JavaScript"]

join()

  • Une los elementos de un arreglo en un string.
let wordsArray = ['Hello', 'world,', 'this', 'is', 'JavaScript'];
let sentence = wordsArray.join(' ');
console.log(sentence); // "Hello world, this is JavaScript"

replace(pattern, replacement)

  • Devuelve un nuevo string cambiando la/las coincidencias del pattern que tengamos por el replacement.
  • El replacement puede ser un string o una RegExp
let sentence = 'I am learning JavaScript';
let updatedSentence = sentence.replace('JavaScript', 'TypeScript');
console.log(updatedSentence); // "I am learning TypeScript"


let sentence = 'The cat is on the cat tree';
let updatedSentence = sentence.replace(/cat/g, 'dog');
console.log(updatedSentence); // "The dog is on the dog tree"


let sentence = '   Hello world, this is JavaScript!   ';
let trimmedSentence = sentence.replace(/^\s+|\s+$/g, '');
console.log(trimmedSentence); // "Hello world, this is JavaScript!"

replaceAll(pattern, replacement)

  • Modifica todas las coincidencias si necesidad de una expresión regular ni el modificador g
let phoneNumber = '123-456-7890';
let cleanNumber = phoneNumber.replaceAll('-', '');
console.log(cleanNumber); // "1234567890"


// Incluso podemos concatenar métodos
let sentence = 'Hello, world. This is, JavaScript.';
let updatedSentence = sentence.replaceAll(',', ' ').replaceAll('.', ' ');
console.log(updatedSentence); // "Hello  world  This is  JavaScript "

Ejercicios

Ejercicio 1

Haga una función que elimine el primer elemento del arreglo.

Ejercicio 2

Haga una función que solo reciba arreglos con más de 5 elementos y luego elimine los últimos 3. En caso de recibir un arreglo de menos de 5 elementos, mostrar en pantalla un mensaje de error.

Ejercicio 3

Haga una función que reciba un arreglo y un número. Tenemos que sumarle dicho número a cada elemento del arreglo y devolver el arreglo modificado.

Ejercicio 4

Haga una función que reciba un número y devuelva un arreglo que tenga el tamaño del número recibido.

El contenido del arreglo deben ser números desde el 1 hasta el número recibido. (1 a n)

Ejercicio 5

Hay un arreglo con varios números donde todos son iguales excepto uno. Haga una función que encuentre qué número es el distinto.

findUniq([1,1,1,1,1,2,1,1,1])  # return (2)

Ejercicio 6

Dado un arreglo de números enteros, encuentre y devuelva el valor de la menor suma posible entre ellos.

minSum([7,4,2,3])  # return (5)

Ejercicio 7

Dado un arreglo de números enteros, encuentre el mayor producto posible entre dos números adyacentes y devuelva el valor de dicho producto.

adjacentElementsProduct([9,5,10,2,24,-1])  # return (50)
# 5 * 10 = 50

Ejercicio 8

Tenemos un grupo de ovejas amenazadas por un lobo y necesitamos saber a cuál se está por comer.

Consideramos que tenemos a las ovejas y al lobo en un arreglo y que en ese mismo consideramos al último elemento como el primero.

Consideración: El lobo solo puede comer a la oveja que tiene a su derecha.

warnTheSheep(["sheep", "sheep", "sheep", "wolf", "sheep"])
# "Hey! Oveja numero 1! El lobo esta cerca!"


warnTheSheep(["sheep", "sheep", "sheep", "wolf"])
# "No sigas comiendo ovejas!"