function extremos(cadenas) {
let larga = cadenas[0];
let corta = cadenas[0];
for (let cadena of cadenas) {
if (cadena.length > larga.length) {
larga = cadena;
}
if (cadena.length < corta.length) {
corta = cadena;
}
}
return [corta, larga];
}
let alumnos = ["Ana", "Rodrigo", "Pepe"];
let [corto, largo] = extremos(alumnos);
console.log(corto);
console.log(largo)
let [mascorta] = extremos(alumnos);
let [, maslarga] = extremos(alumnos);
console.log(mascorta);
console.log(maslarga);
const myVehicle = {
brand: 'Ford',
model: 'Mustang',
color: 'red'
}
const updateMyVehicle = {
type: 'car',
year: 2021,
color: 'yellow'
}
const myUpdatedVehicle = { ...myVehicle, ...updateMyVehicle }
console.log(myUpdatedVehicle)
const nuevo = { ...myUpdatedVehicle, color: "pink" };
console.log(nuevo);
const noDesestructurado = { myVehicle, updateMyVehicle }
console.log(noDesestructurado)
const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [numbersOne, numbersTwo];
console.log(numbersCombined);
let miObjeto={nombre:"Ana",edad:20,mail:"a@a.com",apellido:"Pi"};
console.log(miObjeto)
let {a,b,c}=miObjeto;
console.log(a,b,c)
let aa,bb;
[aa,bb]=[1,2,3];
console.log(aa,bb)
let nombre,edad;
// {nombre,edad}=miObjeto; Esto da error
({nombre,edad}=miObjeto); // Hay que ponerlo enter paréntesis
console.log(nombre,edad)
// o usar let
let {mail}=miObjeto;
console.log(mail)
let {mail:email}=miObjeto; // recupero la propiedad mail pero la renombro a email
console.log(email)
let {sueldo=1000}=miObjeto; // Como sueldo no existe coge el valor por defecto
console.log(sueldo)
let propiedadABuscar='apellido';
let {[propiedadABuscar]:prop}=miObjeto; // Siempre tenemo que poner un 'alias', en este caso prop
console.log(prop);
function saludo(nombre,apellidos){
console.log("Hola "+nombre+" "+apellidos);
}
saludo(miObjeto.nombre,miObjeto.apellido);
function saludoDesestructurado({nombre,apellido}){
console.log("Hola "+nombre+" "+apellido);
}
saludoDesestructurado(miObjeto);
The JavaScript destructuring assignment syntax is expressive, compact and more readable that makes it possible to “destructured” (upwarp) values from arrays or properties from objects, into different variables.
We can use JavaScript Destructuring in so many different ways.
TLDR;
#1 Array destructuring
Array destructuring is very much similar and straight forward, you can use an array literal on the left-hand-side of an assignment expression. Each variable name on the array literal maps to the corresponding item at the same index on the destructured array.
You can assign a variable value via destructuring separate from the variable’s declaration. For example:- first, you declare the variables then you assign separately.
// declare the variables
let a, b;
// then you assign separately
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
#1.3 Default values
You can also set a default value if the unpacked value is undefined
let a, b;
// setting default values
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7
In the above example, we are setting the default values to a and b. In that case if a or b values are undefined it will assign default values 5 to a and 7 to b
#1.4 Swapping variables
It is possible to swap two variables in one destructuring expression. Isn’t that cool?
let a = 1;
let b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
If you want to swap variables without destructuring it is going to require a temporary variable or XOR swap algorithmbut with destructuring
Like objects, you can also do nested destructuring with arrays. Here is an example below
const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255
#2 Object destructuring
#2.1 Basic Object destructuring
let x = {y: 22, z: true};
let {y, z} = x;
console.log(y); // 22
console.log(z); // true
#2.2 Assignment without declaration
You can assign variables using destructuring without separating it from its declaration. It means you don’t have to create a x variable in the above example.
let y, z;
({y, z} = {y: 1, z: 2});
Note: The parentheses ( ... ) around the assignment statement are required when using object literal destructuring assignment without a declaration.
{a, b} = {a: 1, b: 2} is not valid stand-alone syntax, as the {a, b} on the left-hand side is considered a block and not an object literal.
However, ({a, b} = {a: 1, b: 2}) is valid, as is var {a, b} = {a: 1, b: 2}
Your ( ... ) expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.
Syntax is the same for all destructuring assignment, but on the left-hand side of the assignment to define what values to unpack from the sourced variable. For Example:-
let x = [1, 2, 3, 4, 5];
let [y, z] = x;
console.log(y); // 1
console.log(z); // 2
<button id="boton">Pincha para saber algo más los perros</button>
<h1 id="frase"></h1>
<script src="js/ejercicio4.js"></script>
// Enlazar el click del botón a mi código onclick, addeventlistener
document.getElementById("boton").addEventListener("click", function () {
// En el click: llamar a la url https://dog-api.kinduff.com/api/facts
// ¿Cómo? con la chuleta
// Una vez tengo la información:
fetch("https://dog-api.kinduff.com/api/facts")
.then(response => response.json())
.then(resultado => {
// 1) Recuperar la frase
// 2) Ponerla en el html
let frase = resultado.facts[0];
document.getElementById("frase").innerHTML = frase;
})
})
fetch("https://randomuser.me/api")
.then(response => response.json())
.then(resultado => {
// Aqui 'resultado' tiene ya el json convertido a variable, la podemos usar
console.log(resultado);
// Llamo a una función con el usuario devuelto
pintaUsuario(resultado.results[0]);
})
function pintaUsuario(usuario) {
let nombre=document.getElementById("name");
let email=document.getElementById("email");
let foto=document.getElementById("foto");
nombre.innerHTML=Object.values(usuario.name).join(" ");
email.innerHTML=usuario.email;
foto.src=usuario.picture.large;
}
// Consumir API -> Acceder a una API para recuperar valores
// AJAX: Una manera de acceder a una URL de manera asíncrona
// Ahora como se hace con 'fetch'
// Chuleta para recuperar cualquier cosa de una url que devuelve un JSON
/*
fetch(url_donde_esta_la_informacion)
.then(response => response.json())
.then(resultado => {
// Aqui 'resultado' tiene ya el json convertido a variable, la podemos usar
})
*/
// Asíncrono y una promesa (Promise)
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json()) // Cuando acabes lo que te he pedido ejecuta esto
.then(json => console.log(json)); // Cuando acabes de convertirlo entra aquí
console.log("Hola");
// Ejemplo voy a usar https://randomuser.me/api que me devuelve un usuario
fetch("https://randomuser.me/api")
.then(response => response.json())
.then(resultado => {
// Aqui 'resultado' tiene ya el json convertido a variable, la podemos usar
console.log(resultado);
console.log("Hola "+resultado.results[0].name.first);
})
// Ejemplo voy a usar https://rickandmortyapi.com/api/character que me devuelve personajes de rick y morty
fetch("https://rickandmortyapi.com/api/character")
.then(response => response.json())
.then(resultado => {
// Aqui 'resultado' tiene ya el json convertido a variable, la podemos usar
console.log(resultado);
})
// El formato JSON me permite convertir cualquier variable JS en una cadena
// un array es una cadena con corchetes y los elementos "[1,2,3]"
// un objeto es una cadena con llaves y las propiedades entre comillas
// {"nombre":"Juan","apellidos":Pi}
// cualquier combinación no es más que combinar lo anterior
// {"nombre":"Juan","apellidos":Pi, "notas":[1,2,3]}
// De variable a cadena con JSON.stringify
// De cadena a variable con JSON.parse
let alumnos=["Ana","Eva","Pep"]; // Esto es un array
let alumnosJSON=JSON.stringify(alumnos); // Esto es una cadena
console.log(alumnos);
console.log(alumnosJSON);
// De la cadena puedo volver a obtener el array
let alumnosCopia=JSON.parse(alumnosJSON);
console.log(alumnosCopia); // Es un array
let clase={nombre:"Aula 1",capacidad:30,alumnos:["Ana","Eva","Juan"]};
let claseJSON=JSON.stringify(clase);
console.log(clase); // Esto es un objeto
console.log(claseJSON); // Esto es un string
let claseCopia=JSON.parse(claseJSON);
console.log(claseCopia); // Esto es un objeto de nuevo
let nombre = document.getElementById("nombre");
nombre.oninput = function () {
localStorage.setItem("nombre", this.value);
}
let nombreAlmacenado = localStorage.getItem("nombre");
if (nombreAlmacenado) {
nombre.value = nombreAlmacenado;
}
// Guardar información que se mantenga aunque actualicemos la página
// cookies es una manera pero están obsoletas
document.cookie="nombre=juan";
// La mejor manera actualmente es con localStorage
// Añado una propiedad 'nombre' con el valor 'juan'
localStorage.setItem("nombre","juan");
// Recupero ese valor
console.log(localStorage.getItem("nombre"));
// Elimino la propiedad (y, por supuesto, su valor)
localStorage.removeItem("nombre")
// Limpio todo el localstorage
localStorage.clear();