Gunakan jQuery/JavaScript untuk meletupkan tatasusunan-tutorial js-php.cn

Gunakan jQuery/JavaScript untuk meletupkan tatasusunan

Dalam tutorial ini, kita akan belajar untuk menggabungkan tatasusunan yang diberikan menggunakan JavaScript dan JQuery. Dalam pembangunan web, selalunya terdapat situasi di mana tatasusunan perlu digabungkan. Sebagai contoh, kami diberikan senarai tag dan perlu menggabungkannya ke dalam rentetan untuk dimasukkan ke dalam halaman web. Satu lagi situasi di mana anda mungkin perlu menggabungkan tatasusunan ialah semasa menulis pertanyaan SQL.

Di sini kita akan mempelajari 4 cara untuk menggabungkan elemen tatasusunan yang diberikan.

Gunakan kaedah Array.join() untuk menggabungkan tatasusunan

Kaedah

array.join() membolehkan kami menggabungkan elemen tatasusunan ke dalam rentetan dengan menentukan pembatas.

Tatabahasa

Pengguna boleh menggunakan kaedah JavaScript join() untuk menggabungkan tatasusunan mengikut sintaks berikut.

Array.join(delimiter)

Salin selepas log masuk

Dalam sintaks di atas, 'Array' ialah tatasusunan rujukan untuk digabungkan, dan pemisah ialah aksara yang perlu kita gunakan untuk menggabungkan elemen tatasusunan.

Contoh

Kami telah mencipta tatasusunan 'arr' yang mengandungi nama buah-buahan dalam contoh di bawah. Selepas itu, kami menggunakan kaedah array.join() untuk menggabungkan semua nama buah dan menyimpannya dalam rentetan 'buah'.

Dalam output, kita boleh melihat rentetan 'buah' yang mengandungi nama semua buah dalam tatasusunan.

<html>
<body>
   <h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      
      // Array of fruit names
      let arr = ["Banana", "Orange", "Apple", "Mango"];
      
      // Join the array elements
      let fruits = arr.join();
      output.innerHTML = "The original array is: " + arr + "<br><br>";
      output.innerHTML += "The joined array is: " + fruits;
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Kami telah mencipta tatasusunan yang mengandungi nama warna dalam contoh di bawah. Selepas itu, kami menggunakan kaedah join() dan lulus aksara ‘|’ sebagai parameter kaedah join() untuk memisahkan setiap elemen tatasusunan dengan pembatas.

Dalam output, pengguna boleh memerhati elemen tatasusunan asal dan hasil tatasusunan yang digabungkan.

<html>
<body>
   <h3> Using the <i> array.join() </i> method to implode the array in JavaScript </h3>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      let colors = ["Red", "Green", "White", "Black"];
      
      // Join the array elements
      let colorStr = colors.join(' | ');
      output.innerHTML = "The original array is: " + colors + "<br><br>";
      output.innerHTML += "The joined array is: " + colorStr;
   </script>
</body>
</html>

Salin selepas log masuk

Gabungkan tatasusunan dalam JavaScript menggunakan untuk gelung dan operator '+'

Kita boleh menggunakan gelung gelung atau gelung while untuk melintasi tatasusunan. Semasa mengulangi elemen tatasusunan, kita boleh menyertainya menggunakan operator '+' atau '+='. Selain itu, kita boleh menggunakan pembatas semasa menggabungkan elemen tatasusunan.

Tatabahasa

Pengguna boleh menggunakan operator gelung for dan ‘+’ untuk menggabungkan tatasusunan mengikut sintaks berikut.

for ( ) {
   result += array[i];
}

Salin selepas log masuk

Dalam sintaks di atas, kami menambahkan arry[i] pada rentetan 'hasil'.

Contoh

Dalam contoh di bawah, kami telah mencipta tatasusunan yang mengandungi nombor dalam tertib menaik. Kami mencipta pembolehubah yang dipanggil 'numberStr' untuk menyimpan hasil tatasusunan bercantum.

Kami menggunakan gelung for untuk lelaran melalui tatasusunan dan menambahkan nombor[i] pada 'numberStr' pada setiap lelaran. Selain itu, kami menambah pembatas '<' selepas menambahkan setiap elemen pada rentetan 'numberStr'.

Dalam output, kita dapat melihat bahawa kita menyediakan rentetan yang mengandungi '<' dengan menggabungkan elemen tatasusunan.

