Rumah > hujung hadapan web > tutorial js > Bagaimana untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal?

Bagaimana untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal?

王林
Lepaskan: 2023-08-25 09:49:02
ke hadapan
1327 orang telah melayarinya

Bagaimana untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal?

Dalam JavaScript, kita boleh menggunakan kaedah splice() untuk menyambung tatasusunan. Kaedah splice() memasukkan atau memadam satu atau berbilang elemen dalam tatasusunan. Kita boleh melepasi indeks permulaan sebagai parameter pertama kaedah splice() yang mana kita boleh memasukkan atau memadamkan elemen. Ia memerlukan bilangan elemen untuk dialih keluar daripada tatasusunan sebagai parameter kedua dan nilai tatasusunan untuk dimasukkan ke dalam tatasusunan sebagai parameter ketiga.

Tutorial ini akan mengajar kita untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal. Tukartatasusunan asal bermaksud membuat perubahan pada tatasusunan. Setiap kali kita menggunakan tatasusunan asal dengan kaedah splice(), ia memasukkan atau mengalih keluar beberapa elemen daripada tatasusunan asal. Jadi, kami akan mengklon tatasusunan dan menggunakan kaedah splice() pada tatasusunan klon untuk memastikan tatasusunan asal sama.

Tatabahasa

Pengguna boleh menggunakan kaedah array.splice() mengikut sintaks berikut.

  let results = array.splice(startIndex, count, element1, element2, element3, ... , elementN);
Salin selepas log masuk

Parameter

  • startIndex - Ini ialah indeks pertama yang memasukkan atau mengalih keluar elemen daripada tatasusunan.

  • Count - Ia ialah bilangan elemen dalam tatasusunan yang akan diganti. Jika kita melepasi 0 sebagai nilai kiraan, ia akan memasukkan elemen pada startIndex.

  • Element1, element2, …, element - Ini ialah elemen tatasusunan baharu, diganti atau dimasukkan bermula dari indeks permulaan.

Kini kita akan melihat cara yang berbeza untuk menyambung tatasusunan tanpa mengubah tatasusunan asal.

Gunakan operator spread untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal

Pengendali spreadmembolehkan kami mengklon tatasusunan. Kita boleh mencipta klon tatasusunan asal menggunakan operator hamparan, selepas itu kita boleh menggunakan kaedah splice() untuk menggunakan tatasusunan klon kepada splice< /i> tatasusunan tanpa mengubah tatasusunan asal.

Tatabahasa

Pengguna boleh menggunakan operator spread untuk menyambung tatasusunan mengikut sintaks di bawah tanpa mengubah tatasusunan asal.

let splicedArray = [...array].splice(0, 3);
Salin selepas log masuk

Dalam sintaks di atas, tatasusunan ialah tatasusunan primitif dan kami mengklonkannya menggunakan operator hamparan dan menggunakan kaedah splice() pada tatasusunan klon.

Contoh 1

Dalam contoh di bawah, kami telah mencipta tatasusunan yang mengandungi pelbagai rentetan. Selepas itu, kami mengklonkannya menggunakan tatasusunan dengan operator hamparan dalam pendakap “[]” dan menggunakan kaedah splice().

Kami melepasi 0 sebagai indeks permulaan dan 3 sebagai jumlah bilangan elemen untuk dialih keluar daripada tatasusunan dalam kaedah splice().

