JS repaso arrays

Un array en JS es un conjunto de variables a las que accedemos a través de un índice. Si tenemos:
let tabla=[1,2,3,4]

tabla[0]–>1
tabla[1]–>2
tabla[2]–>3
tabla[3]–>4

Podemos recuperar el valor o modificarlo

Para recorrer un array podemos utilizar el bucle for de toda la vida. En los siguientes ejercicios vamos a usar el bucle for aunque no el if

1.- Una función arrayNumeros a la que le pasemos un número y nos devuelva un array desde el 1 hasta ese número. Ej: arrayNumeros(5)–>[1,2,3,4,5]
2.- Una función sumaArray a la que le pasemos un array de números y nos devuelva la suma de todos ellos. Ej: sumaArray([2,5,7])->14 (2+5+7)
3.- Una función arrayTotal a la que le pasamos dos arrays de números y nos devuelve los arrays juntos y ordenados de menor a mayor. Ej: arrayTotal([4,5],[1,2])–>[1,2,4,5] (nota: es más fácil de lo que parece)

En los siguientes sí que utilizamos el if

4.- Una función positivos a la que le pasamos un array de números y nos devuelve sólo los positivos. Ej: positivos([1,-2,5,2,-7])->[1,5,2]
5.- Una función estaOrdenado que nos devuelva true si le pasamos un array ordenado y false en caso contrario. Ojo, no que lo ordene, que nos diga si está ordenado. Ej: estaOrdenado([1,4,7])->true estaOrdenado([1,4,3])->false


function arrayNumeros (numero) {
  // Inicializo el array a un array vacío y la manera es la siguiente:
  const res = []
  for (let i = 1; i <= numero; i++) {
    res.push(i)
  }
  return res
}

function sumaArray (array) {
  let suma = 0
  for (let i = 0; i < array.length; i++) {
    suma += array[i]
  }
  return suma
}

function arrayTotal (array1, array2) {
  const res = array1.concat(array2)
  // Equivalente: sort(function(a,b){return a-b})
  res.sort((a, b) => a - b)
  return res
}

function positivos (array) {
  const res = []
  for (let i = 0; i < array.length; i++) {
    if (array[i] >= 0) {
      res.push(array[i])
    }
  }
  return res
}

// Primero ordenar y luego un recorrido y con un if miro si son iguales o no
// Recorrer el array y si hay dos elementos consecutivos que están desordenados->false y si llego al final
// Y no me he encontrado ningún caso está ordenado->true
// Tengo dos archivadores: original y la copia
// Cada archivador tiene n cajones
// ¿Tienen lo mismo?
// empiezo en el primer cajón y acabo en el último
// Abro el cajón del archivador 1 y abro el cajón del archivador 2
// ¿SOn diferentes?- > COn que haya un cajón que tenga un contenido diferente
function estaOrdenado (array) {
  const copia = array.slice()
  copia.sort((a, b) => a - b)
  for (let i = 0; i < array.length; i++) {
    // Yo en i voy teniendo valores consecutivos: 1,2,3,->posicion
    // Yo en array[i] voy teniendo el contenido del array
    // Yo en copia[i] voy teniendo el contenido de copia
    if (array[i] != copia[i]) {
      return false
    }
  }
  return true
}

function estaOrdenado2 (array) {
  // Empiezo en el 1 porque el 0 no tiene una posición anterior
  for (let i = 1; i < array.length; i++) {
    // array=[1,4,2] Si el 2 es menor que el 4 está desordenado
    if (array[i] < array[i - 1]) {
      return false
    }
  }
  return true
}

JS Repaso bucles for

Los bucles for nos permiten repetir una acción un numero determinado de veces. Se usan cuando conocemos el inicio y el fin de los límites.

Veamos un ejemplo: una función que nos sume los números desde el uno hasta el número que le digamos. Ej. SUmaNUmeros(3)–>6 (1+2+3)

function sumaNumeros(num){
let total=0
for(let i=1;i<=num;i++){
total+=i
}
return total
}

Para los siguientes ejercicios sólo utilizaremos bucles for

