Array.slice vs. Array.splice: Membersihkan Kekeliruan

pengenalan

Sebagai pembangun JavaScript, saya sering menemui dua kaedah Array yang agak sukar untuk difahami/sepenuhnya

1. Array.slice
2. Array.splice.

Jadi, saya memutuskan untuk menyelam lebih dalam dan memecahkan kaedah ini dengan contoh yang jelas.

Jika saya menulis semula Sintaks

Array.slice

returns the deleted elements in a form of Array = Array.prototype.slice(startIndex, endIndex-1);

Array.splice (P untuk Kekal - Sentiasa ingat)

Kaedah splice dalam JavaScript mengubah suai kandungan tatasusunan dengan mengalih keluar atau menggantikan elemen sedia ada dan/atau menambah elemen baharu pada tempatnya

Mengalih keluar Sintaks elemen

returns the deleted elements in a form of Array = Array.prototype.splice(startIndex, endIndex-1); // permanent 

Menambahkan unsur Sintaks

array.splice(startIndex, 0, item1, item2, ..., itemX);

NOTA:-

1. Ia menukar tatasusunan asal dan mengembalikan tatasusunan yang dipadamkan.

2. Apabila ia berkelakuan sebagai operasi tambah ia mengembalikan [] kerana ia tidak mengalih keluar apa-apa.

mari lihat beberapa contoh:-

S1. Latihan 1 - Menggunakan slice untuk mendapatkan sebahagian daripada tatasusunan: Cipta tatasusunan nombor dari 1 hingga 10. Gunakan kaedah hirisan untuk mendapatkan tatasusunan baharu yang merangkumi nombor dari 4 hingga 8.

const arr = Array.from(Array(10), (_, i) => i+1);
console.log('Array --> ', arr);
console.log('get a new array that includes numbers from 4 to 8 --> ', arr.slice(3, 8)); // Array.prototype.slice(startIndex, endIndex-1);

// [ 4, 5, 6, 7, 8 ]

S2. Latihan 2 - Menggunakan splice untuk mengalih keluar elemen daripada tatasusunan: Buat tatasusunan buah-buahan. Gunakan kaedah splice untuk mengeluarkan "epal" dan "pisang" daripada tatasusunan.

const fruits = ['apple', 'banana', 'orange', 'mango', 'kiwi'];

fruits.splice(0, 2)// permanent

console.log('splice method to remove "apple" and "banana" from the array. --> ', fruits);

// [ 'orange', 'mango', 'kiwi' ]

S3. Latihan 3 - Menggunakan splice untuk menambah elemen pada tatasusunan: Cipta tatasusunan warna. Gunakan kaedah sambatan untuk menambah "merah jambu" dan "ungu" selepas "merah".

const colors = ['red', 'green', 'blue'];

const y = colors.splice(1, 0, "pink", "purple"); /
console.log(y); // [] see above to see why.
console.log('splice method to add "pink" and "purple" after "red" --> ', colors)

// [ 'red', 'pink', 'purple', 'green', 'blue' ]

S4. Latihan 4 - Menggunakan hirisan dan sambung bersama: Buat susunan huruf daripada 'a' hingga 'e'. Gunakan slice untuk mendapatkan tatasusunan baharu bagi tiga huruf pertama. Kemudian gunakan splice pada tatasusunan asal untuk mengalih keluar huruf ini.

const letters = ['a', 'b', 'c', 'd', 'e'];
const newSlice = letters.slice(0, 3);
const x = letters.splice(0, 3);
console.log(x);
console.log('slice to get a new array of the first three letters --> ', newSlice) // [ 'a', 'b', 'c' ]

console.log('Then use splice on the original array to remove these letters --> ', letters)[ 'd', 'e' ]

Sila hubungi saya jika anda mempunyai sebarang pertanyaan/kebimbangan.

Atas ialah kandungan terperinci Array.slice vs. Array.splice: Membersihkan Kekeliruan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!