How to view an array of structures in JavaScript?-JS Tutorial-php.cn

How to view an array of structures in JavaScript?

WBOY

Release： 2023-08-30 14:37:05

forward

721 people have browsed it

如何在 JavaScript 中查看结构体数组？

The easiest way to debug JavaScript code is to use console.log() which many developers use. Sometimes, we need to understand the structure of an array and the stored values for debugging. In this tutorial, we will learn to view an array of structures.

Various methods in JavaScript allow us to inspect the structure of an array. For example, we can know if an array contains objects, nested arrays, strings, numbers, or Boolean values.

Use JSON.stringify() method

The JSON.stringify() method allows us to convert a JSON object into a string. An array is also an object in JavaScript, so we can use the JSON.stringify() method to convert an array into a string. If the array contains objects, "[object object]" is displayed in the result string.

grammar

Users can use the JSON.stringify() method according to the following syntax to view the structure of the array.

JSON.stringify(array);

Copy after login

In the above syntax, we pass the array as a parameter of the JSON.stringify() method.

Example

In the following example, we create an array containing various values such as strings, booleans, and numbers. After that, we use the JSON.stringify() method to see the structure of the array.

<html>
<body>
   <h3>Using the <i> JSON.stringify() </i> method to view the array structure</h3>
   <div id = "content"> </div> 
   <script>
      let content = document.getElementById('content');
      function viewArray() {
         let test_array = ["Hello", "String 1", true, 30, false, 40];
         content.innerHTML = "The array structure is " + JSON.stringify(test_array);
      }
      viewArray();
   </script>
</body>
</html>

Copy after login

In the output, the user can observe the structure of test_array.

Use array.join() method

array.join() method converts all elements into strings and joins them by the delimiter passed as its argument.

grammar

Users can use the array.join() method according to the following syntax to view the structure of the array.

test_array.join(delimiter)

Copy after login

In the above syntax, we need to pass the delimiter to separate the array elements with delimiter.

Example

In the following example, test_array contains strings, booleans, numbers, and objects. We concatenate the array elements using "," delimiter and display the resulting string on the web page.

<html>
<body>
   <h2>Using the <i> array.join() </i> method to view the array structure.</h2>
   <div id = "content"></div>
   <script>
      let content = document.getElementById('content');
      function viewArray() {
         let test_array = ["value1", false, 3211, true, "value2", { name: "Shubham", age: 22, city: "Rajkot" }];
         content.innerHTML = "The array structure is " + test_array.join(', ');
      }
      viewArray();
   </script>
</body>
</html>

Copy after login

Use array.toString() method

JavaScript's toString() method is used to convert any object or other data type value other than string to a string. We can use the toString() method of the array to convert the array to a string and see the array structure.

grammar

Users can use the toString() method on the array according to the following syntax to view the array structure by converting the array to a string.

test_array.toString()

Copy after login

Example

In the following example, we take a test_array containing various values as a reference and execute the toString() method. In the output, the user can observe the string representation of the array. test_array contains nested arrays, which are also converted to strings by the toString() method.

<html>
<body>
   <h2>Using the <i> array.toString() </i> method to view the array structure.</h2>
   <div id = "content"></div>
   <script>
      let content = document.getElementById('content');
      function arrayStructure() {
         let test_array = [50, 60, false, true, "TypeScript", "JavaScript", [10, 20, 30]];
         content.innerHTML = "The array structure is " + test_array.toString();
      }
      arrayStructure();
   </script>
</body> 
</html>

Copy after login

Users learned three different ways to view the structure of an array in this tutorial. Within the method, the user needs to write a line of code. Therefore, users can use any of these three methods based on their understanding and comfort level.

The above is the detailed content of How to view an array of structures in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!