Manejo de Arrays con métodos unshift ,shift y delete

El método shift extrae el primer elemento del vector y desplaza hacia delante el resto de elementos del vector. Así como el método push inserta un elemento al final del vector el método unshift inserta un elemento al principio del vector y desplaza el resto una posición.

Método shift()

El método shift() elimina el primer elemento de una matriz. El elemento de matriz eliminado de la matriz puede ser una cadena, un número, un array , un booleano o cualquier otro tipo de objeto permitido en un array matriz.

Nota: Este método cambia la longitud del array original , el valor de retorno del método de cambio es el elemento eliminado.

Consejo: Para eliminar el último elemento de una matriz, utilice el método pop () .

<!DOCTYPE html>
<html>
<body>
<p>Haga clic en el botón para eliminar el primer elemento de la matriz..</p>

<button onclick="myFunction()">Probar</button>

function myFunction() {
fruits.shift();
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>

Ver ejemplo anterior

unshift()

El método unshift () agrega nuevos elementos al comienzo de una matriz y devuelve la nueva longitud.

Nota: este método cambia la longitud de una matriz.

Consejo: Para agregar nuevos elementos al final de una matriz, use el método push () .

<!DOCTYPE html>
<html>
<body>
<p>Haga clic en el boton para agregar elementos al comienzo de la matriz.</p>
<button onclick="myFunction()">Probar</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Naranja", "Manazana", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
fruits.unshift("Limon", "Anana");

document.getElementById("demo").innerHTML = fruits;
}
</script>
<p><b>Nota:</b> El método unshift () no funciona correctamente en Internet Explorer 8 y versiones anteriores: los valores se insertarán, pero el valor de retorno no estará definido ..</p>
</body>

</html>

Ver ejemplo anterior

Ingresar valores por teclado. Los valores menores a 100 ingresarlos al principio del vector y los mayores o iguales a 100 ingresarlos al final. Se finaliza la carga de datos al ingresar el cero. Cuando sale del do/while extraer el último valor ingresado que es el cero del vector. Imprimir el vector en la página

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[];
var f;
var valor;
do {
valor=prompt('Ingresar un valor (0 para finalizar):','');
valor=parseInt(valor);
if (valor<100)
{
vec.unshift(valor);
}
else
{
vec.push(valor);
}
} while (valor!=0);
vec.shift();
for(f=0;f<vec.length;f++)
{
document.write(vec[f]+'<br>');
}
</script>

</body>
</html>

Ver ejemplo anterior

Si el valor es menor a 100 procedemos a llamar al método unshift que lo inserta al principio del vector en caso contrario se inserta al final mediante el método push:

if (valor<100)
{
vec.unshift(valor);
}
else
{
vec.push(valor);
}

Fuera del do/while procedemos a extraer el primer elemento del vector que es el cero:

vec.shift();

Finalmente procedemos a imprimir en forma completa el vector:

for(f=0;f<vec.length;f++)
{
document.write(vec[f]+'<br>');
}

Método delete

Dado que las matrices de JavaScript son objetos, los elementos se pueden eliminar mediante el operador de JavaScript delete . El uso de eliminar puede dejar huecos sin definir en la matriz. Utilice pop () o shift () en su lugar.

<!DOCTYPE html>
<html>
<body>

<p>

Eliminar elementos deja huecos indefinidos en una matriz.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
var fruits = ["Banana", "Narana", "Manazana", "Mango"];
document.getElementById("demo1").innerHTML =
"
El primer fruto es: " + fruits[0];
delete fruits[0];
document.getElementById("demo2").innerHTML =
El primer fruto es: " + fruits[0];
</script>
</body>
</html>

Ver ejemplo anterior

Javascript tiene una instrucción que permite eliminar un elemento de un vector llamada delete.

Al comando delete le pasamos el nombre del vector y la posición que queremos borrar:

delete vec[3];

Con el comando anterior estamos eliminando la componente de la posición 3 del vector. Cuando se elimina una componente no se modifica la propiedad length y el vector se convierte en no denso. Si luego tratamos de acceder a dicha posición el resultado es el valor undefined.

Crear un vector de 10 elementos y almacenar valores aleatorios en el mismo. Luego borrar los elementos de las posiciones pares e imprimir el vector antes y después de borrar las componentes, inclusive tratar de acceder a las componentes que acabamos de borrar.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<script>
var vec=[];
var f;
for(f=0;f<10;f++)
{
var valor=parseInt(Math.random()*1000);
vec.push(valor);
}
document.write('Vector antes de borrar<br>');
for(f=0;f<10;f++)
{
document.write(vec[f]+'<br>');
}
for(f=0;f<10;f=f+2)
{
delete vec[f];
}
document.write('Vector luego de borrar las posiciones pares<br>');
for(f=0;f<10;f++)
{
document.write(vec[f]+'<br>');
}
</script>

</body>
</html>

Ver ejemplo anterior

Creamos y cargamos el vector con 10 enteros aleatorios:

var vec=[];
var f;
for(f=0;f<10;f++)
{
var valor=parseInt(Math.random()*1000);
vec.push(valor);
}

Procedemos a borrar los elementos de las posiciones pares del vector utilizando el comando Javascript delete (veamos que dentro del for incrementamos f en 2 en cada vuelta del ciclo):

for(f=0;f<10;f=f+2)
{
delete vec[f];
}

Por último procedemos a mostrar el vector donde podemos comprobar que al tratar de acceder a componentes que se han eliminado el resultado es el valor undefined, el resultado completo de la ejecución del programa es:

Vector antes de borrar
931
354
246
876
802
980
957
307
998
640
Vector luego de borrar las posiciones pares
undefined
354
undefined
876
undefined
980
undefined
307
undefined
640