Tutorial de JavaScript : Conceptos

El método splice permite eliminar componentes, insertar componentes o eliminar e insertar componentes en forma simultánea.

Borrar

Veamos primero como podemos utilizar éste método para borrar elementos. Para borrar elementos debemos indicar dos parámetros al método splice, el primero indica a partir de que posición procedemos a borrar componentes y el segundo parámetro indica la cantidad de componentes a borrar.

Veamos con un ejemplo como eliminamos 3 componentes del vector a partir de la segunda componentes:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        document.write('Vector inicial<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.splice(1, 3);
        document.write('Vector luego de borrar<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

Por pantalla obtenemos como resultado:

Vector inicial
0
1
2
3
4
5
6
7
8
9
Vector luego de borrar
0
4
5
6
7
8
9

Con la llamada al método splice:

  vec.splice(1,3);

estamos indicando que a partir de la componente de la posición 1 (recordemos que los vectores se enumeran a partir de cero) proceda a eliminar 3 componentes.

Otra cosa que hay que tener en cuenta que el método splice retorna un vector con los elementos borrados, luego si queremos podemos guardar esa referencia:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        document.write('Vector inicial<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        let vec2 = vec.splice(1, 3);
        document.write('Elementos extraídos<br>');
        for (let f = 0; f < vec2.length; f++) {
            document.write(vec2[f] + '<br>');
        }
    </script>

</body>

</html>

El resultado es:

Vector inicial
0
1
2
3
4
5
6
7
8
9
Elementos extraídos
1
2
3

Podemos indicar un valor negativo y el posicionamiento se cuenta desde el final del vector, por ejemplo si queremos eliminar los dos últimos elementos del vector luego debemos codificar:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        document.write('Vector inicial<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.splice(-2, 2);
        document.write('Eliminados los dos últimos elementos<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

El resultado en pantalla es:

Vector inicial
0
1
2
3
4
5
6
7
8
9
Eliminados los dos últimos elementos
0
1
2
3
4
5
6
7

Insertar

Veamos ahora como procedemos a insertar valores dentro del vector. Debemos pasar como mínimo 3 o más parámetros. Los dos primeros cumplen la misma función que cuando borramos (pero en este caso pasamos un cero en el segundo parámetro) y del tercer parámetro en adelante se indican los valores a insertar en el vector.

Codificaremos un programa que inserte los valores 10,20,30,40 a partir de la segunda componente:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        document.write('Vector inicial<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.splice(1, 0, 10, 20, 30, 40);
        document.write('Vector luego insertar 4 valores<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

El resultado por pantalla es:

Vector inicial
0
1
2
3
4
5
6
7
8
9
Vector luego insertar 4 valores
0
10
20
30
40
1
2
3
4
5
6
7
8
9

En esta llamada al método splice indicamos que a partir de la posición 1 del vector borre cero componentes e inserte los valores 10,20,30 y 40:

  vec.splice(1,0,10,20,30,40);

Borrar e insertar

La tercer posibilidad que nos presenta este método es en el mismo momento que borramos elementos procedemos a insertar otros.

Para probar el borrar e insertar en forma simultánea confeccionaremos un programa que borre desde la posición 1 tres elementos e inserte otros cinco elementos:

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <script>
        let vec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        document.write('Vector inicial<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
        vec.splice(1, 3, 10, 20, 30, 40, 50);
        document.write('Vector luego de borrar 3 elementos e insertar otros 5 valores<br>');
        for (let f = 0; f < vec.length; f++) {
            document.write(vec[f] + '<br>');
        }
    </script>

</body>

</html>

El resultado por pantalla es:

Vector inicial
0
1
2
3
4
5
6
7
8
9
Vector luego de borrar 3 elementos e insertar otros 5 valores
0
10
20
30
40
50
4
5
6
7
8
9

Array: método splice

Retornar