search

Home >Web Front-end >JS Tutorial >How to view an array of structures in JavaScript?

How to view an array of structures in JavaScript?

WBOY
WBOYforward
2023-08-30 14:37:05774browse

如何在 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);

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>

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)

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>

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

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>

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!

JavaScript json 数据类型 String Array Object 字符串 结构体 console 对象
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to change an element's class using JavaScript?Next article：How to change an element's class using JavaScript?

Related articles

See more