JavaScript Array splice vs slice

194

Jaka jest różnica między splicei slice?

$scope.participantForms.splice(index, 1);
$scope.participantForms.slice(index, 1);
Renat Gatin
źródło
2
Splice i Slice są wbudowanymi poleceniami Javascript - nie konkretnie AngularJS. Slice zwraca elementy tablicy od „startu” aż do tuż przed specyfikatorami „end”. Splice mutuje rzeczywistą tablicę i rozpoczyna się od „startu” i zachowuje określoną liczbę elementów. Google ma wiele informacji na ten temat, wystarczy wyszukać.
mrunion
1
sprawdź, czy ta odpowiedź pomaga ci stackoverflow.com/questions/1777705/...
Fábio Luiz
Metody splice () mutują tablicę, dodając ją lub usuwając z tablicy i zwracając tylko usunięte elementy.
Shaik Md N Rasool

Odpowiedzi:

265

splice()zmienia oryginalną tablicę slice(), ale nie, ale obie zwracają obiekt tablicowy.

Zobacz poniższe przykłady:

var array=[1,2,3,4,5];
console.log(array.splice(2));

To wróci [3,4,5]. Oryginalna matryca wpływa powodując arrayjest [1,2].

var array=[1,2,3,4,5]
console.log(array.slice(2));

To wróci [3,4,5]. Oryginalna tablica nie wpływa w wyniku arraybycia [1,2,3,4,5].

Poniżej znajduje się proste skrzypce, które to potwierdzają:

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);

Thalaivar
źródło
20
Ważne jest również, aby zauważyć, że metody tablicowej slice () można używać do kopiowania tablic, nie przekazując żadnych argumentówarr1 = arr0.slice()
Mg Gm
3
Możesz pomyśleć, że to tak, splicejakby rząd pobierał od ciebie podatki. Podczas gdy slicejest bardziej facetem kopiuj-wklej.
radbyx
.splice()jest wyjątkowo nieintuicyjny, spędziłem całe wieki próbując dowiedzieć się, dlaczego odwoływano się do oryginalnej tablicy, undefineddopóki nie znalazłem tego wątku.
Nixinova
61

Splice i Slice są funkcjami JavaScript Array.

Splice vs plasterek

  1. Metoda splice () zwraca usunięte elementy z tablicy, a metoda slice () zwraca wybrane elementy z tablicy jako nowy obiekt tablicy.

  2. Metoda splice () zmienia oryginalną tablicę, a metoda slice () nie zmienia oryginalnej tablicy.

  3. Metoda splice () może przyjąć n liczby argumentów, a metoda slice () przyjmuje 2 argumenty.

Połącz z przykładem

Argument 1: Wymagany indeks. Liczba całkowita określająca, w której pozycji dodawać / usuwać elementy. Użyj wartości ujemnych, aby określić pozycję od końca tablicy.

Argument 2: opcjonalny. Liczba elementów do usunięcia. Jeśli ustawione na 0 (zero), żadne elementy nie zostaną usunięte. A jeśli nie przejdzie, wszystkie elementy z podanego indeksu zostaną usunięte.

Argument 3… n: Opcjonalny. Nowe elementy do dodania do tablicy.

var array=[1,2,3,4,5];
console.log(array.splice(2));
// shows [3, 4, 5], returned removed item(s) as a new array object.
 
console.log(array);
// shows [1, 2], original array altered.
 
var array2=[6,7,8,9,0];
console.log(array2.splice(2,1));
// shows [8]
 
console.log(array2.splice(2,0));
//shows [] , as no item(s) removed.
 
console.log(array2);
// shows [6,7,9,0]

Plasterek z przykładem

Argument 1: wymagany. Liczba całkowita określająca miejsce rozpoczęcia wyboru (pierwszy element ma indeks 0). Użyj liczb ujemnych, aby wybrać z końca tablicy.