<html>
<body>
   <h3>Using the <i> for loop and + operator </i> to implode the array in JavaScript</h3>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      let number = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
      let numberStr = "";
      // Using the for loop
      for (let i = 0; i < number.length; i++) {
         numberStr += number[i];
         if (i < number.length - 1) {
            numberStr += " < ";
         }
      }
      output.innerHTML = "The original array is: " + number + "<br><br>";
      output.innerHTML += "The joined array is: " + numberStr;
   </script>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah Array.reduce() dan operator ‘+’ untuk menggabungkan tatasusunan dalam JavaScript

Kaedah

array.reduce() berfungsi dengan menggabungkan senarai tatasusunan menjadi satu elemen. Di sini, kami akan melaksanakan kaedah array.reduce() dengan mengambil tatasusunan sebagai rujukan dan menghantar fungsi panggil balik sebagai parameter untuk menggabungkan elemen tatasusunan.

Tatabahasa

Pengguna boleh menggunakan kaedah array.reduce() untuk menggabungkan tatasusunan mengikut sintaks berikut.

message.reduce((a, b) => a + " " + b);

Salin selepas log masuk

Dalam sintaks di atas, kami menyerahkan fungsi panggil balik kepada kaedah gabungan untuk menyertai elemen tatasusunan.

Contoh

Dalam contoh di bawah, kami mencipta tatasusunan yang mengandungi rentetan mesej. Selepas itu, kami mengambil tatasusunan 'mesej' sebagai rujukan dan melaksanakan kaedah reduce() untuk menggabungkan tatasusunan.

Selain itu, kami menghantar parameter a dan b kepada fungsi panggil balik kaedah reduce(). Selepas setiap lelaran, 'a' menyimpan hasil gabungan tatasusunan, manakala 'b' mewakili elemen tatasusunan semasa. Badan fungsi menambahkan 'b' kepada 'a' dalam cara yang diasingkan ruang.



   Using the  array.reduce() method  to implode the array in JavaScript 
    
   <script>
      let output = document.getElementById('output');
      let message = ["Hello", "Programmer", "Welcome", "to", "JavaScript", "Tutorial"];
      
      // Using the array.reduce() method
      let messageStr = message.reduce((a, b) =&gt; a + &quot; &quot; + b);
      output.innerHTML = "The original array is: " + message + "<br><br>";
      output.innerHTML += "The joined array is: " + messageStr;
   </script>

Salin selepas log masuk

Gunakan kaedah Each() untuk menggabungkan tatasusunan dalam JQuery

Setiap kaedah () jQuery digunakan untuk mengulang elemen tatasusunan. Kita boleh lelaran melalui elemen tatasusunan dan menggabungkan setiap elemen satu demi satu.

Tatabahasa

Pengguna boleh menggunakan kaedah each() JQuery untuk menggabungkan tatasusunan mengikut sintaks berikut.

$.each(array, function (index, value) {
   treeStr += value + " ";
});

Salin selepas log masuk

Dalam sintaks di atas, kaedah each() meletupkan tatasusunan sebagai parameter pertama dan menggabungkan tatasusunan dengan fungsi panggil balik sebagai parameter kedua.

Contoh

Dalam contoh di bawah, kami telah mencipta tatasusunan yang mengandungi nama pokok. Selepas itu, kami mengulangi tatasusunan menggunakan kaedah each() jQuery. Kami mendapat indeks semasa dan nilai elemen dalam fungsi panggil balik setiap () kaedah. Jadi kita tambahkan nilai elemen ke dalam 'treeStr'.

Akhir sekali, kita dapat melihat nilai 'treeStr' dalam output.

<html>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i> each() method </i> to implode the array in jQuery</h3>
   <div id="output"> </div>
   <script>
      let output = document.getElementById('output');
      let tree = ["oak", "pine", "ash", "maple", "walnut", "birch"];
      let treeStr = "";
      
      // Using the each() method
      $.each(tree, function (index, value) {
         treeStr += value + " ";
      });
      output.innerHTML = "The original array is: " + tree + "<br><br>";
      output.innerHTML += "The joined array is: " + treeStr;
   </script>
</body>
</html>

Salin selepas log masuk

Kaedah

array.join() ialah salah satu cara terbaik untuk menggabungkan tatasusunan dalam JavaScript. Walau bagaimanapun, jika pengaturcara memerlukan lebih banyak pilihan tersuai untuk menggabungkan tatasusunan, mereka juga boleh menggunakan untuk gelung dan pengendali '+'. Dalam JQuery, pengaturcara boleh menggunakan kaedah each() atau kaedah makeArray() dan join(), yang berfungsi serupa dengan kaedah join() JavaScript.

Atas ialah kandungan terperinci Gunakan jQuery/JavaScript untuk meletupkan tatasusunan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!