1.- Una función repetirCadena a la que le pasamos una cadena y un número y nos repite la cadena ese número de veces. Ej: repetirCadena(‘hola’,3)->’holaholahola’ repetirCadena(‘*’,5)->’*****’
2.- Una función listaNumeros a la que le pasamos un número y nos devuelve una cadena con la lista desde el 1 hasta el número que le pasemos separadas por coma. Ej: listaNumeros(4)->’1,2,3,4′
3.- Una función factorial que nos devuelva el factorial de un número. Factorial es la multiplicación de todos los números desde el 1 hasta el número. Ej: factorial(4)–>24 (1*2*3*4)
4.- Una función sumaEntre a la que le pasamos dos números y nos suma los números desde el primero hasta el último ambos incluídos. Ej: sumaEntre(4,8)->30 (4+5+6+7+8)
5.- Una función pares a la que le pasemos un número y nos devuelva una cadena con todos los números pares desde el 2 hasta ese número (nos hará falta un if). Ej: pares (11)->’2,4,6,8,10′


function repetirCadena (cadena, num) {
  let res = ''
  for (let i = 0; i < num; i++) {
    res += cadena
  }
  return res
}

function repetirCadena2 (cadena, num) {
  return cadena.repeat(num)
}

function listaNumeros (num) {
  let res = ''
  for (let i = 1; i <= num; i++) {
    res += i + ','
  }
  return res.slice(0, -1)
}

function factorial (num) {
  let res = 1
  for (let i = 1; i <= num; i++) {
    res *= i
  }
  return res
}

// SI los numeros no me los dan ordenados asumo que la suma es 0
// Y me quedo tan ancho. Si no que el cliente lo hubiera especificado
function sumaEntre (num1, num2) {
  let suma = 0
  for (let i = num1; i <= num2; i++) {
    suma += i
  }
  return suma
}

// Por desgracia el cliente me lo ha pedido
// Aprovecho las funciones que me da JS. Math.max y Math.min
function sumaEntreInvertidos (num1, num2) {
  let suma = 0
  for (let i = Math.min(num1, num2); i <= Math.max(num1, num2); i++) {
    suma += i
  }
  return suma
}

// Por desgracia el cliente me lo ha pedido
// Si no las conociera lo tendría que hacer yo
function sumaEntreInvertidos2 (num1, num2) {
  let menor = num1
  let mayor = num2
  if (num2 < num1) {
    menor = num2
    mayor = num1
  }
  let suma = 0
  for (let i = menor; i <= mayor; i++) {
    suma += i
  }
  return suma
}

function pares (num) {
  let res = ''
  for (let i = 1; i <= num; i++) {
    if (i % 2 == 0) {
      res += i + ','
    }
  }
  return res.slice(0, -1)
}

function pares2 (num) {
  let res = ''
  for (let i = 2; i <= num; i += 2) {
    res += i + ','
  }
  return res.slice(0, -1)
}

JS repaso if

Vamos a trabajar el if. Recordemos que es una estructura de control que nos permite realizar una acción u otra dependiendo de una serie de condiciones.
if (condicion){
//Acciones si la condición es cierta
} else{
//Acciones si la condición es falsa
}
Vamos a realizar una serie de funciones que sólo utilizarán if

1.- Crear una función esPar que nos devuelva true si el número que le pasamos es par y false en caso contrario. Ej. esPar(7)->false esPar(100)->true
2.- Crear una función longitudPar que le pasemos una cadena y nos devuelva true si su longitud es par y false en caso contrario. Ej. longitudPar(‘hola’)->true longitudPar(‘patas’)–>false
3.- Crear una función irpf a la que le pasemos un sueldo y nos devuelva:
Si el sueldo está entre 0 y 2000 no incluído-> 0.1
Si el sueldo está entre 2000 y 5000 no incluído ->0.2
Si es mayor o igual que 5000->0.3
Ej: irpf(800)->0.1 irpf(8000)->0.3
4.- Crear una función corta a la que le pasamos dos cadenas y nos devuelve la cadena más corta. Ej. corta(‘que’,’pasa’)-> ‘corta’
5.- Crear una función descuento a la que le pasamos una categoría y un importe y nos devuelve:
Si la categoría es ‘sanitarios’ y el importe es >= 500 ->0.05
Si la categoría es ‘sanitarios’ y el importe es >= 1000 ->0.1
Si la categoría es ‘grifería’ y el importe es >= 700 ->0.05
Si la categoría es ‘grifería’ y el importe es >= 1200 ->0.1
En cualquier otro caso devuelve 0


