Nuevos códigos y sintaxis de Js

MatMT · May 17, 2023 · 27be2e8 · 27be2e8
1 parent 36d92e7
commit 27be2e8
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 10 deletions.
diff --git a/27-SetsMapsSymbols/index.html b/27-SetsMapsSymbols/index.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <link href="https://fonts.googleapis.com/css2?family=Carrois+Gothic+SC&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css2?family=Carrois+Gothic+SC&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="../assets/css/style.css">
 </head>
+
 <body>
 
     <div class="contenido">
@@ -16,15 +18,16 @@ <h1>JavaScript Moderno</h1>
         <p class="hashtag">#JSModernoConJuan</p>
     </div>
 
-    <script src="js/01-app.js"></script> 
-    <script src="js/02-app.js"></script>
-    <script src="js/03-app.js"></script>
-    <script src="js/04-app.js"></script>
-    <script src="js/05-app.js"></script>
-    <script src="js/06-app.js"></script>
-    <script src="js/07-app.js"></script>
-    <script src="js/08-app.js"></script>
+    <!-- <script src="js/01-app.js"></script>  -->
+    <!-- <script src="js/02-app.js"></script> -->
+    <!-- <script src="js/03-app.js"></script> -->
+    <!-- <script src="js/04-app.js"></script> -->
+    <!-- <script src="js/05-app.js"></script> -->
+    <!-- <script src="js/06-app.js"></script> -->
+    <!-- <script src="js/07-app.js"></script> -->
+    <!-- <script src="js/08-app.js"></script> -->
+
 
-
 </body>
+
 </html>
