Cómo usar los métodos de matriz de JavaScript slice() y splice()

Cómo usar el método de matriz JavaScript slice ()

Él slice() se puede usar para hacer una copia de una matriz o para devolver parte de una matriz. Es importante señalar que el slice() el método no altera la matriz original sino que crea una copia superficial.

Aquí está la sintaxis básica:

slice(optional start parameter, optional end parameter)

Veamos algunos ejemplos para entender mejor cómo el slice() el método funciona.

Cómo utilizar el método JavaScript slice() sin los parámetros de inicio y finalización

En este primer ejemplo, he creado una lista de ciudades de todo el mundo.

const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];

puedo usar el slice() método de hacer una copia superficial de esa matriz.

cities.slice()

Cuando yo console.log el resultado, así que veré todos los elementos del mío cities matriz copiada a esta nueva matriz.

Cómo usar el método de división de JavaScript () usando el parámetro de inicio

Puede usar el parámetro de inicio opcional para establecer una posición de inicio para seleccionar elementos de la matriz. Es importante recordar que las matrices están indexadas en base cero.

En este ejemplo, estableceremos la posición inicial en el índice 2, que seleccionará las últimas tres ciudades de la matriz y las devolverá en una nueva matriz.

const newCityArr = cities.slice(2);

console.log(newCityArr)

La matriz original no se modificó como podemos ver aquí en este ejemplo.

const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];

const newCityArr = cities.slice(2);

console.log("Original: ", cities)
console.log("New: ", newCityArr)

También puede usar índices negativos que comenzarán a extraer elementos desde el final de la matriz.

En este ejemplo, estableceremos la posición inicial en -2, lo que seleccionará las dos últimas ciudades de la matriz y las devolverá a una nueva matriz.

const newCityArr = cities.slice(-2);

Si el parámetro de inicio es mayor que el último índice de la matriz, se devolverá una matriz vacía.

const newCityArr = cities.slice(5);

Cómo usar el método de segmento de JavaScript () usando los parámetros de inicio y fin

Si se especifica una posición final, el slice() el método extraerá los elementos desde la posición inicial hasta la posición final. La posición final no se incluirá en los elementos extraídos para la nueva matriz.

En este ejemplo, hemos especificado un índice inicial de 2 y un índice final de 4. La nueva matriz devuelta solo incluirá ciudades en el índice 2 y 3 porque la posición final no está incluida en los elementos extraídos.

const cities = ["Tokyo","Cairo","Los Angeles","Paris","Seattle"];

const newCityArr = cities.slice(2,4);

Cómo usar el método de matriz JavaScript splice ()

no me gusta el slice() método, el splice() el método cambiará el contenido de la matriz original. Él splice() se usa para agregar o eliminar elementos de una matriz existente y el valor devuelto serán los elementos eliminados de la matriz.

Si no se ha eliminado nada de la matriz, el valor devuelto será solo una matriz vacía.

Aquí está la sintaxis básica.

splice(start, optional delete count, optional items to add)

En este ejemplo, tenemos una serie de productos alimenticios.

const food = ['pizza', 'cake', 'salad', 'cookie'];

Si quisiéramos agregar otro alimento a la matriz en el índice 1, podemos usar el siguiente código:

food.splice(1,0,"burrito")

El primer número es el índice inicial y el segundo número es el conteo de eliminaciones. Dado que no estamos eliminando ningún elemento, nuestro recuento de eliminación es cero.

Así es como se vería el resultado en la consola.

const food = ['pizza', 'cake', 'salad', 'cookie'];

food.splice(1,0,"burrito")

console.log(food)

Si nosotros console.log(food.splice(1,0,"burrito"))entonces devolveríamos una matriz vacía porque no se eliminó nada de nuestra matriz.

En el siguiente ejemplo, queremos eliminar «ensalada» de la matriz. Podemos usar los parámetros start y delete para lograr esto.

food.splice(2,1)

El número 2 es la posición inicial y el número 1 representa el conteo de eliminaciones. Dado que la ensalada está en el índice 2, se eliminará de la matriz.

Así es como se ve nuestra matriz ahora:

const food = ['pizza', 'cake', 'salad', 'cookie'];

food.splice(2,1)
console.log(food)

Conclusión

Él slice Y splice Los métodos de matriz pueden parecer similares entre sí, pero existen algunas diferencias clave.

Él slice() se puede usar para hacer una copia de una matriz o para devolver parte de una matriz. Es importante señalar que el slice() el método no altera la matriz original sino que crea una copia superficial.

Aquí está la sintaxis básica:

slice(optional start parameter, optional end parameter)

no me gusta el slice() método, el splice() el método cambiará el contenido de la matriz original. Él splice() se usa para agregar o eliminar elementos de una matriz existente y el valor devuelto serán los elementos eliminados de la matriz.

Si no se ha eliminado nada de la matriz, el valor devuelto será solo una matriz vacía.

Aquí está la sintaxis básica:

splice(start, optional delete count, optional items to add)

Espero que hayas disfrutado este artículo de JavaScript y buena suerte en tu viaje como desarrollador.