Kaedah Javascript Slice dengan Contoh

Linda Hamilton
Lepaskan: 2024-09-20 06:54:08
asal
456 orang telah melayarinya

Javascript Slice method with Example

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);
Salin selepas log masuk

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]
Salin selepas log masuk

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
Salin selepas log masuk

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]
Salin selepas log masuk

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]
Salin selepas log masuk

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++) {}
Salin selepas log masuk

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]
Salin selepas log masuk

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]
Salin selepas log masuk

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"]
Salin selepas log masuk

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"]
Salin selepas log masuk

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

Salin selepas log masuk

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"]
Salin selepas log masuk

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

const somewhereWeDontKnow = elements.slice(5, 2); // []
Salin selepas log masuk

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); // []
Salin selepas log masuk

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' ]
Salin selepas log masuk

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]
Salin selepas log masuk

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]
Salin selepas log masuk

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"
Salin selepas log masuk

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"
Salin selepas log masuk

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"

Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!