diff --git a/27-SetsMapsSymbols/js/01-app.js b/27-SetsMapsSymbols/js/01-app.js
@@ -0,0 +1,20 @@
+const carrito = new Set();
+
+carrito.add('Camisa');
+carrito.add('Camisa 2');
+carrito.add('Camisa 3');
+
+carrito.forEach(producto => {
+    console.log(producto);
+})
+
+carrito.delete('Camisa');
+console.log(carrito.has('Camisa'));
+console.log(carrito);
+console.log(carrito.size);
+
+// Eliminar duplicados
+const numeros = [10, 20, 30, 40, 50, 10, 30];
+const noDuplicados = new Set(numeros);
+
+console.log(noDuplicados);
diff --git a/27-SetsMapsSymbols/js/02-app.js b/27-SetsMapsSymbols/js/02-app.js
@@ -0,0 +1,11 @@
+// WeakSet
+const weakset = new WeakSet();
+const cliente = {
+    nombre: 'Juan',
+    saldo: 100
+}
+
+weakset.add(cliente);
+// console.log(weakset.has(cliente));
+
+weakset.delete(cliente);
diff --git a/27-SetsMapsSymbols/js/03-app.js b/27-SetsMapsSymbols/js/03-app.js
@@ -0,0 +1,17 @@
+const cliente = new Map();
+
+cliente.set('nombre', 'Karen');
+cliente.set('tipo', 'Premium');
+
+// Evalua según llave
+console.log(cliente.has('nombre'));
+console.log(cliente.size);
+
+const paciente = new Map([['nombre', 'paciente'], ['cuarto', 'no definido']]);
+paciente.set('nombre', 'Antonio')
+
+console.log(paciente);
+
+paciente.forEach((datos, index) => {
+    console.log(index);
+});
diff --git a/27-SetsMapsSymbols/js/04-app.js b/27-SetsMapsSymbols/js/04-app.js
@@ -0,0 +1,11 @@
+const producto = {
+    idProducto: 10
+}
+const weakmap = new WeakMap();
+
+weakmap.set(producto, 'Monitor');
+console.log(weakmap.has(producto));
+console.log(weakmap.get(producto));
+console.log(weakmap.delete(producto));
+
+console.log(weakmap);
diff --git a/27-SetsMapsSymbols/js/05-app.js b/27-SetsMapsSymbols/js/05-app.js
@@ -0,0 +1,32 @@
+const sym = Symbol();
+const sym2 = Symbol();
+
+// if (sym === sym2) {
+//     console.log('Son iguales');
+// } else {
+//     console.log('Son diferentes');
+// }
+
+const nombre = Symbol();
+const apellido = Symbol();
+
+const persona = {};
+
+// Agrega el nombre y el apellido como las llaves del objeto
+persona[nombre] = 'Oscar';
+persona[apellido] = 'Elías';
+persona.tipoCliente = 'Premium';
+
+// console.log(persona[nombre]);
+// Las propiedades que utilizan mediante un symbol no son iterables
+for (let i in persona) {
+    console.log(i);
+}
+
+// Definir una descripción del Symbol
+const nombreCliente = Symbol('Nombre del Cliente');
+const cliente = {};
+
+cliente[nombreCliente] = 'Pedro';
+console.log(cliente[nombreCliente]);
+console.log(nombreCliente);
diff --git a/27-SetsMapsSymbols/js/06-app.js b/27-SetsMapsSymbols/js/06-app.js
@@ -0,0 +1,26 @@
+// Función que retorna función
+function crearIterador(carrito) {
+    let i = 0;
+
+    return {
+        siguiente: () => {
+            const fin = (i >= carrito.length);
+            const valor = !fin ? carrito[i++] : undefined;
+
+            return {
+                fin,
+                valor
+            }
+        }
+    }
+}
+
+const carrito = ['Producto 1', 'Producto 2', 'Producto 3'];
+
+// Utilizar el iterador
+const recorrerCarrito = crearIterador(carrito);
+
+console.log(recorrerCarrito.siguiente());
+console.log(recorrerCarrito.siguiente());
+console.log(recorrerCarrito.siguiente());
+console.log(recorrerCarrito.siguiente());
diff --git a/27-SetsMapsSymbols/js/07-app.js b/27-SetsMapsSymbols/js/07-app.js
@@ -0,0 +1,31 @@
+// Asterisco identificador
+function* crearGenerador() {
+    yield 1;
+    yield 'Oscar';
+    yield 3 + 3;
+    yield true;
+}
+
+const iterador = crearGenerador();
+
+// console.log(iterador);
+// console.log(iterador.next().value);
+// console.log(iterador.next());
+// console.log(iterador.next().value);
+// console.log(iterador.next());
+// console.log(iterador.next());
+// console.log(iterador);
+
+// Generador para carrito de compras
+function* generadorCarrito(carrito) {
+    for (let i = 0; i < carrito.length; i++) {
+        yield carrito[i];
+    }
+}
+
+const carrito = ['1', '2', '3'];
+const itera = generadorCarrito(carrito);
+console.log(itera.next());
+console.log(itera.next());
+console.log(itera.next());
+console.log(itera.next());
diff --git a/27-SetsMapsSymbols/js/08-app.js b/27-SetsMapsSymbols/js/08-app.js
@@ -0,0 +1,50 @@
+const ciudades = ['Londres', 'New York', 'Madrid'];
+const ordenes = new Set([123, 231, 131]);
+const datos = new Map();
+
+datos.set('nombre', 'Juan');
+datos.set('profesion', 'Desarrollo Web');
+
+// Default
+// for (let ciudad of ciudades) {
+//     console.log(ciudad);
+// }
+// for (let orden of ordenes) {
+//     console.log(orden);
+// }
+// for (let dato of datos) {
+//     console.log(dato);
+// }
+
+// Keys Iterator
+// for (let keys of ciudades.keys()) {
+//     console.log(keys);
+// }
+// for (let keys of ordenes.keys()) {
+//     console.log(keys);
+// }
+// for (let keys of datos.keys()) {
+//     console.log(keys);
+// }
+
+// Values Iterator
+// for (let value of ciudades.values()) {
+//     console.log(value);
+// }
+// for (let value of ordenes.values()) {
+//     console.log(value);
+// }
+// for (let value of datos.values()) {
+//     console.log(value);
+// }
+
+// Entries Iterator
+// for (let entry of ciudades.entries()) {
+//     console.log(entry);
+// }
+// for (let entry of ordenes.entries()) {
+//     console.log(entry);
+// }
+// for (let entry of datos.entries()) {
+//     console.log(entry);
+// }