Kaedah Javascript Slice dengan Contoh

Apakah kepingan Array JavaScript?

Array.prototype.slice ialah kaedah JS Array yang digunakan untuk mengekstrak subarray bersebelahan atau "slice" daripada tatasusunan sedia ada.

Kepingan JavaScript boleh mengambil dua hujah: penunjuk permulaan dan penghujung hirisan -- kedua-duanya adalah pilihan. Ia juga boleh digunakan tanpa sebarang hujah. Jadi, ia mempunyai tandatangan panggilan berikut:

// 

slice();
slice(start);
slice(start, end);

Jika saya ingin menghiris tatasusunan untuk mengambil sebahagian daripadanya, sebenarnya terdapat kepingan fungsi terbina dalam untuk Javascript. Di luar kotak, ia akan mengklon tatasusunan asal.

[1,2,3].slice() // [1,2,3]

Hasilnya menunjukkan alamat memori baharu, bukan tatasusunan asal. Ini boleh menjadi sangat berguna jika anda ingin merantai hasilnya dengan fungsi lain. Penggunaan sebenar ialah apabila anda memberikan sedikit input pada kepingan.

Indeks Mula

Kepingan boleh mengambil sehingga dua parameter input. Yang pertama dipanggil indeks permulaan, dan ini akan memberitahu di mana ia harus memulakan hirisan.

[1,2,3].slice(0) // returns [1,2,3]; Original array unmodified
[1,2,3].slice(1) // returns [2,3]; Original array unmodified
[1,2,3].slice(2) // returns [3]; Original array unmodified
[1,2,3].slice(3) // returns []; Original array unmodified

Secara lalai, ia akan dihiris sehingga penghujung tatasusunan. Perkara yang menarik tentang indeks permulaan ialah bukan sahaja anda boleh menggunakan sifar atau nombor positif, tetapi anda juga boleh menggunakan nombor negatif.

[1,2,3].slice(-1) // [3]
[1,2,3].slice(-2) // [2,3]
[1,2,3].slice(-3) // [1,2,3]

Apabila nombor negatif, ia merujuk kepada pengiraan indeks dari hujung n . Sebagai contoh, -1 merujuk kepada elemen terakhir tatasusunan, -2 merujuk kepada elemen terakhir kedua, dan lain-lain. Perhatikan tiada -0 , kerana tiada unsur di luar elemen terakhir. Ini boleh menjadi agak jelas atau mengelirukan bergantung pada keadaan.

Indeks tamat

Kepingan boleh mengambil parameter kedua yang dipanggil indeks akhir.

[1,2,3].slice(0,3) // [1,2,3]
[1,2,3].slice(0,2) // [1,2]
[1,2,3].slice(0,1) // [1]

Indeks akhir, juga dirujuk sebagai indeks julat, menunjuk kepada indeks elemen + 1. Apakah maksudnya? Untuk menjelaskan perkara ini, lebih mudah jika kita boleh mengaitkan dengan pernyataan for:

for (let i = 0; i < n; i++) {}

Pembolehubah i bermula pada 0 , indeks permulaan; dan berakhir pada n, indeks akhir. Indeks akhir bukan elemen terakhir tatasusunan, kerana itu akan menjadi n - 1 . Tetapi apabila ia datang kepada indeks akhir, n bermaksud "akhir" dengan elemen terakhir disertakan. Jika ini kali pertama anda menggunakan indeks akhir, hanya ingat bagaimana pernyataan ditulis, atau hanya ingat mengambil indeks elemen terakhir dan kemudian tambah satu padanya. Satu lagi cara untuk memikirkannya ialah indeks penghujung terbuka, [mula, tamat).

Seperti dalam indeks permulaan, indeks akhir boleh menjadi negatif juga.

1,2,3].slice(0,-1) // [1,2]
[1,2,3].slice(0,-2) // [1]

Beri perhatian lebih di sini. -1 merujuk kepada elemen terakhir, oleh itu jika digunakan sebagai parameter kedua, ini bermakna elemen terakhir akan dikecualikan, seperti yang telah kami jelaskan, hujung terbuka.

Kool tetapi bagaimana jika saya mahu memasukkan elemen terakhir?

[1,2,3].slice(0) // [1,2,3]

Ya, hanya gunakan input parameter tunggal.

Cara Menggunakan kepingan JavaScript: Contoh Nyata

Contoh tipikal menghiris tatasusunan melibatkan menghasilkan bahagian bersebelahan daripada tatasusunan sumber. Contohnya, tiga item pertama, tiga item terakhir dan beberapa item yang merangkumi daripada indeks tertentu sehingga indeks lain.

Seperti yang ditunjukkan dalam contoh di bawah:

