Home >Web Front-end >JS Tutorial >Use jQuery/JavaScript to implode arrays

Use jQuery/JavaScript to implode arrays

WBOYforward: 2023-08-23 17:09:021486browse

In this tutorial, we will learn to merge the given arrays using JavaScript and JQuery. In web development, there are often situations where arrays need to be merged. For example, we are given a list of tags and need to merge them into a string to insert into the web page. Another situation where you may need to merge arrays is when writing SQL queries.

Here we will learn 4 ways to concatenate the elements of a given array.

Use the Array.join() method to merge arrays

The array.join() method allows us to join array elements into a string by specifying the delimiter.

grammar

Users can use the JavaScript join() method to merge arrays according to the following syntax.

Array.join(delimiter)

In the above syntax, 'Array' is the reference array to be merged, and the delimiter is the character we need to use to join the array elements.

Example

We have created an ‘arr’ array containing fruit names in the example below. After that, we use the array.join() method to concatenate all the fruit names and store them in the ‘fruits’ string.

In the output, we can observe the 'fruits' string containing the names of all the fruits in the array.

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

Example

We created an array containing color names in the example below. After that, we used join() method and passed ‘|’ character as parameter of join() method to separate each array element with delimiter.

In the output, the user can observe the original array elements and the merged array result.

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

Combining arrays in JavaScript using a for loop and the ‘ ’ operator

We can use a for loop or while loop to traverse the array. While iterating over the array elements, we can connect them using the ' ' or ' = ' operator. Additionally, we can use delimiters while concatenating array elements.

grammar

Users can use the for loop and ' ' operator to combine arrays according to the following syntax.

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

In the above syntax, we append arry[i] to the 'result' string.

Example

In the example below, we create an array containing numbers in ascending order. We create a variable called 'numberStr' to store the concatenated array result.

We use a for loop to iterate through the array and append number[i] to 'numberStr' on each iteration. Additionally, we add the '

In the output, we can observe that we prepare the string containing '

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

Use the Array.reduce() method and the ‘ ’ operator to merge arrays in JavaScript

The array.reduce() method works by merging array lists into a single element. Here, we will execute the array.reduce() method by taking the array as reference and passing the callback function as parameter to concatenate the array elements.

grammar

Users can use the array.reduce() method to merge arrays according to the following syntax.

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

In the above syntax, we pass the callback function to the join method to join the array elements.

Example

In the example below, we create an array containing message strings. After that, we take the 'message' array as a reference and execute the reduce() method to merge the arrays.

In addition, we pass the a and b parameters to the callback function of the reduce() method. After each iteration, 'a' stores the merged result of the array, while 'b' represents the current array element. The function body appends 'b' to 'a' in a space-separated manner.



   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>

Use Each() method to merge arrays in JQuery

Each jQuery's () method is used to iterate over array elements. We can iterate over the array elements and concatenate each element one by one.

grammar

Users can use JQuery's each() method to merge arrays according to the following syntax.

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

In the above syntax, the each() method implode the array as the first parameter and connects the callback function to the array as the second parameter.

Example

In the example below, we create an array containing tree names. After that, we iterate over the array using jQuery's each() method. We get the current index and element value in the callback function of each() method. So we append the element value into 'treeStr'.

Finally, we can observe the value of ‘treeStr’ in the 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>

The array.join() method is one of the best ways to combine arrays in JavaScript. However, if programmers need more custom options for merging arrays, they can also use for loops and the ' ' operator. In JQuery, programmers can use each() method or makeArray() and join() methods, which work similar to JavaScript's join() method.

The above is the detailed content of Use jQuery/JavaScript to implode arrays. For more information, please follow other related articles on the PHP Chinese website!

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

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to find the translation matrix of a Polygon object using FabricJS?Next article：How to find the translation matrix of a Polygon object using FabricJS?

See more

Use jQuery/JavaScript to implode arrays

Use the Array.join() method to merge arrays

grammar

Example

Example

Combining arrays in JavaScript using a for loop and the ‘ ’ operator

grammar

Example

Use the Array.reduce() method and the ‘ ’ operator to merge arrays in JavaScript

grammar

Example

Using the array.reduce() method to implode the array in JavaScript

Use Each() method to merge arrays in JQuery

grammar

Example

Related articles