Scribd
Cargar
168 vistas38 páginas

Tema 2.1 Caracteristicas de JavaScript

Este documento describe las características y generalidades de JavaScript. Explica que JavaScript es un lenguaje de programación ligero, interpretado, basado en prototipos y con tipado débil. Además, describe los tipos de datos, operadores, estructuras de control y más características del lenguaje. Finalmente, ofrece ejemplos de cómo ejecutar JavaScript en archivos internos y externos.

Cargado por

Carmen Felipe
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
168 vistas38 páginas

Tema 2.1 Caracteristicas de JavaScript

Este documento describe las características y generalidades de JavaScript. Explica que JavaScript es un lenguaje de programación ligero, interpretado, basado en prototipos y con tipado débil. Además, describe los tipos de datos, operadores, estructuras de control y más características del lenguaje. Finalmente, ofrece ejemplos de cómo ejecutar JavaScript en archivos internos y externos.

Cargado por

Carmen Felipe
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 38

Unidad 2.

1
Características de Javascript

1. Características Javascript
2. Ejecución de JavaScript
3. Generalidades de JavaScript
• Tipos de datos
• Operadores aritméticos
• Estructuras de control
• Condicionales
• Bucles
• Variables
• Constantes
• Template String
• ARRAYS
Unidad 2.1
Características de Javascript
Características Javascript

JavaScript es un lenguaje de programación :

• Ligero. está diseñado para ocupar poco espacio en memoria, es fácil de


implementar
y cuenta con una sintaxis y una semántica simples, por lo que se puede
aprender en poco tiempo.
• Interpretado: significa que se lee y se ejecuta cada línea de código de forma
secuencial, a contrario que los leguajes compilados cuyas líneas de código son
convertidas en su conjunto a lenguaje máquina para ser ejecutados
posteriormente.
• Basado en prototipos: trata de una variante de la programación orientada a
objetos no se crean instanciando clases sino clonando otros objetos o
creándolos directamente. Lo que debe recordarse de esta característica es que
en Javascript todo es un objeto.
• Case sensitive: es sensible a mayusculas y minúsculas, por lo que rojo, Rojo y
ROJO serán tres identificadores distintos.
Unidad 2.1
Características de Javascript
Características Javascript

• Débilmente tipado: el lenguaje no necesita conocer al detalle con qué tipo de


dato se está trabajando en cada momento. Es lo suficientemente inteligente para
deducirlo o realizar conversiones entre tipos de datos a lo largo de la ejecución
del programa.
• Multiparadigma: a diferencia de otros lenguajes, permite programar
aplicaciones
completas desde cero aplicando muy distintos paradigmas de programación.
• Monohilo: un único hilo de ejecución se encarga de realizar el trabajo de
interpretación del código, de forma que se dificultan los interbloqueos y se
favorece el uso de las llamadas asíncronas.
• Dinámico: el lenguaje es capaz de cambiar importantes características del
programa, como la estructura de un objeto o el tipo de una variable, mientras se
está ejecutando.
• Programación orientada a objetos: un modelo de programación mucho más
cercano al mundo real donde se modelan patrones a través de clases y se
instancian en forma de objetos. Los objetos se relacionan entre sí para alcanzar
los objetivos de las aplicaciones.
Unidad 2.1
Características de Javascript
Características Javascript

• Programación imperativa: un modelo de programación consistente en una