Argument 2: opcjonalny. Liczba całkowita określająca miejsce zakończenia zaznaczenia, ale nie obejmuje. W przypadku pominięcia zostaną wybrane wszystkie elementy od pozycji początkowej do końca tablicy. Użyj liczb ujemnych, aby wybrać z końca tablicy.

var array=[1,2,3,4,5]
console.log(array.slice(2));
// shows [3, 4, 5], returned selected element(s).
 
console.log(array.slice(-2));
// shows [4, 5], returned selected element(s).
console.log(array);
// shows [1, 2, 3, 4, 5], original array remains intact.
 
var array2=[6,7,8,9,0];
console.log(array2.slice(2,4));
// shows [8, 9]
 
console.log(array2.slice(-2,4));
// shows [9]
 
console.log(array2.slice(-3,-1));
// shows [8, 9]
 
console.log(array2);
// shows [6, 7, 8, 9, 0]

Gagandeep Gambhir
źródło
3
Chociaż obie funkcje wykonują całkiem różne zadania, w przeciwieństwie do tego splice(x,y), w slice(x,y)drugim argumencie ynie jest liczony od pozycji x, ale od pierwszego elementu tablicy.
Ramesh Pareek
Jeszcze jedna rzecz, którą zauważyłem: zamiast array.slice(index, count), jeśli użyjesz array.slice((index, count)), resztę otrzymasz po „krojeniu”. Spróbuj!
Ramesh Pareek
23

Metoda slice () zwraca kopię części tablicy do nowego obiektu tablicy.

$scope.participantForms.slice(index, 1);

To NIE zmienia participantFormstablicy, ale zwraca nową tablicę zawierającą pojedynczy element znaleziony w indexpozycji w oryginalnej tablicy.

Metoda splice () zmienia zawartość tablicy poprzez usunięcie istniejących elementów i / lub dodanie nowych elementów.

$scope.participantForms.splice(index, 1);

Spowoduje to usunięcie jednego elementu z participantFormstablicy w indexmiejscu.

Są to rodzime funkcje Javascript, AngularJS nie ma z nimi nic wspólnego.

Alec Kravets
źródło
Czy ktoś może podać pomocne przykłady i co byłoby dla nich idealne? Na przykład sytuacje, w których wolisz używać łączenia lub krojenia?
petrosmm
1
ta odpowiedź jest częściowo niepoprawna. dla splicedrugiego argumentu jest liczba elementów w tablicy zwracanej, ale dla slicedrugiego argumentu jest indeks ostatniego elementu do zwrócenia + 1. slice(index,1)niekoniecznie zwraca tablicę jednego elementu zaczynającą się od index. [1,2,3,4,5].slice(0,1)zwraca, [1]ale [1,2,3,4,5].slice(3,1)zwraca, []ponieważ 1jest tak interpretowane final index +1, final index = 0ale dzieje się to przed start index = 3zwróceniem pustej tablicy.
BaltoStar
Dlaczego nie jest to najlepsza odpowiedź?
JJ Labajo,
23

Oto prosta sztuczka, aby zapamiętać różnicę między slicevssplice

var a=['j','u','r','g','e','n'];

// array.slice(startIndex, endIndex)
a.slice(2,3);
// => ["r"]

//array.splice(startIndex, deleteCount)
a.splice(2,3);
// => ["r","g","e"]

Trick to remember:

Pomyśl o "spl" (first 3 letters of splice)skrócie „określona długość”, że drugim argumentem powinna być długość, a nie indeks

Sajeetharan
źródło
1
To coś więcej niż tylko określenie argumentów. Jeden z nich (splice) modyfikuje tablicę podstawową, a drugi nie.
Arbiter,
może również myśleć o splice jako splicie (generuje 2 tablice) + plasterek
14

Łączenie - odniesienie MDN - specyfikacja ECMA-262

Składnia
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Parametry

  • start: wymagany. Indeks początkowy.
    Jeśli startjest ujemne, jest traktowane zgodnie "Math.max((array.length + start), 0)"ze specyfikacją (przykład podany poniżej) skutecznie od końca array.
  • deleteCount: opcjonalny. Liczba elementów do usunięcia (wszystkie z, startjeśli nie podano).
  • item1, item2, ...: opcjonalny. Elementy do dodania do tablicy z startindeksu.

