Rumah > Artikel > hujung hadapan web > Gunakan jQuery/JavaScript untuk meletupkan tatasusunan

Gunakan jQuery/JavaScript untuk meletupkan tatasusunan

WBOYke hadapan: 2023-08-23 17:09:021455semak imbas

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)

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>

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>

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];
}

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 '

Dalam output, kita dapat melihat bahawa kita menyediakan rentetan yang mengandungi '

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

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);

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>

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 + " ";
});

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>

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!

JavaScript sql jquery Array 运算符 for while 回调函数字符串循环 number

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mencari matriks terjemahan objek Poligon menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mencari matriks terjemahan objek Poligon menggunakan FabricJS?

Artikel berkaitan

Lihat lagi