secuencia de instrucciones que determinan qué debe hacer la máquina en cada
momento paso a paso. Se centran en el «cómo» de la solución.
• Programación declarativa: un modelo de programación que consiste en
describir qué se quiere obtener al finalizar la ejecución del programa, en lugar de
cómo se quiere obtener. Se centran en el «qué de la solución.
Unidad 2.1
Características de Javascript
Ejecución de JavaScript
JavaScript interno
Se encierra entre etiquetas <script> y se inserta en cualquier parte del documento,
aunque suele ir entre etiquetas <head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert(“Hola Mundo");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

• Impide la reutilización de código


• Genera archivos HTML con excesivo código
• Hace incomprensible la ejecución de javaScript
Unidad 2.1
Características de Javascript
Ejecución de JavaScript
JavaScript en archivos externos
Incluir en un archivo externo de tipo JavaScript que los documentos HTML enlazan
mediante la etiqueta <script>. A partir de HTML 5 sólo es necesaria la propiedad src
Se recomienda enlazar los scripts al final del archivo HTML
Archivo .html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript" src="codigo.js">
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Archivo .js
alert(“Hola mundo”);//Podría usarse document.write ó console.log

• El código está mejor organizado


• Es reutilizable en varios archivos HTML
• El HTML es más fácil de leer sin grandes trozos de script en él
Unidad 2.1
Características de Javascript
Ejecución de JavaScript
Controladores de JavaScript en línea
Incluir fragmentos de JavaScript dentro del código HTML de la página:

<button onclick=“alert('Un mensaje de prueba') ">Pulsar</button>

Incluir fragmentos de JavaScript dentro del código HTML de la página, pero llamando
a funciones de un fichero js:
Archivo .html

<button onclick=“mostrar()">Pulsar</button>
Archivo .js
function crearParrafo() {
alert(“Hola mundo”);
}

NO Incluir JavaScript en los elementos HTML


Unidad 2.1
Características de Javascript
Generalidades javaScript
Sangría y presentación
La sangría en programación, es una manera de estructurar el código para hacerlo más
legible
Las instrucciones son priorizadas en varios niveles para desplazar a la derecha y crear
una jerarquía
function interruptor(elemId) {
var elem = document.getElementById(elemId);
if (elem.style.display == 'block') {
elem.style.display = 'none';
} else {
elem.style.display = 'block';
}
}

Los comentarios son anotaciones para explicar el funcionamiento de un script, una


instrucción o incluso un grupo de instrucciones. Los comentarios no interfieren con la
ejecución de un script
// para comentar una instrucción
comentario multilínea comienza con / * y termina con * /
Unidad 2.1
Características de Javascript
Generalidades javaScript

Tipos de datos (Objetos primitivos)

Operadores aritméticos
Operadores aritméticos
Operadores condicionales o de comparación
Operadores lógicos
Operadores de asignación

Estructuras de control

Condicionales

Bucles
Unidad 2.1
Características de Javascript
Generalidades javaScript

Javascript tiene seis tipos primitivos:

• Sin definir (undefined)  Cualquier variable no definida

• Nulo (null)  Sin contenido (no tiene instancia)

• Lógicos (boolean)  True/False

• Numérico (number)  Sólo se tiene un tipo de valor numérico

• Cadena (string)  Letras, números o caracteres especiales entre comillas

• Símbolo (symbol)  Valor único, no pueden ser convertidos a otros tipos (ES6)

• Todos los demás tipos son objetos (Object): Array, Date, Promise, etc
Unidad 2.1
Características de Javascript
Generalidades javaScript
Comprobar los tipos de datos

typeof  Para conocer el tipo del valor de una variable

var miFuncion = new Function("5+2")  typeof miFuncion devuelve 'function'


var forma = "redonda"  typeof forma devuelve 'string'
var tamano = 1  typeof tamano devuelve 'number'
hoy = new Date()  typeof hoy devuelve 'object'

instanceof  Permite conocer si un objeto determinado es una instancia de una


clase superior

color1=new String("verde")
color1 instanceof String // devuelve verdadero (true)
Unidad 2.1
Características de Javascript
Generalidades javaScript
Operadores aritméticos Operadores condicionales Operadores lógicos
+ Suma Igualdad y NO (NOT) !
== y !=
desigualdad
– Resta
Igualdad y Y (AND) &&
* Multiplicación desigualdad === y !==
/ División estricta (*) O (OR) ||

Resto de una Mayor y menor >y<


%
división (*) true si los operadores son
Mayor o igual y iguales y del mismo tipo
>= y <=
Operadores de asignación menor o igual

+= Ejecuta una suma y asigna el valor al operando de la izquierda


-= Ejecuta una resta y asigna el valor al operando de la izquierda
Ejecuta una multiplicación y asigna el valor al operando de la
*=
izquierda
/= Ejecuta una división y asigna el valor al operando de la izquierda
%= Ejecuta el módulo y signa el valor al operando de la izquierda
Unidad 2.1
Características de Javascript
Generalidades javaScript
Estructuras de control

if –else Ejecuta un bloque de instrucciones si la condición es verdadera y


otro en caso de falso
do-while Ejecuta una serie de instrucciones, al menos una vez, hasta que la
condición que se evalúa toma valor falso
while Ejecuta un bloque de instrucciones repetidamente mientras la
condición sea verdadera
for Ejecuta un bloque de instrucciones recorriendo el rango de
valores de forma secuencial hasta que la condición deja de
cumplirse
for await Crea un bucle que itera sobre objetos iterables asíncronos, así
como en iterables sincronizados
for … in Recorre las propiedades de un objeto
for … of Recorre los valores de un objeto
Unidad 2.1
Características de Javascript
Generalidades javaScript
Variables. Una variable de JavaScript puede contener un valor de cualquier tipo de
datos. Esta característica se denomina escritura dinámica
Declaración de variables JavaScript:
var  ámbito global. La variable es visible en el bloque en el que se define y en todas
las funciones que hay en él
var saludo='Hola Mundo';
function saludar(){
EJEMPLO1:
console.log(saludo);
}
Hola Mundo
saludar(); Esta variable es visible aquí
console.log('Esta variable es visible aquí también:también: Hola Mundo
'+saludo);

Pero la variable no es visible fuera del bloque: EJEMPLO2:


var saludo='Hola Mundo'; Hola Mundo
function saludar(){ Adiós
var saludofin = 'Adiós';
Esta variable es visible aquí
console.log(saludo);
console.log(saludofin); también: Hola Mundo
} Uncaught ReferenceError:
saludar(); saludofin is not defined
console.log('Esta variable sí es visible:'+saludo);
console.log('Esta variable no es visible:'+saludofin);
Unidad 2.1
Características de Javascript
Generalidades javaScript

Se pueden redeclarar variables. Dar otro valor a la variable, por lo que puede llegar a
producir errores de lógica en la aplicación

var saludar = 'Hola Mundo';


function saludarNoErr(){
var saludar = 'Otro Hola Mundo'; EJEMPLO3:
return saludar; Hola Mundo
}
console.log(saludar);

var nombre="Antonio";
var nombre="Luis"; EJEMPLO4:
console.log('Hola '+nombre); Hola Luis

letConst 1 2 3
Unidad 2.1
Características de Javascript
Generalidades javaScript
Variables
Esta situación cambia en ES6
let declara una variable de alcance local con ámbito de bloque
• Las variables declaradas son disponibles en el alcance de la función adjunta. Si no hay
una función adjunta, están disponibles globalmente
var nombre =‘Antonio’;
function saludarErr(){
let saludo = ‘Hola ‘ + nombre;
ReferenceError: saludo is not defined
return saludo;
}
console.log(saludo);

• No permite redeclalar variables


let nombre = 'Luis';
let nombre = 'Antonio'; Error en la declaración duplicada de la variable
console.log('Hola '+ nombre);
letConst 4 5
Unidad 2.1
Características de Javascript
Generalidades javaScript
Variables
let a nivel de bloque
//ES5
for(var i=0; i<10; i++){
console.log(i);
}
console.log('el último valor de i es '+i);

//ES6
for(let i=0; i<10; i++){
console.log(i);
}
console.log('el último valor de i es '+i);

//ES5 //ES6
var leng='javascript'; let lenguaje='javascript';
if(true){ if(true){
var leng='HTML5'; let lenguaje='HTML5';
console.log(leng); console.log(lenguaje);
} }
console.log(leng); console.log(lenguaje); letConst 6 7 8
//HTML5 HTML5 //HTML5 javascript
Unidad 2.1
Características de Javascript
Generalidades javaScript
Constantes
const crea una referencia de solo lectura a un valor
Las constantes son de ámbito de bloque, al igual que las variables definidas mediante la
instrucción let
• Las constantes no pueden ser reasignadas a un valor
• Una constante no puede ser re-declarada
• Una constante requiere un inicializador. Esto significa que las constantes deben
inicializarse durante su declaración
• El valor asignado a una variable const es inmutable
Por convección se acostumbra a definir en mayúscula los nombres de las constantes

const PI = 3.14; Assignment to constant variable


PI = 3.14159265;

const a nivel de bloque


if(true){
const NOMBRE = "Rosa"; ReferenceError: nombre is not defined
} letConst 9
console.log(NOMBRE);
Unidad 2.1
Características de Javascript
Generalidades javaScript
Constantes
Si le asignamos un objeto a una constante, éste no será totalmente inmutable ya que le
podremos cambiar los valores de sus propiedades y métodos. Lo mismo sucederá con
un array, al que le podremos ‘mutar’ el valor de cada uno de sus elementos
const OBJETO = {nombre:'Rosa'}; const OBJETO = {
OBJETO = {nombre:'Rosa',apellido:‘Garcia'}; name: 'David'
console.log(OBJETO.nombre); } Miguel
OBJETO.name = 'Miguel';
No se puede alterar la estructura de console.log(OBJETO.name);
un objeto. Dará error

Las propiedades del objeto en si se pueden modificar, añadir o borrar


const OBJETO = {nombre:'Rosa'};
OBJETO.apellido = 'Garcia';
console.log(OBJETO.nombre +' '+OBJETO.apellido);

La constante es el propio objeto, no sus propiedades. El objeto en sí está con mayúsculas


pero sus propiedades no, porque no son constantes.
letConst 10 11
Unidad 2.1
Características de Javascript
Generalidades javaScript
Constantes
Otra excepción son los arrays, ya que podremos añadir y eliminar elementos a un array
definido con const

const MISaLUMNOS = ['Antonio', 'Luis'];


MISaLUMNOS.push ('Pedro');
console.log (MISaLUMNOS);

Podemos congelar un objeto o array utilizando el método freeze que no nos


permitirá cambiar ni propiedades ni valores

const OBJETO = {nombre:'Rosa'};


const NUEVOoBJETO = Object.freeze(OBJETO);
NUEVOoBJETO.apellido = ‘Garcia';
console.log(NUEVOoBJETO.nombre) ;

letConst 12 13
Unidad 2.1
Características de Javascript
Template String  ES6

Cuando se trabaja con cadenas, puede ser algo tedioso por la concatenación de string y
variables
//ES5
var nombre = “Antonio";
var edad = “23";
var mensaje = “La persona “ + nombre + " tiene " + edad + “ años”;
console.log(mensaje);
//La persona Antonio tiene 23 años

En ECMAScript 6 es mucho más simple. Aparecen las Templates Strings: englobando la


cadena entre las comillas ` y dentro de la cadena debemos incluir las variables
antecedidas por $ y entre { }
//ES6
let nombre = “Antonio";
let edad = “23";
let mensaje = `La persona ${nombre} tiene ${edad} años`;
console.log(mensaje);
Templates
//La persona Antonio tiene 23 años
Unidad 2.1
Características de Javascript
Template String  ES6
Satos de líneas
//ES5
console.log(‘Template String de\n ES6’);

//ES6
console.log(‘Template String de
ES6’);

Interpolar expresiones (poniendo dentro de los corchetes la expresión o la operación


de cálculo):
console.log(`Template String de ES${1+5}`);
Usar una función para procesar una cadena de texto (como string se obtiene la cadena
como si fuese un array, u después cada una de las variables, en orden):
let nombre='Juan',edad='20';
function leerLiteral(string,valor1,valor2){
console.log(string);
console.log(valor1);
console.log(valor2);
}
leerLiteral`Hola mi nombre es ${nombre} y tengo ${edad} años`;
Templates
Unidad 2.1
Características de Javascript
Entrada y Salida en el navegador
Mensajes en la consola
Con el objeto console se pueden mostrar mensajes con diferente estética:
• Console.log(“Versión LOG de un mensaje por consola”);
• Console.info(“%cVersión INFO del mensaje número %d por consola”,”font-
weight:bold;”,2);
• Console.warm(“Versión WARM de un mensaje por consola”);
• Console.error(“Versión ERROR de un mensaje por consola”)
Al comenzar una cadena por %c se le establece un css personalizado. Si en cualquier
cadena aparece %d se sustituye por un valor numérico que aparece a continuación, y
si aparece %s por una cadena.
Mensajes de confirmación

let respuesta=confirm(“¿Estás seguro de querer eliminar?”);


Console.log(`Respuesta del cuadro de diálogo: ${respuesta}`);
Unidad 2.1
Características de Javascript
Entrada y Salida en el navegador

Mensajes de entrada

let respuesta=prompt(“Para eliminar escribe ELIMINAR”);


Console.log(`El usuario escribió: ${respuesta}`);

Mensajes de alerta

alert(“Mensaje de alerta”);

OJO!!! Los mensaje de alerta, cuadros de confirmación y mensajes de entrada son útiles
para el aprendizaje, pero son cosas del pasado
Unidad 2.1
Características de Javascript
Arrays

Crear un array
Puede usarse cualquiera de estas tres modalidades:

let array1=new Array();


let array2=Array();
let array3=[];

En los tres se crea un array sin elementos.


A partir de la primera variante:
let array1=new Array(2);//crea un array con dos elementos sin especificar
let array2=new Array(3,4);//crea un array con dos elementos: 3 y 4
let array3=new Array (“Luis”); //crea un array con el elemento “Luis”

Ocurriría igual si se omitiese la palabra reservada new.

Usando la tercera variante:


let array1=[2];//crea un array con un elemento: 2
let array2=[1,3];//crea un array con dos elementos: 1 y 3
let array3=[“Luisa”]; //crea un array con el elemento “Luisa”
Unidad 2.1
Características de Javascript
Arrays

Partimos de la creación de un array edades, de cualquiera de esta forma:


let edades=new Array(18,21,34,12,92);
let edades=Array(18,21,34,12,92);
let edades=[18,21,34,12,92];

El contenido del array se puede ver de este modo:


Console.log(edades);

Se muestra: su estructura, contenido, longitud


(nº de elementos del array) y posición que
ocupa cada elemento

Para acceder al primer elemento y cambiarle el valor: Edades[0]=111;

Crear array con elementos desconocidos:


Let procesadores=[“Intel”,,”AMD”];
Unidad 2.1
Características de Javascript
Arrays

Crear array bidimensional:


let tablaNotas=[[,,],[,,]]; //cada nivel de anidamiento de corchetes indica
una dimensión del array, y el número de elementos separadospor comas es el
número de elementos de esa dimensión

Para almacenar valores:


tablaNotas[0][0]=1; //Fila 0-Columna 0
tablaNotas[0][1]=2; //Fila 0-Columna 1
tablaNotas[0][2]=3; //Fila 0-Columna 2
tablaNotas[1][0]=4; //Fila 1-Columna 0
tablaNotas[1][1]=5; //Fila 1-Columna 1
tablaNotas[1][2]=6; //Fila 1-Columna 2

Pero esta forma de crear arrays es bastante engorrosa. Es más útil con new:
let tablaNotas=new Array(2);
tablaNotas[0]=new Array(3);
tablaNotas[1]=new Array(3);

A partir de ahí, se rellenan los valores como antes.


Unidad 2.1
Características de Javascript
Arrays

Recorrer array:
let precios=[20,12,35,76,54];
For(let i=0;i<precios.lenght;i++)
{
console.log(`El precio ${i} es:${precios[i]}`);
}

Asignación de arrays:
Let sinIVA=[20,30,40];
Let conIVA=sinIVA;
conIVA[0]=10;
Console.log(sinIVA);//[10,30,40]
Console.log(conIVA); //[10,30,40]

Esto es porque los arrays apuntan al espacio donde se almacenan los datos.
Adición de elementos a un array:
conIva.push[100];//añade elemento al final. Permite añadir varios valores
conIva.unshift[100];//añade elemento al principio. Permite añadir varios valores
Unidad 2.1
Características de Javascript
Arrays

Eliminación de elementos a un array:


conIva.shift();//elimina el primer elemento
conIva.pop();//elimina el último elemento

Al modificarse la propiedad lenght se eliminan aquellos elementos que quedan fuera


de la longitud del array.
Concatenación de arrays:
Let extendido=array1.concat(array2);

Copia de arrays:
Let completo=array1.slice(); //copia el array completo
Let parcial=array1.slice(2,4); //copia de la posición 2 a la 4 del array1
Unidad 2.1
Características de Javascript
Arrays

Búsqueda elementos array:


IndexOf: devuelve la posición que ocupa el primer elemento encontrado o -1 si no lo
encuentra. También permite indicar a partir de qué posición quiere buscar.
Let pajar=[1,2,3,4,5,2,6];
Let resultado=pajar.indexOf(2);//Devuelve 1
Let resultado2=pajar.IndexOf(2,3);//Devuelve 5

lastIndexOf: igual que el anterior, pero trabajando desde el extremo derecho del array.
includes: devuelve true si se ha encontrado una coincidencia y false en caso contrario.
Let resultado3=pajar.includes(3);//devuelve true

Ordenación de arrays:
Let vector=[7,2,3,4,5,1,6];
Vector.sort();// vector-[1,2,3,4,5,6,7]
Let vector=[7,2,3,4,5,1,6];
Vector.reverse();// vector-[7,6,5,4,3,2,1]

OJO con el orden de caracteres, que sigue la tabla UNICODE (mayúsculas, ñ…


Unidad 2.1
Características de Javascript
Arrays

Otras formas de recorrer un array:

For in
Let precios=[60,12,99,35,76];
for (let i in precios){//no es necesario inicializar el contador ni incrementarlo
console.log(`El precio ${i} es:${precios[i]}`);
}

For of: simplifica más el proceso, ya que ni siquiera se utiliza una variable para iterar
por posición, ya que se realiza automáticamente. Desventaja: se desconocen los
índices y que en la salida se muestran los elementos vacíos
let precios=[60,12,99,35,76];
for (let precio of precios){
console.log(precio);
}

forEach: Se verá más adelante con las funciones


Unidad 2.1
Características de Javascript
Conjuntos
Los conjuntos o sets son estructuras de datos parecidas a los arrays, pero que no
permiten valores duplicados. Previene esa duplicidad de forma automática.
Crear un conjunto: usando new, ya que se trata de un objeto
Let conjunto=new Set();

Para indicarle, desde su declaración, los elementos que lo componen inicialmente, hay
que pasarle un objeto de tipo iterable (array, map, string, set…)
Var conjunto1=new Set([34,1,”Girasol”,25.9]);
Var conjunto2=new Set(“cadena”);

Automáticamente ha
eliminado los elementos
duplicados
Recorrido: con for of

For (let elemento of conjunto1){


console.log(elemento);
}
Unidad 2.1
Características de Javascript
Conjuntos
Adición de elementos: con add
let conjunto=new Set();
conjunto.add(7);
conjunto.add(“Samuel”).add(70).add(“hola”);
//conjunto{7,”Samuel”,70,”hola”}

Eliminación de elementos: delete, y devuelve true o false indicando el resultado de la


operación.
conjunto.delete(70);
//conjunto{7,”Samuel”,”hola”}

Para eliminar todos los elementos se usa clear


conjunto.clear();

Tamaño de un conjunto: size


Var conjunto=new Set().add(1).add(2).add(3).add(2);
console.log(conjunto.size);
//3
Unidad 2.1
Características de Javascript
Conjuntos
Búsqueda de un elemento: has. Devuelve true si se ha encontrado el elemento
Var conjunto=new Set().add(1).add(2).add(3).add(2);
If (conjunto.has(3))
console.log(“Encontrado”);

Conversiones: al principio, vimos cómo se creaba un conjunto a partir de un array,


pero se puede hacer la conversión al revés. Se una el operador de arrastre, de
propagación o spread (…)

Var conjunto=new Set().add(1).add(2).add(3).add(2);


Var vector=[…conjunto];
//vector[1,2,3];

Unión: con el operador spread:

Var array1=[10,20,30,40,50];
Var array2=[30,50,60,70,80];
Var array3=[60,70,80,90,100];
Var conjunto=new Set([…array1,…array2,…array3]);
//conjunto {10,20,30,40,50,60,70,80,90,100}
Unidad 2.1
Características de Javascript
Maps
Un mapa en Javascript es una estructura de datos nativa que permiten implementar una
estructura de tipo mapa, es decir, una estructuras donde tiene valores guardados a través
de una clave para identificarlos. Comúnmente, esto se denomina pares clave-valor.
Crear un mapa
let map = new Map(); // Mapa vacío
let map = new Map([[1, "uno"]]); // Map({ 1=>"uno" })
let map = new Map([[1, "uno"], [2, "dos"], [3, "tres"]]); // Map({ 1=>"uno",
2=>"dos", 3=>"tres" })

En el tercer caso se pasa un array de entradas, o array de array.


Recorrido de un mapa: for..of
let telefonos= new Map([
[666666666,”Elena”],
[655555555,”Mario”],
[644444444,”Marta”]
])
for(let persona of telefonos)
console.log(persona);
Esta forma no es muy útil para tratar datos por separado
Unidad 2.1
Características de Javascript
Maps
Para obtener en diferentes variables las claves y los valores:
for (let [teléfono,persona] of teléfonos)
console.log(`El teléfono de ${persona} es ${telefono}.`);

Además, si sólo se tiene que trabajar con las claves o con los valores, también se
pueden usar los métodos: keys y values

for(let telefono of telefonos.keys())


console.log(telefono);

for(let persona of telefonos.values())


console.log(persona);
Unidad 2.1
Características de Javascript
Maps
Adición de elementos: set
Var teléfonos= new Map();
Telefonos.Set(666111111,”Elena”);
Telefonos.Set(666111111,”Elena”).Set(622222222,”Mateo”);
Telefonos.Set(633111111,”Maria”).Set(622222222,”Marcos”);
Console.log(telefonos);

Eliminación de elementos: delete


telefonos.delete(666111111);

Búsqueda de elementos: has. Devuelve true si se encuentra, y false en caso contrario


If (teléfonos.has(666111111))
……..
Lectura de valores: get. Devuelve el valor a partir de una clave
Console.log(teléfonos.get(666111111));

Conversiones: se puede obtener un array a partir del contenido de un mapa: operador


spread Console.log([…teléfonos]);
Unidad 2.1
Características de Javascript
EJERCICIOS

1. Construye un conjunto a partir de un array que contiene los días de la semana. Utiliza
una instrucción para comprobar las estructura del conjunto en la consola
2. Crea un conjunto vacío y añádele todos los elementos de los arrays [12,12,12,14],
[11,11,13,15],[“i”,”j”,”k”,”l”] . ¿Cuántos elementos tiene el conjunto? ¿Por qué? Haz un
recorrido del conjunto, mostrando en pantalla cada uno de los elementos.
3. Utiliza los conceptos de conjuntos para eliminar los elementos duplicados de un array.
4. Crea un mapa vacío y añade los DNI de diez personas ficticias, usando el dni como
clave y el nombre como valor. A continuación, muestra en pantalla la lista de todos los
dni junto con el nombre de las personas. Modifica el nombre de la tercera persona y
vuelve a mostrar todos los datos en pantalla, para comprobar que la operación se ha
realizado correctamente.
5. Crea un mapa con cinco pares de elementos, de manera que tanto las claves como los
valores sean cadenas de caracteres. Luego ordena un mecanismo para ordenar
alfabéticamente los valores del mapa. Muestra el resultado en pantalla

También podría gustarte