JavaScript 如何查看结构的数组

调试JavaScript代码最简单的方法是使用console.log()，许多开发者都使用这个方法。有时，我们需要了解数组的结构和存储值，以达到调试的目的。在本教程中，我们将学习如何查看数组的结构。

JavaScript的各种方法允许我们检查数组的结构。例如，我们可以知道数组是否包含一个对象、嵌套数组、字符串、数字或布尔值。

使用JSON.stringify()方法

JSON.stringify()方法允许我们将JSON对象转换为字符串。数组在JavaScript中也是一个对象，所以我们可以使用JSON.stringify()方法将数组转换为字符串。如果数组包含对象，那么在结果字符串中就会显示'[object对象]’。

语法

用户可以按照下面的语法来使用JSON.stringify()方法查看数组的结构。

JSON.stringify(array);

在上面的语法中，我们将数组作为JSON.stringify()方法的一个参数来传递。

例子

在下面的例子中，我们已经创建了一个包含各种数值的数组，如字符串、布尔运算和数字。之后，我们使用JSON.stringify()方法来查看数组的结构。

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

在输出中，用户可以观察到test_array的结构。

使用array.join()方法

array.join()方法将所有元素转换为字符串，并通过作为参数的分隔符将它们连接起来。

语法

用户可以按照下面的语法来使用array.join()方法来查看数组的结构。

test_array.join(delimiter)

在上面的语法中，我们需要传递定界符，用定界符分隔数组元素。

例子

在下面的例子中，test_array包含字符串、布尔值、数字和对象。我们使用’,’分隔符连接数组元素，并在网页上显示结果字符串。

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

使用array.toString()方法

JavaScript的toString()方法是用来将任何对象或除字符串以外的其他数据类型的值转换成字符串的。我们可以对一个数组使用toString()方法，将数组转换为字符串，并看一下数组的结构。

语法

用户可以按照下面的语法对数组使用toString()方法，通过将数组转换为字符串来查看数组结构。

test_array.toString()

例子

在下面的例子中，我们以包含各种数值的test_array为参考，执行toString()方法。在输出中，用户可以观察到数组的字符串表示。test_array包含嵌套数组，toString()方法也将其转换为字符串。

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

用户在本教程中学习了三种不同的方法来查看阵列的结构。在方法中，用户只需写一行代码。所以，用户可以根据自己的理解和舒适度，在这三种方法中使用任何一种方法。