Lad os udforske Slice (), Splice () & Spread Syntax (...) i JavaScript

Jeg stødte på denne freeCodeCamp-udfordring og sad fast i nogen tid og tænkte på, hvordan jeg kunne finde en måde at løse det på. De nævnte allerede løsningen ved hjælp af Slice & Splice. Jeg var forvirret på det tidspunkt, hvornår jeg skulle bruge Slice, og hvornår jeg skulle bruge Splice.

Her vil jeg dele, hvordan jeg løste det med disse metoder.

Både Slice og Splice bruges til at manipulere arrays. Lad os se, hvordan de gør det.

Skive:

Slice-metoden tager 2 argumenter.

1. argument : Angiver hvorfra markeringen skal startes.

For eksempel:

var arr1 = [1,5,8,9]; arr1.slice(1); // [5,8,9]

Fra det første indeks (5) returnerer det elementerne.

2. argument : Angiver på hvilket niveau slutpunktet skal være. Hvis du ikke lagde dette i parentes, mens du kalder skive-metoden, returnerer den elementerne fra startindekset til slutningen af ​​arrayet.

var arr1 = [1,5,8,9]; console.log(arr1.slice(1,3)); //[ 5, 8 ]

Hvis du sætter et negativt nummer under opkald, vælges markeringen fra slutningen af ​​arrayet.

var arr1 = [1,5,8,9]; console.log(arr1.slice(-2)); //[ 8, 9 ]

Bemærk: Slice returnerer altid de valgte elementer fra arrayet.

Slice ændrer ikke arrayet. Arrayet forbliver intakt. Se nedenstående eksempel:

var arr1 = [1,5,8,9]; arr1.slice(2); console.log(arr1); // [ 1, 5, 8, 9 ]

Selvom du har foretaget nogle ændringer i arrayet, påvirker det ikke det. Det returnerer det oprindelige array, som det er i starten.

Splice:

Det kan tage flere argumenter.

Det betyder,

1. argument : Angiver på hvilken position et nyt element eller eksisterende element skal tilføjes / fjernes. Hvis værdien er negativ, tælles positionen fra slutningen af ​​arrayet.

2. argument : Antallet af elementer, der skal fjernes fra startpositionen. Hvis det er 0, fjernes ingen elementer. Hvis det ikke er bestået, slettes det alle elementer fra startpositionen.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2)); // [ 5, 8 ]

3. argument -> niende argument : Værdien af ​​de emner, du vil føje til arrayet.

var arr1 = [1,5,8,9]; console.log(arr1.splice(1,2,'Hi','Medium')); // [5,8]

Du tror måske, at vi har tilføjet 'Hej', 'Medium' til arrayet, men det vises ikke her…. Ret?

Ja, vi har trøstet arr1.splice (1,2, 'Hej', 'Medium').

Bemærk:

  • Splice returnerer kun fjernede elementer fra arrayet.
  • Splice ændrer det originale array
var arr1 = [1,5,8,9]; arr1.splice(1,2,'Hi','Medium'); console.log(arr1); // [ 1, 'Hi', 'Medium', 9 ]

Spread Syntax:

Definition : Gør det muligt at udvide en iterabel, såsom et matrixudtryk eller en streng på steder, hvor der forventes nul eller flere argumenter (for funktionsopkald) eller elementer (til matrixliteraler) eller et objektudtryk, der skal udvides på steder, hvor nul eller mere nøgleværdipar (for objektbogstaver) forventes.

Lad os have et eksempel på dette:

var arr1 = [1,3,6,7]; var arr2 = [5,arr1,8,9]; console.log(arr2); // [ 5, [ 1, 3, 6, 7 ], 8, 9 ]

Jeg ønsker, at dette skal være i et enkelt array som [5, 1, 3, 6, 7, 8, 9].

Jeg kan bruge denne Spread Syntax til at løse dette:

var arr1 = [1,3,6,7]; var arr2 = [5,...arr1,8,9]; console.log(arr2); //[ 5, 1, 3, 6, 7, 8, 9 ]

En anden hovedanvendelse af Spread Syntax er under kopiering af et array:

var arr = [1, 2, 3]; var arr2 = arr; arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3, 4 ]

Jeg tilføjede kun " 4 " til arr2 . Men det gjorde også ændringen til arr.

Vi kan løse dette ved hjælp af Spread Syntax som følger ...

var arr = [1, 2, 3]; var arr2 = [...arr]; // like arr.slice() arr2.push(4); console.log(arr2); // [ 1, 2, 3, 4 ] console.log(arr); // [ 1, 2, 3]

Du kan se i MDN-dokumentationen for mere information om Spread Syntax.

Så lad os se på udfordringen.

function frankenSplice(arr1, arr2, n) { // It's alive. It's alive! let array2Copy = [...arr2]; array2Copy.splice(n,0, ...arr1); //console.log(array2Copy); return array2Copy; } frankenSplice([1, 2, 3], [4, 5, 6], 1);

Hovedbetingelsen for denne udfordring er "bør ikke ændre arr1 / arr2, efter at funktionen er udført".

Så skabte en kopi vifte af arr2, og ved hjælp af den splejse metode tilføje arr1 inde i arr2 eksemplar, der er navngivet som array2Copy.

Endelig konklusion:

-> Skive metode vil

  • returnere de valgte elementer fra arrayet
  • tage 2 argumenter
  • ikke ændre den oprindelige matrix

-> Splice-metoden vil

  • returner de fjernede elementer i arrayet
  • tage flere argumenter
  • ændrer den oprindelige matrix

Dette er min første nogensinde tutorial om kodning - tak for læsningen! Din feedback hjælper mig med at forme min kodning og skrivefærdighed.

Happy Coding ...!

Opret forbindelse til mig via Twitter