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


调试 JavaScript 代码最简单的方法是使用 console.log(),许多开发人员都在使用它。有时,我们需要了解数组的结构和存储的值以进行调试。在本教程中,我们将学习如何查看结构体的数组。

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

使用 JSON.stringify() 方法

JSON.stringify() 方法允许我们将 JSON 对象转换为字符串。数组在 JavaScript 中也是一个对象,因此我们可以使用 JSON.stringify() 方法将数组转换为字符串。如果数组包含对象,则它会在结果字符串中显示“ [object 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>

在本教程中,用户学习了三种不同的方法来查看数组的结构。在这些方法中,用户只需要编写一行代码。因此,用户可以根据自己的理解和舒适度在三种方法中使用任何一种。

更新于: 2023年2月28日

361 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告