const elements = [
  "Please",
  "Send",
  "Cats",
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const firstThree = elements.slice(0, 3); // ["Please", "Send", "Cats"]

const lastThree = elements.slice(-3, elements.length); // ["Make", "Sure", "Padlocked"]

const fromThirdToFifth = elements.slice(2, 5); // ["Cats", "Monkeys", "And"]

Jika kami tidak menghantar sebarang hujah ke kepingan JavaScript, kami mendapat salinan cetek tatasusunan sumber dengan semua item:

const allCopied = elements.slice();

// (12) ["Please", "Send", "Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

Ia berkesan [...elemen].

Kaedah hirisan Tatasusunan JavaScript tanpa Argumen Kedua

Jika kita tidak meluluskan hujah kedua, kepingan Tatasusunan JavaScript yang diekstrak memanjang ke elemen terakhir:

const fromThird = elements.slice(2);
// (10) ["Cats", "Monkeys", "And", "Zebras", "In", "Large", "Cages", "Make", "Sure", "Padlocked"]

const lastThree = elements.slice(-3, elements.length);
// (3) ["Make", "Sure", "Padlocked"]

const lastThreeWithNoSecArg = elements.slice(-3);
// (3) ["Make", "Sure", "Padlocked"]

JavaScript Array.prototype.slice dengan Offset Negatif

Perhatikan juga di atas bahawa, kita boleh lulus dalam nombor negatif sebagai hujah. Nilai negatif argumen menunjukkan kedudukan mengimbangi yang dikira ke belakang daripada item terakhir. Kita boleh melakukan ini untuk kedua-dua hujah:

const latestTwoBeforeLast = elements.slice(-3, -1);
// (2) ["Make", "Sure"]

Jika kita memberikan nilai yang lebih besar untuk permulaan daripada akhir, kita akan mendapat tatasusunan kosong:

const somewhereWeDontKnow = elements.slice(5, 2); // []

Ini menunjukkan kita perlu sentiasa mula menghiris daripada indeks positif yang kurang.

Array.prototype.slice: Kedudukan Mula Lebih Besar Daripada Panjang Array

Begitu juga, jika kita memasukkan nilai yang lebih besar untuk permulaan daripada panjang tatasusunan, kita mendapat tatasusunan kosong:

const somewhereInOuterSpace = elements.slice(15, 2); // []

Menggunakan kepingan JS dengan Tatasusunan Jarang

Jika kepingan sasaran kami mempunyai item yang jarang, ia juga akan disalin:

const elements = [
  "Please",
  "Send",
  ,
  "Cats",
  ,
  "Monkeys",
  "And",
  "Zebras",
  "In",
  "Large",
  "Cages",
  "Make",
  "Sure",
  "Padlocked",
];

const sparseItems = elements.slice(0, 6);
// (6) [ 'Please', 'Send', <1 empty item>, 'Cats', <1 empty item>, 'Monkeys' ]

Array.prototype.slice: Mencipta Tatasusunan daripada Senarai Argumen

Dalam bahagian ini kita agak gila tentang menghiris. Kami membangunkan dua cara menarik dengan Array.prototype.slice untuk membina tatasusunan daripada senarai argumen yang dihantar ke fungsi.

Yang pertama:

const createArray = (...args) => Array.prototype.slice.call(args);
const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

Itu mudah.

Cara peringkat seterusnya untuk melakukan ini adalah dengan cara yang paling kucar-kacir:

const boundSlice = Function.prototype.call.bind(Array.prototype.slice);

const createArray = (...args) => boundSlice(args);

const array = createArray(1, 2, 3, 4);
// (4) [1, 2, 3, 4]

Slicing a JavaScript String

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const firstThreeChars = mnemonic.slice(0, 3); // "Ple"
const lastThreeChars = mnemonic.slice(-3, mnemonic.length); // "ked"
const fromThirdToFifthChars = mnemonic.slice(2, 5); // "eas"

Again, both arguments represent zero-based index numbers or offset values. Here too, the first argument -- 0 in the firstThree assignment -- stands for the starting index or offset in the source array. And the second argument (3) denotes the index or offset before which extraction should stop.

JavaScript String Slice Nuances

Using JavaScript String slice With No Arguments

Similar to Array slice, if we don't pass any argument to String slice(), the whole string is copied over:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";
const memorizedMnemonic = mnemonic.slice();

// "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked"

JavaScript String slice with Negative Offsets

Similar to Array.prototype.slice, negative values for start and end represent offset positions from the end of the array:

const mnemonic =
  "Please Send Cats Monkeys And Zebras In Large Cages Make Sure Padlocked";

const lastThreeChars = mnemonic.slice(-3); // "ked"
const latestTwoCharsBeforeLast = mnemonic.slice(-3, -1);  // "ke"

Summary

In this post, we expounded the slice() method in JavaScript. We saw that JavaScript implements slice() in two flavors: one for Arrays with Array.prototype.slice and one for Strings with String.prototype.slice. We found out through examples that both methods produce a copy of the source object and they are used to extract a target contiguous slice from it.

We covered a couple of examples of how function composition and context binding with Function.prototype.call and Function.prototype.bind allows us to define custom functions using Array.prototype.slice to help us generate arrays from a list of arguments.

We also saw that String.prototype.slice is an identical implementation of Array.prototype.slice that removes the overhead of converting a string to an array of characters.

Atas ialah kandungan terperinci Kaedah Javascript Slice dengan Contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!