function esPar (numero) {
  // Si yo tengo un if en el que una rema me devuelve true y la otra false
  // Esto es equivalente a devolver la condicion
  // return numero%2==0
  if (numero % 2 === 0) {
    return true
  } else {
    return false
  }
}
function esParCorta (numero) {
  return numero % 2 == 0
}

function longitudPar (cadena) {
  if (cadena.length % 2 === 0) {
    return true
  } else {
    return false
  }
}

function longitudParReciclaje (cadena) {
  return esPar(cadena.length)
}
// true si los números tienen la misma paridad y false en caso contrario
function paridadIgual (num1, num2) {
  if (esPar(num1) == esPar(num2)) {
    return true
  } else {
    return false
  }
}

function paridadIgualCorta (num1, num2) {
  return esPar(num1) == esPar(num2)
}

function irpf (sueldo) {
  if (sueldo < 2000) {
    return 0.1
  } else if (sueldo < 5000) {
    return 0.2
  } else {
    return 0.3
  }
}

function irpfTramos (sueldo) {
  const tramo1 = 0.1
  const tramo2 = 0.2
  const tramo3 = 0.3
  if (sueldo < 2000) {
    return tramo1
  } else if (sueldo < 5000) {
    return tramo2
  } else {
    return tramo3
  }
}

function corta (cadena1, cadena2) {
  if (cadena1.length < cadena2.length) {
    return cadena1
  } else {
    return cadena2
  }
}

function corta2 (cadena1, cadena2) {
  let corta = cadena1
  if (cadena2.length < cadena1.length) {
    corta = cadena2
  }
  return corta
}

function corta3 (cad1, cad2) {
  // Operador ternario, es como un if de bolsillo
  const corta = (cad1.length < cad2.length) ? cad1 : cad2
  return corta
}

/*
Si la categoría es ‘sanitarios’ y el importe es >= 500 ->0.05
Si la categoría es ‘sanitarios’ y el importe es >= 1000 ->0.1
Si la categoría es ‘grifería’ y el importe es >= 700 ->0.05
Si la categoría es ‘grifería’ y el importe es >= 1200 ->0.1
En cualquier otro caso devuelve 0
*/

function descuento (categoria, importe) {
  let descuento = 0
  if (categoria == 'sanitarios') {
    if (importe >= 1000) {
      descuento = 0.1
    } else if (importe >= 500) {
      descuento = 0.05
    }
  }
  if (categoria == 'griferia') {
    if (importe >= 1200) {
      descuento = 0.1
    } else if (importe >= 700) {
      descuento = 0.05
    }
  }
  return descuento
}

function descuento2 (categoria, importe) {
  let descuento = 0
  if ((categoria == 'sanitarios' && importe >= 1000) || (categoria == 'griferia' && importe >= 1200)) {
    descuento = 0.1
  } else
  if ((categoria == 'sanitarios' && importe >= 500) || (categoria == 'griferia' && importe >= 700)) {
    descuento = 0.05
  }
  return descuento
}
function descuento3 (categoria, importe) {
  let descuento = 0
  if (categoria == 'sanitario' && cantidad >= 1000) {
    descuento = 0.1
  } else if (categoria == 'sanitario' && cantidad >= 500) {
    descuento = 0.05
  } else if (categoria == 'griferia' && cantidad >= 1200) {
    descuento = 0.1
  } else if (categoria == 'griferia' && cantidad >= 700) {
    descuento = 0.05
  }
  return descuento
}

JS repaso: funciones

