Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

11. Texto y Arrays (III)

11.3 El objeto Array

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.

Propiedades

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.

Métodos

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"]

Ejemplo de métodos para arrays

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:

Métodos para arrays

En la siguiente tema veremos otras clases de objetos:

Los objetos.

Página creada por ANYELGUTI.

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