Emenda da matriz JavaScript versus fatia

195

Qual é a diferença entre splicee slice?

$scope.participantForms.splice(index, 1);
$scope.participantForms.slice(index, 1);
Renat Gatin
fonte
2
Splice e Slice são comandos Javascript internos - não especificamente comandos AngularJS. Slice retorna os elementos da matriz do "start" até um pouco antes dos especificadores "end". A emenda modifica a matriz real e inicia no "início" e mantém o número de elementos especificado. O Google tem muitas informações sobre isso, basta pesquisar.
mrunion
1
verifique se este aswer ajuda você a stackoverflow.com/questions/1777705/…
Fábio Luiz
Os métodos splice () modificam uma matriz adicionando-a ou removendo-a de uma matriz e retornando apenas os itens removidos.
Shaik Md N Rasool 12/07

Respostas:

266

splice()altera a matriz original, ao passo slice()que não, mas ambas retornam o objeto da matriz.

Veja os exemplos abaixo:

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

Isso retornará [3,4,5]. A matriz original é afetada, resultando em arrayexistência [1,2].

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

Isso retornará [3,4,5]. A matriz original não é afectada com resultando em arrayser [1,2,3,4,5].

Abaixo está um violino simples que confirma isso:

//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
fonte
20
É também importante observar que o método de matriz de fatia () pode ser usado para copiar matrizes por não passar quaisquer argumentosarr1 = arr0.slice()
Mg Gm
3
Você pode pensar nisso como se splicefosse um governo que cobra impostos de você. Considerando que sliceé mais um cara de copiar e colar.
radbyx 14/01
.splice()é extremamente intuitivo, passei anos tentando descobrir por que as referências à matriz original estavam retornando undefinedaté encontrar esse segmento.
Nixinova 13/06
61

Splice e Slice são funções da matriz Javascript.

Splice vs Slice

  1. O método splice () retorna os itens removidos em uma matriz e o método slice () retorna os elementos selecionados em uma matriz, como um novo objeto de matriz.

  2. O método splice () altera a matriz original e o método slice () não altera a matriz original.

  3. O método splice () pode receber n número de argumentos e o método slice () leva 2 argumentos.

Emenda com Exemplo

Argumento 1: Índice, Necessário. Um número inteiro que especifica em que posição adicionar / remover itens. Use valores negativos para especificar a posição no final da matriz.

Argumento 2: Opcional. O número de itens a serem removidos. Se definido como 0 (zero), nenhum item será removido. E se não for aprovado, todos os itens do índice fornecido serão removidos.

Argumento 3… n: opcional. Os novos itens a serem adicionados à matriz.

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]

Fatia com Exemplo

Argumento 1: obrigatório. Um número inteiro que especifica por onde iniciar a seleção (o primeiro elemento tem um índice de 0). Use números negativos para selecionar no final de uma matriz.

Argumento 2: Opcional. Um número inteiro que especifica onde finalizar a seleção, mas não inclui. Se omitido, todos os elementos da posição inicial e até o final da matriz serão selecionados. Use números negativos para selecionar no final de uma matriz.

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
fonte
3
Embora ambas as funções executem tarefas bem diferentes, diferentemente splice(x,y), slice(x,y)o segundo argumento ynão é contado a partir da posição de x, mas a partir do primeiro elemento da matriz.
Ramesh Pareek
Mais uma coisa que notei: em vez de array.slice(index, count), se você usar array.slice((index, count)), você receberá a parte restante após 'fatiar'. Tente!
Ramesh Pareek
23

O método slice () retorna uma cópia de uma parte de uma matriz para um novo objeto de matriz.

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

Isso NÃO altera a participantFormsmatriz, mas retorna uma nova matriz contendo o elemento único encontrado na indexposição na matriz original.

O método splice () altera o conteúdo de uma matriz removendo os elementos existentes e / ou adicionando novos elementos.

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

Isso removerá um elemento da participantFormsmatriz na indexposição.

Estas são as funções nativas do Javascript, o AngularJS não tem nada a ver com elas.

Alec Kravets
fonte
Alguém pode dar exemplos úteis e o que seria ideal para cada um? Como situações em que você prefere usar emenda ou fatia?
Petrosmm
1
esta resposta está parcialmente incorreta. para spliceo segundo argumento é a contagem de elementos na matriz de retorno, mas para sliceo segundo argumento é o índice do elemento final a ser retornado + 1. slice(index,1)não necessariamente retorna uma matriz de um elemento começando em index. [1,2,3,4,5].slice(0,1)retorna [1]mas [1,2,3,4,5].slice(3,1)retorna []porque 1é interpretado como final index +1tal, final index = 0mas isso é antes start index = 3que a matriz vazia seja retornada.
BaltoStar 7/07/19
Por que essa não é a resposta principal?
JJ Labajo 30/07/19
23

Aqui está um truque simples para lembrar a diferença entre 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:

Pense "spl" (first 3 letters of splice)como abreviação de "comprimento específico", que o segundo argumento deve ser um comprimento, não um índice