Los primeros ejercicios de repaso tienen que ver con las funciones. Recordemos, a una función se le pueden pasar parámetros y muchas veces devuelven un valor.
Lo primero: nombre de la función y los parámetros, después el código que nos haga falta y devolver los valores
Ej: función suma que le pasemos dos números y nos devuelva la suma.

Lo primero que hago es poner el nombre y los parámetros:
function suma(num1,num2){
}
Después hago el cálculo que en este caso es muy sencillo:
function suma(num1,num2){
let resultado=num1+num2
}
Por último devuelvo el valor:
function suma(num1,num2){
let resultado=num1+num2
return resultado
}

Resolvamos los siguientes ejercicios. Son sólo de funciones y devolver valores, no hay if, bucles o tablas

1.- Crear una función triple que nos devuelva el triple de un número. Ej: triple(5)–>15 triple(0)–>0
2.- Crear una función nombreCompleto que pasándole un nombre y un apellido nos devuelva una cadena con nombre y apellido juntos separados por un espacio: nombreCompleto(‘ana’,’pi’)->’ana pi’
3.- Crear una función areaCirculo que le pasemos el radio de un círculo y nos devuelva el área, que es 2*3.1416*r*r ej: areaCirculo(1)–>6,2832
4.- Crear una función triplicar que le pasemos una cadena y nos la devuelva repetida tres veces: triplocar(‘hola’)->’holaholahola’
5.- Crear una función perímetro a la que le pasamos dos lados y nos devuelve el perímetro de un rectángulo, que es lado1*2+lado2*2 Ej: perimetro(2,3)–>10

function triple (num) {
  const res = num * 3
  return res
}

function nombreCompleto (nombre, apellidos) {
  const completo = nombre + ' ' + apellidos
  return completo
}

function areaCirculo (radio) {
  const area = Math.PI * radio * radio // radio**2
  return area
}

function triplicar (cadena) {
  const res = cadena + cadena + cadena // cadena.repeat(3)
  return res
}

function perimetro (lado1, lado2) {
  const perimetro = lado1 * 2 + lado2 * 2
  return perimetro
}

Ejercicios array

Los ejercicios consistirán en realizar una serie de funciones. Por lo tanto no tenemos que preocuparnos del HTML, sólo del código. Lo podemos probar directamente en el js o por consola

1.- Una función arrayGrande a la que le pasamos un array y nos devuelva true si su tamaño es mayor de 10 y false si es menor
ej: arrayGrande([1,2,3])-> false arrayGrande([1,2,1,2,1,2,1,2,1,2,12,1])->true

2.- Una función mayorLongitud a la que le pasemos un array de cadenas y nos devuelva la cadena más larga
ej: mayorLongitud([‘hola’,’que’,’tal’])->’hola’
Si hay más de una cadena con la misma longitud me vale cualquiera, no hace falta devolver todas

3.- Una función todosPares a la que le pasamos un array y nos devuelve true si todos son pares y false en caso contrario
Ej: todosPares([1,2,3])->false todosPares([2,4,6])->true

4.- Una función multiplicarArray a la que le pasamos un array de números y un multiplicando y nos devuelva un array con todos los números multiplicados por ese numero
Ej: multiplicarArray([1,2,3],3)->[3,6,9]


/*
1.- Una función arrayGrande a la que le pasamos un array y nos devuelva true si su tamaño es mayor de 10 y false si es menor
ej: arrayGrande([1,2,3])-> false arrayGrande([1,2,1,2,1,2,1,2,1,2,12,1])->true
*/

const a = [1, 2, 3]
const b = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 1, 1]

console.log(arrayGrande(a)) // false
console.log(arrayGrande(b)) // true

function arrayGrande (array) {
// ¿Yo sé cual es el tamaño de un array?
// Sí: array.length
  const tamany = array.length
  if (tamany > 10) {
    return true
  } else {
    return false
  }
}

/*

2.- Una función mayorLongitud a la que le pasemos un array de cadenas y nos devuelva la cadena más larga
ej: mayorLongitud([‘hola’,’que’,’tal’])->’hola’
Si hay más de una cadena con la misma longitud me vale cualquiera, no hace falta devolver todas

*/
function mayorLongitud (tabla) {
  // Recorrer toda la tabla: Sí, con el for
  // E ir guardando la cadena que sea más larga cadena1.length>cadena2.length
  let larga = ''
  for (let i = 0; i < tabla.length; i++) {
    // En tabla[i] voy a ir recorriendo las cadenas
    // Si la cadena que está en la posición i (tabla[i]) es más larga que la que tengo...
    // Guardo en larga la cadena
    const palabra = tabla[i]
    if (palabra.length > larga.length) {
      larga = tabla[i]
    }
  }
  return larga
}

function mayorLongitudSort (tabla) {
  // Hago una copia de la tabla porque la voy a modificar
  const array = tabla.slice()
  // Ordeno por longitud de mayor a menor (b.length-a.length)
  array.sort(function (a, b) { return b.length - a.length })
  return array[0]
}

/* 3.- Una función todosPares a la que le pasamos un array y nos devuelve true si todos son pares y false en caso contrario
Ej: todosPares([1,2,3])->false todosPares([2,4,6])->true
*/

function todosPares (array) {
  // Recorrer todo el array y si encuentro uno que sea impar: devuelvo falso
  // Si llego al final y no he devuelto nada: devuelvo true
  for (let i = 0; i < array.length; i++) {
    // Si el número en la posición i es impar (Si el valor modulo 2 es igual a 1)
    if (array[i] % 2 == 1) {
      return false
    }
  }
  return true
}

/*
4.- Una función multiplicarArray a la que le pasamos un array de números y un multiplicando y nos devuelva un array con todos los números multiplicados por ese numero
Ej: multiplicarArray([1,2,3],3)->[3,6,9]
*/

function multiplicarArray (array, mult) {
  // Copio un array. Otra manera: let res=[...array]
  const res = array.slice()
  // Recorrer el array
  for (let i = 0; i < res.length; i++) {
    // Lo multiplico por el multiplicando
    res[i] *= mult
  }
  return res
}


Ejemplos funciones de array

const a = [2, 5, 1, 8, 10, 3]
console.log(mayor2(a))
console.log(a)
console.log(pares(a))
// Crear una función que me devuelva el mayor elemento del array
// Ordenar el array y coger el último
function mayor (array) {
  // Hace una copia del array entero
  const copia = array.slice()
  copia.sort(function (a, b) { return a - b })
  return copia[copia.length - 1]
}

// Recorrer el array y guardar el elemento que es mayor
function mayor2 (array) {
  let mayor = array[0]
  // Recorro TODO el array
  for (const v of array) {
    if (v > mayor) {
      mayor = v
    }
  }
  return mayor
}

// Una función que nos devuelva un array con los pares
function pares (array) {
  // Variable para guardar los pares
  const pares = []
  // Recorro el array entero
  for (const v of array) {
    // Si el valor que se guarda en v es par
    if (v % 2 == 0) {
      // Lo añado al array de pares
      pares.push(v)
    }
  }
  return pares
}

// Función que nos sume las posiciones pares por un lado
// Y las impares por otro
// Nos devuelve un array con [pares,impares]
function sumaPosiciones (array) {
  let pares = 0
  let impares = 0
  for (let i = 0; i < array.length; i++) {
    console.log('Posicion: ' + i + ' y valor: ' + array[i])
    if (i % 2 == 0) {
      // La posición es par
      pares += array[i]
    } else {
      // La posición es impar
      impares += array[i]
    }
  }
  console.log(pares + ',' + impares)
  return [pares, impares]
}

Tres maneras de hacer lo mismo



// Bien
function tamany (array) {
  return array.length
}

// Regular
function tamany2 (array) {
  let cont = 0
  for (const v of array) {
    cont++
  }
  return cont
}

// Mal
function tamany3 (array) {
  let p = 0
  let i = 0
  for (let n = 0; n < array.length; n++) {
    if (array[n] % 2 == 0) {
      p++
    } else {
      i++
    }
  }
  return p + i
}

Otras funciones de array


const a = [1, 2, 3, 4]
const b = [5, 6, 7]
const c = [8, 9, 10]

