Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 60
Visitas el mes pasado: 71
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En javascript los arrays son considerados como una clase de objetos, por lo que tienen también sus propiedades y sus métodos, algunos de los cuales comparten con el objeto String, o las cadenas de texto. De hecho para crear un nuevo array podemos hacerlo también tal como se hace para crear un objeto, tal como vimos en la página 4.2 Arrays.
nuevoArray = new Array()
En esa página ya se explicó como se trabaja con arrays. ahora veremos los métodos y propiedades de los arrays, los cuales en algunos aspectos son similares a los del objeto String.
La única propiedad predefinida del objeto Array es length
, la cual ya
hemos visto en páginas anteriores. La propiedad length
indica el número
de elementos que posee el array. Ejemplo:
new vocales = ["a","e","i","o","u"];
numVocales = vocales.length
En este ejemplo extraemos el número de elementos que tiene el array en la
variable numVocales
, la cual será igual a 5.
Observese que aunque los elementos del array se extraen empezando a
numerarlos por el 0, la propiedad length
los cuenta empezando por
el numero 1.
Como hemos visto en páginas anteriores el objeto String (cadenas de textos),
también tiene la propiedad length
, la cual cuenta el número de
caracteres del texto.
Al ver las cadenas de texto ya vimos el método split()
, que convertía
una cadena de texto en un array. El primero de los métodos que vemos ahora hace justamente
lo contrario:
join()
texto = miArray.join("separador")
: Convierte un array en una cadena de texto. Dentro
del paréntesis le pondremos como parámetro el "separador" es decir el caracter o
texto que aparecerá entre los elementos del array. Si no pasamos nada, el separador
será la coma. Tomando el array del ejemplo anterior, podemos transformarlo en una cadena
mediante:
lasVocales = vocales.join(" "); //lasVocales = "a e i o u"
reverse()
inverso = miArray.reverse()
: invierte el orden de los elementos del array.
siguiendo con el ejemplo anterior sería:
alReves = vocales.reverse();
El array alReves
es igual a ["u","o","i","e","a"]
.
slice()
porcion = miArray.slice(num1,num2)
: Devuelve una porción de un array, indicada
por los números que le pasamos como parámetros. El num1
indica el principio
del trozo elegido, para ello los elementos se empiezan a contar desde 0. El num2
indica el final, y este elemento no está incluido
en el nuevo array que se forma. Si se omite el último elemento el nuevo array llega
hasta el final. El ejemplo es el siguiente:
porcion = vocales.slice(1,4);
El nuevo array porcion
sería: ["e","i","o"]
.
pop()
ultimo = miArray.pop()
: Elimina el último elemento del array original,
y lo devuelve en la variable que se le asigna, así pues veamos el siguiente ejemplo:
var miArray = [1,2,3,4];
ultimo = miArray.pop()
Ahora el array MiArray == [1,2,3]
y la variable ultimo == 4
push()
miArray.push("elemento")
: añade un elemento
al array original,
el cual lo hemos pasado dentro del paréntesis. El elemento se coloca después del último,
modificando el array en un elemento más. veamos el siguiente ejemplo:
var miArray = [1,2,3];
miArray.push(4)
Ahora el array MiArray == [1,2,3,4]
shift()
primero = miArray.shift()
: Elimina el primer elemento del array original,
y lo devuelve en la variable que se le asigna, así pues veamos el siguiente ejemplo:
var miArray = [1,2,3,4];
primero = miArray.shift()
Ahora el array MiArray == [2,3,4]
y la variable primero == 1
unshift()
miArray.unshift("elemento")
: añade un elemento
al array original,
el cual lo hemos pasado dentro del paréntesis. El elemento se coloca antes del primero,
modificando el array en un elemento más. veamos el siguiente ejemplo:
var miArray = [1,2,3];
miArray.unshift(0)
Ahora el array MiArray == [0,1,2,3]
concat()
array3 = array1.concat(array2)
: crea un nuevo array consistente en la
suma del array1
, al que se le aplica el método, con el array2
,
que lo pasamos como parámetro en el paréntesis. El array2
coloca sus
elementos después de los del array1
, de forma similar al método concat()
para cadenas de textos. Veamos un ejemplo:
var array1 = [1,2,3,4];
var array2 = [7,8,9,10];
var array3 = array1.concat(array2);
El array3
será: [1,2,3,4,7,8,9,10]
.
sort()
ordenado = miArray.sort()
: Ordena alfabéticamente los elementos de
un array; El problema está en que en españól no tiene en cuenta la eñe ni las
vocales acentuadas, las cuales las pone al final. Ejemplo:
miArray = ["e","c","a","b","d"];
ordenado = miArray.sort()
El array ordenado
sera : ["a","b","c","d","e"]
La siguiente página de ejemplo muestra el resultado de aplicar varios de los métodos anteriores. Este es su código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Métodos para arrays</title> <style type="text/css"> #caja { width: 500px; border: 1px solid black; float: right; min-height: 100px; } </style> <script type="text/javascript"> function dias() { semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sabado", "domingo"]; } function cadena() { //metodo join() dias(); miSemana = semana.join(" - "); explicar = "Metodo join: convierte un array en cadena de texto. <br/>"; texto = document.getElementById("caja"); texto.innerHTML = explicar + miSemana; } function elInverso() { //método reverse() dias(); inverso = semana.reverse(); texto = "array inverso con el método reverse(). <br>"; escribir(texto, inverso); } function porcion() { //metodo slice() n1 = document.lasemana.num1.value; n2 = document.lasemana.num2.value; n1--; dias(); miPorcion = semana.slice(n1,n2); texto = "metodo slice(): Porción del array elegida:<br/>"; escribir(texto, miPorcion); } function quitar() { //método shift() dias(); quitado = semana.shift(); texto1 = "metodo shift(): quitar el primer elemento: <br/>"; escribir(texto1, semana); texto.innerHTML += "<br/> el elemento eliminado es: " + quitado; } function ordenar() { //método sort() dias(); orden = semana.sort(); texto1 = "método sort(): ordenar alfabéticamente.<br/>";; escribir(texto1,orden) } function escribir(intro,elArray) { //escribir resultados en la página. texto = document.getElementById("caja"); texto.innerHTML = intro; for (i in elArray) { texto.innerHTML += elArray[i]+ " "; } } </script> </head> <body> <h1>Métodos para arrays</h1> <div id="caja"></div> <p>A partir del siguiente array vamos a ver varios métodos:</p> <p><tt> semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sabado", "domingo"]</tt></p> <form action="#" name="lasemana"> <p>metodo joint(): convertir el array en una cadena de texto: <input type="button" onclick="cadena()" value="convertir a texto" /></p> <p>Metodo reverse(): invierte el orden del array: <input type="button" onclick="elInverso()" value="invertir orden" /></p> <p>Metodo slice(): obtener una porcion del array. Escribe dos números del 1 al 7:</p> <p><input type="text" name="num1" maxlength="1" size="1" /> : primer número ... <input type="text" name="num2" maxlength="1" size="1" /> : segundo número <input type="button" onclick="porcion()" value="Ver días seleccionados." /></p> <p>método shift: Elimina el primer elemento y lo devuelve en otra variable.</p> <p><input type="button" onclick="quitar()" value="Eliminar primer elemento" /> </p> <p>Método sort(): ordenar alfabeticamente: </p> <p><input type="button" onclick="ordenar()" value="en orden alfabético" /> </p> </form> </body> </html>
Puedes ver como queda esta página de ejemplo en tu navegador pulsando en el siguiente enlace:
En la siguiente tema veremos otras clases de objetos:
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com