Zwraca : tablica z usuniętymi elementami (pusta tablica, jeśli nie została usunięta)

Mutowanie oryginalnej tablicy : Tak

Przykłady:

const array = [1,2,3,4,5];

// Remove first element
console.log('Elements deleted:', array.splice(0, 1), 'mutated array:', array);
// Elements deleted: [ 1 ] mutated array: [ 2, 3, 4, 5 ]

// array = [ 2, 3, 4, 5]
// Remove last element (start -> array.length+start = 3)
console.log('Elements deleted:', array.splice(-1, 1), 'mutated array:', array);
// Elements deleted: [ 5 ] mutated array: [ 2, 3, 4 ]

Więcej przykładów w przykładach połączeń MDN


Plasterek - odniesienie MDN - specyfikacja ECMA-262

Parametry składni
array.slice([begin[, end]])

  • begin: opcjonalny. Indeks początkowy (domyślnie 0).
    Jeśli beginjest ujemne, jest traktowane zgodnie "Math.max((array.length + begin), 0)"ze specyfikacją (przykład podany poniżej) skutecznie od końca array.
  • end: opcjonalny. Ostatni indeks do wyodrębnienia, ale bez uwzględnienia (default array.length). Jeśli endjest ujemne, jest traktowane zgodnie "Math.max((array.length + begin),0)"ze specyfikacją (przykład podany poniżej) skutecznie od końca array.

Zwraca : tablica zawierająca wyodrębnione elementy.

Mutuj oryginał : Nie

Przykłady:

const array = [1,2,3,4,5];

// Extract first element
console.log('Elements extracted:', array.slice(0, 1), 'array:', array);
// Elements extracted: [ 1 ] array: [ 1, 2, 3, 4, 5 ]

// Extract last element (start -> array.length+start = 4)
console.log('Elements extracted:', array.slice(-1), 'array:', array);
// Elements extracted: [ 5 ] array: [ 1, 2, 3, 4, 5 ]

Więcej przykładów w przykładach wycinka MDN

Porównanie wydajności

Nie bierz tego za absolutną prawdę, ponieważ w zależności od każdego scenariusza jeden może być skuteczny od drugiego.
Test wydajności

taguenizy
źródło
12

Splice i Slice są wbudowanymi poleceniami Javascript - nie konkretnie AngularJS. Slice zwraca elementy tablicy od „startu” aż do tuż przed specyfikatorami „end”. Splice mutuje rzeczywistą tablicę i rozpoczyna się od „startu” i zachowuje określoną liczbę elementów. Google ma wiele informacji na ten temat, wystarczy wyszukać.

mrunion
źródło
2
Łączenie usuwa określoną liczbę, a następnie wstawia kolejne argumenty.
Josiah Keller
splice usuwa określoną liczbę elementów z danego indeksu początkowego, np. splice (4,1); usuwa jeden element, zaczynając od indeksu 4, podczas gdy splice (4,3); usuwa trzy elementy, zaczynając od elementu o indeksie 4. Następnie po ich usunięciu zwraca usunięte wartości.
briancollins081,
8

splice()Sposób powraca usuniętych elementów w macierzy. Theslice() metody powraca wybranego elementu (ów), w szeregu, jak nową tablicę.

splice()Metoda zmienia oryginalnej tablicy i slice()metoda nie zmienia oryginalnej tablicy.

  • Splice() metoda może przyjąć n liczby argumentów:

    Argument 1: Wymagany indeks.

    Argument 2: opcjonalny. Liczba elementów do usunięcia. Jeśli ustawione na 0 (zero), żadne elementy nie zostaną usunięte. A jeśli nie przejdzie, wszystkie elementy z podanego indeksu zostaną usunięte.

    Argument 3..n: Opcjonalny. Nowe elementy do dodania do tablicy.

  • slice() Metoda może przyjąć 2 argumenty:

    Argument 1: wymagany. Liczba całkowita określająca miejsce rozpoczęcia wyboru (pierwszy element ma indeks 0). Użyj liczb ujemnych, aby wybrać z końca tablicy.

    Argument 2: opcjonalny. Liczba całkowita określająca miejsce zakończenia zaznaczenia. W przypadku pominięcia zostaną wybrane wszystkie elementy od pozycji początkowej do końca tablicy. Użyj liczb ujemnych, aby wybrać z końca tablicy.