// indexOf tiene el mismo comportamiento que en cadenas
console.log(a.indexOf(2))
console.log(a.indexOf(23))

// concat nos concatena diferentes arrays
const z = a.concat(b, c)
console.log(z)

// slice que nos devuelve partes de un array igual que en cadenas
// Ojo: Nos hace una copia

const y = z.slice(3, 7) // me coge los elementos de z de 3 al 7 y nos los copia en y
console.log(y)

const copiadeA = a.slice()

console.log(copiadeA)
a.pop()
console.log(copiadeA)

// Splice nos permite quitar y añadir elementos en un array
// (posición, elementos a eliminiar (cantidad), Elementos a añadir)
const fruits = ['Banana', 'Orange', 'Apple', 'Mango']
// En la posición (2) quítame (1) elemento y mete 'lemon' y 'kiwi'
fruits.splice(2, 1, 'Lemon', 'Kiwi')

fruits.sort()
console.log(fruits)

const r = [5, 1, 8, 2, 9, 3]
r.sort()
console.log(r)

const t = ['11', '2', '213', '9']
t.sort()
console.log(t)

// sort permite usar una función propia de ordenación
// OJO: avanzado no hace falta entender
t.sort(function (a, b) { return parseFloat(a) - parseFloat(b) })
console.log(t)

// Truco para desordenar
t.sort(function (a, b) { return 0.5 - Math.random() })
console.log(t)

t.reverse()
console.log(t)

// Otra manera de recorrer un array utilizando for.. of
for (const v of t) {
  console.log(v)
}

for (let i = 0; i < t.length; i++) {
  console.log(t[i])
}
// valor va cogiendo uno por uno los valores de fruits
for (const valor of fruits) {
  console.log(valor)
}

// Se puede usar para recorrer si solo necesitamos los valores
let suma = 0
for (const n of r) {
  suma += n
}
console.log(suma)

Copia de valor y referencia

https://medium.com/laboratoria-developers/por-valor-vs-por-referencia-en-javascript-de3daf53a8b9


const frutas = ['manzana', 'pera', 'kiwi']

const frutas2 = frutas // NO SE COPIA EL VALOR SE COPIA LA REFERENCIA Se apunta al mismo sitio
// Tanto frutas como frutas 2 son como una flecha que apunta al mismo contenido
// Si yo cambio fruta, también cambio fruta2
// Se suele decir que necesitamos 'clonar' el array

console.log(frutas)
console.log(frutas2)

frutas.push('melón')
console.log(frutas)
console.log(frutas2)

let a = 20
const b = a // Copiar el valor

a++
console.log(a) // 21
console.log(b) // 20

// a |20|

// frutas es un puntero al contenido del array
// frutas2=frutas lo que copio es la dirección no el contenido

const a = [1, 2, 3, 4]
console.log(sumaArray(a))
console.log(a)

// Esta función nos suma el array pero también nos lo destruye
// Porque no se pasa una copia se pasa el propio array
// la REFERENCIA al array. Mucho cuidado con esto
function sumaArray (array) {
  let suma = 0
  while (array.length > 0) {
    suma += array.pop()
  }
  return suma
}

// SOlución

function sumaArrayBien (array) {
  let suma = 0
  const copia = array.slice()
  while (copia.length > 0) {
    suma += copia.pop()
  }
  return suma
}

function sumaSinModificacion (array) {
  let suma = 0
  for (const v of array) {
    suma += v
  }
  return suma
}

Mini ejercicio arrays

Al darle al botón contar que nos diga el número de nombres que nos han introducido

<div class="container ">
		<div class="form-group">
			<label for="cadena">Nombre:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="posicion"></h1>
		<button type="button" class="btn btn-success" onclick="buscar()">Añadir</button>
		<button type="button" class="btn btn-success" onclick="contar()">Contar</button>
		<script src="js/test.js"></script>
		</form>
	</div>

const nombres = []
function buscar () {
  const nombre = document.getElementById('cadena').value
  nombres.push(nombre)
  console.log(nombres)
}

function contar () {
  document.getElementById('posicion').innerHTML = nombres.length
}