<html>
   <body>
      <h3> Using the <i> spread operator </i> to splice an array without mutating the original array. </h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById('output');
         let array = ["C", "Java", "CPP", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
         let splicedArray = [...array].splice(0, 3);
         output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
         output.innerHTML += "Spliced array after the splicing:" + splicedArray + "<br>";
      </script>
   </body>
</html>
Salin selepas log masuk

Gunakan kaedah penapis() untuk menyambung tatasusunan tanpa mengubah tatasusunan asal

Kita boleh mencipta tatasusunan baharu dengan menapis elemen dalam tatasusunan asal. Kaedah splice() mengekstrak jumlah bilangan elemen daripada indeks permulaan. Oleh itu, kita boleh menggunakan kaedah filter() untuk menapis jumlah elemen kiraan daripada indeks permulaan.

Tatabahasa

Pengguna boleh menggunakan kaedah penapis() mengikut sintaks berikut untuk menyambung tatasusunan tanpa mengubah tatasusunan asal.

let splicedArray = array.filter((ele, ind) => {
   if (ind >= startIndex && ind < counts + startIndex) {
      return true;
   }
      return false;
})
Salin selepas log masuk

Dalam sintaks di atas, kami menapis elemen tatasusunan daripada startIndex ke count + startIndex.

Contoh 2

Dalam contoh di bawah, kami mempunyai tatasusunan dan menggunakan kaedah penapis() pada tatasusunan. Pengguna boleh melihat bagaimana kaedah filter() mengekstrak jumlah bilangan elemen daripada startIndex.

Selain itu, apabila kita menggunakan kaedah filter() pada tatasusunan asal, ia kekal tidak berubah.

<html>
   <body>
      <h3> Using the <i> filter() method </i> to splice an array without mutating the original array. </h3>
      <div id = "output"> </div>
      <button onclick = "spliceArray()"> Splice an array </button>
      <script>
         let output = document.getElementById('output');
            function spliceArray() {
               let startIndex = 5;
               let counts = 3;
               let array = ["C", "Java", "Cpp", "JavaScript", "TypeScript", "html", "HTML", "NodeJs", "ReactJs", "NextJs"];
            
            let splicedArray = array.filter((ele, ind) => {
               if (ind >= startIndex && ind < counts + startIndex) {
                  return true;
               }
                  return false;
            })
            output.innerHTML += "Orignal array after the splicing is " + array + "<br>";
            output.innerHTML += "Spliced array after the splicing is " + splicedArray + "<br>";
         }
      </script>
   </body>
</html>
Salin selepas log masuk

Gunakan kaedah slice() untuk menyambung tatasusunan tanpa mengubah tatasusunan asal

Kaedah

slice() mengekstrak elemen tatasusunan, di sini kita akan menggunakan salinan tatasusunan. Apabila kita melepasi 0 sebagai parameter pertama kaedah slice() semasa menggunakannya dengan tatasusunan, ia mengklon tatasusunan.

Selepas itu, kita boleh menggunakan kaedah splice() untuk menyambung tatasusunan tanpa mengubah tatasusunan asal.

Tatabahasa

Pengguna boleh menggunakan kaedah slice() dan splice() mengikut sintaks di bawah untuk menyambung tatasusunan tanpa mengubah tatasusunan asal.

let clonedArray = array.slice(0);
let splicedArray = clonedArray.splice(start, end);
Salin selepas log masuk

Dalam sintaks di atas, mula-mula, kita menggunakan kaedah slice() untuk mengklon tatasusunan, dan kemudian gunakan kaedah splice() untuk splice() tatasusunan.

Contoh 3

Contoh di bawah mengandungi tatasusunan nombor dengan berbilang nilai angka. Selepas itu, clonedArray mengandungi klon tatasusunan asal.

Seterusnya, kami menggunakan kaedah splice() dengan clonedArray dan pengguna boleh menyemak sama ada tatasusunan asal adalah sama.

<html>
   <body>
      <h3> Using the <i> slice() </i> method to splice an array without mutating the original array </h3>
      <div id = "output"> </div>
      <script>
         let output = document.getElementById('output');
         let array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
         let clonedArray = array.slice(0);
         let splicedArray = clonedArray.splice(1, 6);
         output.innerHTML += "Orignal array after the splicing: " + array + "<br>";
         output.innerHTML += "Spliced array after the splicing: " + splicedArray + "<br>";
      </script>
   </body>
</html>
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menggabungkan tatasusunan tanpa mengubah tatasusunan asal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:tutorialspoint.com
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan