JavaScript Array splice vs slice

195

Apa perbedaan antara splicedan slice?

$scope.participantForms.splice(index, 1);
$scope.participantForms.slice(index, 1);
Renat Gatin
sumber
2
Splice dan Slice adalah perintah Javascript bawaan - bukan perintah khusus AngularJS. Slice mengembalikan elemen array dari "start" hingga tepat sebelum specifier "akhir". Splice mengubah array aktual, dan mulai pada "awal" dan mempertahankan jumlah elemen yang ditentukan. Google memiliki banyak info tentang ini, cukup cari.
mrunion
1
periksa apakah aswer ini membantu Anda stackoverflow.com/questions/1777705/…
Fábio Luiz
Metode splice () mengubah array dengan menambahkan atau menghapus dari array dan hanya mengembalikan item yang dihapus.
Shaik Md N Rasool

Jawaban:

266

splice()mengubah array asli sedangkan slice()tidak tetapi keduanya mengembalikan objek array.

Lihat contoh di bawah ini:

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

Ini akan kembali [3,4,5]. The array asli dipengaruhi mengakibatkan arraymenjadi [1,2].

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

Ini akan kembali [3,4,5]. The array asli TIDAK terpengaruh dengan menghasilkan arraymenjadi [1,2,3,4,5].

Di bawah ini adalah biola sederhana yang menegaskan hal ini:

//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
sumber
20
Penting juga untuk mengamati bahwa metode array slice () dapat digunakan untuk menyalin array dengan tidak memberikan argumen apa punarr1 = arr0.slice()
Mg Gm
3
Anda dapat menganggapnya spliceseperti pemerintah mengambil pajak dari Anda. Padahal slicelebih banyak cowok copy-paste.
radbyx
.splice()adalah sangat unintuitive, saya hanya menghabiskan usia mencoba untuk mencari tahu mengapa referensi ke array asli kembali undefinedsampai saya menemukan thread ini.
Nixinova
61

Splice dan Slice keduanya adalah fungsi Javascript Array.

Splice vs Slice

  1. Metode splice () mengembalikan item yang dihapus dalam array dan metode slice () mengembalikan elemen yang dipilih dalam array, sebagai objek array baru.

  2. Metode splice () mengubah array asli dan metode slice () tidak mengubah array asli.

  3. Metode splice () dapat mengambil n jumlah argumen dan metode slice () membutuhkan 2 argumen.

Sambatan dengan Contoh

Argumen 1: Indeks, Diperlukan. Bilangan bulat yang menentukan pada posisi apa untuk menambah / menghapus item, Gunakan nilai negatif untuk menentukan posisi dari akhir array.

Argumen 2: Opsional. Jumlah item yang akan dihapus. Jika diatur ke 0 (nol), tidak ada item yang akan dihapus. Dan jika tidak lulus, semua item dari indeks yang disediakan akan dihapus.

Argumen 3 ... n: Opsional. Item baru yang akan ditambahkan ke array.

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]

Iris dengan Contoh

Argumen 1: Diperlukan. Integer yang menentukan tempat untuk memulai pemilihan (Elemen pertama memiliki indeks 0). Gunakan angka negatif untuk memilih dari akhir array.

Argumen 2: Opsional. Integer yang menentukan tempat untuk mengakhiri pemilihan tetapi tidak termasuk. Jika dihilangkan, semua elemen dari posisi awal dan ke akhir array akan dipilih. Gunakan angka negatif untuk memilih dari akhir array.

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
sumber
3
Meskipun kedua fungsi melakukan tugas yang sangat berbeda, tidak seperti splice(x,y), dalam slice(x,y)argumen kedua ytidak dihitung dari posisi x, tetapi dari elemen pertama array.
Ramesh Pareek
Satu hal lagi yang saya catat: alih-alih array.slice(index, count), jika Anda gunakan array.slice((index, count)), Anda akan mendapatkan bagian yang tersisa setelah 'mengiris'. Cobalah!
Ramesh Pareek
23

Metode slice () mengembalikan salinan sebagian array ke objek array baru.

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

Ini TIDAK mengubah participantFormsarray tetapi mengembalikan array baru yang mengandung elemen tunggal yang ditemukan di indexposisi dalam array asli.

Metode splice () mengubah konten array dengan menghapus elemen yang ada dan / atau menambahkan elemen baru.

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

Ini akan menghapus satu elemen dari participantFormsarray di indexposisi.

Ini adalah fungsi asli Javascript, AngularJS tidak ada hubungannya dengan mereka.

Alec Kravets
sumber
Adakah yang bisa memberikan contoh bermanfaat dan apa yang ideal untuk masing-masing? Suka situasi yang Anda lebih suka menggunakan sambatan atau irisan?
petrosmm
1
jawaban ini sebagian salah. untuk splicearg ke-2 adalah jumlah elemen dalam array kembali, tetapi untuk sliceargumen ke-2 adalah indeks dari elemen terakhir untuk mengembalikan + 1. slice(index,1)tidak selalu mengembalikan array dari satu elemen mulai dari index. [1,2,3,4,5].slice(0,1)mengembalikan [1]tetapi [1,2,3,4,5].slice(3,1)mengembalikan []karena 1ditafsirkan sebagai final index +1demikian final index = 0tetapi ini sebelum start index = 3array kosong dikembalikan.
BaltoStar
Mengapa ini bukan jawaban teratas?
JJ Labajo
23

Berikut ini adalah trik sederhana untuk mengingat perbedaan antara 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:

Anggap "spl" (first 3 letters of splice)sebagai kependekan dari "panjang spesifik", bahwa argumen kedua harus panjang bukan indeks