Ranjith Ayyadurai
źródło
4

spnij i usuń element tablicy według indeksu

indeks = 2

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];
//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

console.log("----before-----");
console.log(arr1.splice(2, 1));
console.log(arr2.slice(2, 1));

console.log("----after-----");
console.log(arr1);
console.log(arr2);

let log = console.log;

//splice & will modify the origin array
const arr1 = [1,2,3,4,5];

//slice & won't modify the origin array
const arr2 = [1,2,3,4,5]

log("----before-----");
log(arr1.splice(2, 1));
log(arr2.slice(2, 1));

log("----after-----");
log(arr1);
log(arr2);

wprowadź opis zdjęcia tutaj

xgqfrms
źródło
3

Inny przykład:

[2,4,8].splice(1, 2) -> returns [4, 8], original array is [2]

[2,4,8].slice(1, 2) -> returns 4, original array is [2,4,8]
Jakub Kubista
źródło
3

plasterek nie zmienia oryginalnej tablicy, zwraca nową tablicę, ale splice zmienia oryginalną tablicę.

example: var arr = [1,2,3,4,5,6,7,8];
         arr.slice(1,3); // output [2,3] and original array remain same.
         arr.splice(1,3); // output [2,3,4] and original array changed to [1,5,6,7,8].

drugi argument metody łączenia różni się od metody cięcia. drugi argument w splocie reprezentuje liczbę elementów do usunięcia, a w przekroju reprezentuje indeks końcowy.

arr.splice(-3,-1); // output [] second argument value should be greater then 
0.
arr.splice(-3,-1); // output [6,7] index in minus represent start from last.

-1 reprezentuje ostatni element, więc zaczyna się od -3 do -1. Powyżej znajdują się główne różnice między metodą łączenia i cięcia.

dev verma
źródło
2

//splice
var array=[1,2,3,4,5];
console.log(array.splice(2));

//slice
var array2=[1,2,3,4,5]
console.log(array2.slice(2));


console.log("----after-----");
console.log(array);
console.log(array2);

Tahereh Jalilpour
źródło
Prosimy o więcej informacji na temat tego, co się dzieje
MKant
2

Różnica między funkcjami wbudowanymi języka JavaScript Slice () i Splice () polega na tym, że Slice zwraca usunięty element, ale nie zmienił oryginalnej tablicy; lubić,

        // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.slice(index)
        // result=4  
        // after slicing=>  array =[1,2,3,4,5]  (same as original array)

ale w przypadku splice () wpływa na oryginalną tablicę; lubić,

         // (original Array)
        let array=[1,2,3,4,5] 
        let index= array.indexOf(4)
         // index=3
        let result=array.splice(index)
        // result=4  
        // after splicing array =[1,2,3,5]  (splicing affects original array)
Muhammad Abdullah
źródło
0

JavaScript Array splice () Metoda według przykładu

Przykład 1 przez tutsmake -Usuń 2 elementy z indeksu 1

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr ); 

Przykład 2 Autor: tutsmake - Dodaj nowy element z indeksu 0 JavaScript

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(0,0,"zero");

 console.log( arr );  

Przykład 3 autorstwa tutsmake - dodawanie i usuwanie elementów w JavaScript tablicy

var months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb'); // add at index 1

console.log(months); 

months.splice(4, 1, 'May'); // replaces 1 element at index 4

console.log(months);

https://www.tutsmake.com/javascript-array-splice-method-by-example/

Deweloper
źródło