a diferença explicada com bolo

Por

Este título poderia ter sido “como não se confundir entre a emenda e a divisão do JavaScript”, porque nunca consigo me lembrar da diferença entre os dois.

Portanto, espero que este truque ajude a mim e a você no futuro:

S (p) lice = Slice + (p) => Slice + in (p) lace

Array.prototype.slice ()

Array.prototype.slice () é usado para separar uma matriz do start aponte para o end ponto, excluindo o end.

Como o nome sugere, ele é usado para separar elementos de um array. Mas, ao contrário de fatiar um bolo, fatiar uma matriz não corta a matriz real, mas a mantém inalterada (bolo infinito!).

arr.slice(start, [end])

Regras

  1. Uma nova matriz é retornada e a matriz original não é modificada.
  2. E se end é omitido, o fim torna-se o fim (último elemento) da matriz.
  3. E se start é -ve, os elementos são contados a partir do final.
const infiniteCake = ['🍰','🍰','🍰','🍰','🍰','🍰']

let myPieceOfCake = infiniteCake.slice(0) // ['🍰']
let yourDoublePieceOfCake = infiniteCake.slice(0,2) // (2) ["🍰", "🍰"]
console.log(infiniteCake) //['🍰','🍰','🍰','🍰','🍰','🍰']

Como você vê, inifinteCake não é modificado.

Array.prototype.splice ()

Splice faz operações no lugar, o que significa que ele modifica a matriz existente.

Além de remover elementos, a emenda também é usada para adicionar elementos. Splice é a “fatia” do bolo do mundo real:

arr.splice(start, [deleteCount, itemToInsert1, itemToInsert2, ...])

Regras

  1. As operações são realizadas no local.
  2. Uma matriz é retornada com os itens excluídos.
  3. E se start é -ve, os elementos são contados a partir do final.
  4. E se deleteCountfor omitido, os elementos até o final da matriz serão removidos.
  5. Se itens para inserir, como itemToInsert1 são omitidos, os elementos são apenas removidos.
const cake = ['🍰','🍰','🍰','🍰','🍰','🍰'];
let myPieceOfCake = cake.splice(0, 1) // ["🍰"]
console.log(cake) // (5) ["🍰", "🍰", "🍰", "🍰", "🍰"]

let yourDoublePieceOfCake = cake.splice(0,2) //(2) ["🍰", "🍰"]
console.log(cake) //(3) ["🍰", "🍰", "🍰"]

Aqui, cake é modificado e diminui de tamanho.

Exemplos de código

const myArray  = [1,2,3,4,5,6,7] 

console.log(myArray.slice(0))       // [ 1, 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(0, 1))    // [ 1 ]
console.log(myArray.slice(1))       // [ 2, 3, 4, 5, 6, 7 ]
console.log(myArray.slice(5))       // [ 6, 7 ]
console.log(myArray.slice(-1))      // [ 7 ]
console.log(myArray)                // [ 1, 2, 3, 4, 5, 6, 7 ]



const secondArray = [10, 20, 30, 40, 50]

console.log(secondArray.splice(0, 1))   // [ 10 ] : deletes 1 element starting at index 0
console.log(secondArray.splice(-2, 1))  // [ 40 ] : deletes 1 element starting at index end-2 
console.log(secondArray)                // [ 20, 30, 50 ]
console.log(secondArray.splice(0))      // [ 20, 30, 50 ] : deletes all elements starting at index 0
console.log(secondArray)                // []
console.log(secondArray.splice(2, 0, 60, 70)) // [] : deletes 0 elements starting at index 2 (doesn't exist so defaults to 0) and then inserts 60, 70
console.log(secondArray)                // [60, 70]

TL; DR

Usar splice se a matriz original precisa ser modificada, ou elementos precisam ser adicionados.

Usar slice para remover elementos se o array original não deve ser modificado.

Interessado em mais tutoriais e JSBytes meus? Inscreva-se no meu boletim informativo. ou Siga me no twitter