Sajeetharan
fonte
1
É mais do que apenas como você especifica argumentos. Um deles (emenda) modifica a matriz base e o outro não.
Arbiter
também se poderia pensar de splicing como separação (2 gera matrizes) + fatia
14

Emenda - referência MDN - especificação ECMA-262

Sintaxe
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Parâmetros

  • start: requeridos. Índice inicial.
    Se startfor negativo, é tratado como"Math.max((array.length + start), 0)" com as especificações (exemplo fornecido abaixo) efetivamente a partir do final de array.
  • deleteCount: opcional. Número de elementos a serem removidos (todos, startse não fornecidos).
  • item1, item2, ...: opcional. Elementos a serem adicionados à matriz a partir do startíndice.

Retorna : uma matriz com elementos excluídos (matriz vazia se nenhuma foi removida)

Modificar matriz original : Sim

Exemplos:

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 ]

Mais exemplos nos exemplos do MDN Splice


Fatia - referência MDN - especificação ECMA-262

Parâmetros de sintaxe
array.slice([begin[, end]])

  • begin: opcional. Índice inicial (padrão 0).
    Se beginfor negativo, será tratado de acordo "Math.max((array.length + begin), 0)"com as especificações (exemplo fornecido abaixo) efetivamente a partir do final de array.
  • end: opcional. Último índice para extração, mas não incluindo (padrão array.length). Se endfor negativo, é tratado de acordo "Math.max((array.length + begin),0)"com a especificação (exemplo fornecido abaixo) efetivamente a partir do final de array.

Retorna : uma matriz que contém os elementos extraídos.

Alternar original : não

Exemplos:

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 ]

Mais exemplos nos exemplos do MDN Slice

Comparação de desempenho

Não tome isso como verdade absoluta, pois dependendo de cada cenário, um pode ter um desempenho melhor que o outro.
Teste de performance

taguenizy
fonte
12

Splice e Slice são comandos Javascript internos - não especificamente comandos AngularJS. Slice retorna os elementos da matriz do "start" até um pouco antes dos especificadores "end". A emenda modifica a matriz real e inicia no "início" e mantém o número de elementos especificados. O Google tem muitas informações sobre isso, basta pesquisar.

Mrunion
fonte
2
A emenda exclui o número especificado e insere quaisquer argumentos subsequentes.
Josiah Keller
emenda apaga um determinado número de elementos de um dado índice inicial, por exemplo, emenda (4,1); exclui um elemento começando no índice 4, enquanto emenda (4,3); exclui três elementos começando com o elemento no índice 4. Em seguida, após excluí-los, ele retorna os valores excluídos.
Briancollins081
8

O splice()método retorna os itens removidos em uma matriz. O slice()método retorna o (s) elemento (s) selecionado (s) em uma matriz, como um novo objeto de matriz.

O splice()método altera a matriz original e o slice()método não altera a matriz original.

  • Splice() O método pode receber n número de argumentos:

    Argumento 1: Índice, Necessário.

    Argumento 2: Opcional. O número de itens a serem removidos. Se definido como 0 (zero), nenhum item será removido. E se não for aprovado, todos os itens do índice fornecido serão removidos.

    Argumento 3..n: opcional. Os novos itens a serem adicionados à matriz.

  • slice() O método pode receber 2 argumentos:

    Argumento 1: obrigatório. Um número inteiro que especifica por onde iniciar a seleção (o primeiro elemento tem um índice de 0). Use números negativos para selecionar no final de uma matriz.

    Argumento 2: Opcional. Um número inteiro que especifica onde finalizar a seleção. Se omitido, todos os elementos da posição inicial e até o final da matriz serão selecionados. Use números negativos para selecionar no final de uma matriz.

Ranjith Ayyadurai
fonte
4

emendar e excluir item de matriz por índice

index = 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);

insira a descrição da imagem aqui

xgqfrms
fonte
3

Outro exemplo:

[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
fonte
3

fatia não altera a matriz original, ela retorna uma nova matriz, mas a emenda altera a matriz original.

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].

O segundo argumento do método de emenda é diferente do método de fatia. o segundo argumento em emenda representa a contagem de elementos a serem removidos e em fatia representa o índice final.

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 representa o último elemento e, portanto, começa de -3 a -1. Acima estão as principais diferenças entre o método de emenda e fatia.

dev verma
fonte
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
fonte
Por favor, forneça mais informações sobre o que está acontecendo.
MKant
2

A diferença entre as funções internas do javascript Slice () e Splice () é que o Slice retorna o item removido, mas não alterou a matriz original; gostar,

        // (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)

mas no caso splice () isso afeta a matriz original; gostar,

         // (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
fonte
0

Método JavaScript splice () da matriz por exemplo

Example1 por tutsmake -Remova 2 elementos do índice 1

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

 arr.splice(1,2);

 console.log( arr ); 

Example-2 Por tutsmake - Adicione um novo elemento do índice 0 JavaScript

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

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

 console.log( arr );  

Example-3 by tutsmake - Adicionar e remover elementos no JavaScript da matriz

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/

Desenvolvedor
fonte