Sajeetharan
sumber
1
Ini lebih dari sekadar bagaimana Anda menentukan argumen. Salah satunya (splice) memodifikasi array basis dan yang lainnya tidak.
Arbiter
juga bisa menganggap splice sebagai split (menghasilkan 2 array) + slice
14

Sambungan - Referensi MDN - ECMA-262 spec

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

Parameter

  • start: yg dibutuhkan. Indeks awal.
    Jika startnegatif, maka diperlakukan "Math.max((array.length + start), 0)"sesuai spek (contoh yang disediakan di bawah) secara efektif dari akhir array.
  • deleteCount: pilihan. Jumlah elemen yang akan dihapus (semua dari startjika tidak disediakan).
  • item1, item2, ...: pilihan. Elemen yang akan ditambahkan ke array dari startindeks.

Pengembalian : Array dengan elemen yang dihapus (array kosong jika tidak ada yang dihapus)

Mutasi array asli : Ya

Contoh:

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 ]

Lebih banyak contoh dalam contoh MDN Splice


Slice - Referensi MDN - ECMA-262 spec

Parameter Sintaks
array.slice([begin[, end]])

  • begin: pilihan. Indeks awal (default 0).
    Jika beginnegatif, maka diperlakukan "Math.max((array.length + begin), 0)"sesuai spek (contoh yang disediakan di bawah) secara efektif dari akhir array.
  • end: pilihan. Indeks terakhir untuk ekstraksi tetapi tidak termasuk (default array.length). Jika endnegatif, maka diperlakukan "Math.max((array.length + begin),0)"sesuai spek (contoh yang disediakan di bawah) secara efektif dari akhir array.

Pengembalian : Array yang mengandung elemen yang diekstraksi.

Bermutasi asli : Tidak

Contoh:

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 ]

Contoh lainnya dalam contoh MDN Slice

Perbandingan kinerja

Jangan menganggap ini sebagai kebenaran absolut karena tergantung pada masing-masing skenario yang satu mungkin lebih baik daripada yang lain.
Uji kinerja

taguenizy
sumber
12

Splice dan Slice adalah perintah Javascript bawaan - bukan perintah khusus AngularJS. Slice mengembalikan elemen array dari "start" hingga tepat sebelum specifier "akhir". Splice mengubah array aktual, dan mulai pada "awal" dan mempertahankan jumlah elemen yang ditentukan. Google memiliki banyak info tentang ini, cukup cari.

mrunion
sumber
2
Splice menghapus nomor yang ditentukan dan kemudian menyisipkan argumen berikutnya.
Josiah Keller
splice menghapus sejumlah elemen dari indeks awal yang diberikan misalnya splice (4,1); menghapus satu elemen mulai dari indeks 4 sedangkan sambatan (4,3); menghapus tiga elemen dimulai dengan elemen pada indeks 4. Kemudian setelah menghapusnya, ia mengembalikan nilai yang dihapus.
briancollins081
8

The splice()Metode mengembalikan item yang dihapus dalam array. The slice()kembali metode elemen yang dipilih (s) dalam array, sebagai objek array baru.

The splice()Metode mengubah array asli dan slice()metode tidak mengubah array asli.

  • Splice() metode dapat mengambil n sejumlah argumen:

    Argumen 1: Indeks, Diperlukan.

    Argumen 2: Opsional. Jumlah item yang akan dihapus. Jika diatur ke 0 (nol), tidak ada item yang akan dihapus. Dan jika tidak lulus, semua item dari indeks yang disediakan akan dihapus.

    Argumen 3..n: Opsional. Item baru yang akan ditambahkan ke array.

  • slice() metode dapat mengambil 2 argumen:

    Argumen 1: Diperlukan. Integer yang menentukan tempat untuk memulai pemilihan (Elemen pertama memiliki indeks 0). Gunakan angka negatif untuk memilih dari akhir array.

    Argumen 2: Opsional. Integer yang menentukan tempat untuk mengakhiri seleksi. Jika dihilangkan, semua elemen dari posisi awal dan ke akhir array akan dipilih. Gunakan angka negatif untuk memilih dari akhir array.

Ranjith Ayyadurai
sumber
4

splice & hapus item Array dengan indeks

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

masukkan deskripsi gambar di sini

xgqfrms
sumber
3

Contoh lain:

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

slice tidak mengubah array asli, tetapi mengembalikan array baru, tetapi splice mengubah array asli.

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

Metode splice argumen kedua berbeda dengan metode slice. Argumen kedua dalam splice mewakili jumlah elemen yang akan dihapus dan dalam slice itu mewakili indeks akhir.

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 mewakili elemen terakhir sehingga mulai dari -3 hingga -1. Di atas adalah perbedaan utama antara metode splice dan slice.

dev verma
sumber
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
sumber
Mohon berikan informasi lebih lanjut tentang apa yang sedang terjadi
MKant
2

Perbedaan antara fungsi build-in javascript Slice () dan Splice () adalah, Slice mengembalikan item yang dihapus tetapi tidak mengubah array asli; Suka,

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

tetapi dalam kasus splice () itu mempengaruhi array asli; Suka,

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

JavaScript Array splice () Metode Dengan Contoh

Contoh1 oleh tutsmake -Hapus 2 elemen dari indeks 1

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

 arr.splice(1,2);

 console.log( arr ); 

Example-2 By tutsmake - Tambahkan elemen baru dari indeks 0 JavaScript

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

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

 console.log( arr );  

Contoh-3 oleh tutsmake - Tambahkan dan Hapus Elemen di JavaScript Array

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/

Pengembang
sumber