js 如何遍历json-js教程-PHP中文网

js 如何遍历json

畫卷琴夢

发布： 2024-12-01 05:43:02

原创

1056人浏览过

通过将 JSON 字符串解析为 JavaScript 对象，您可以使用循环遍历其键和值。使用 for...in 循环可以遍历键，而 Object.keys() 和 forEach() 可以遍历值。如果 JSON 对象包含数组，可以使用 Array.forEach() 方法遍历其中的元素。

js 如何遍历json

如何使用 JavaScript 遍历 JSON

第一步：将 JSON 字符串解析为 JavaScript 对象

<code class="js">const jsonObject = JSON.parse(jsonString);</code>

登录后复制

第二步：使用循环遍历对象

使用 for...in 循环遍历对象键

<code class="js">for (const key in jsonObject) {
  // key 是对象键
}</code>

登录后复制

使用 Object.keys() 和 forEach() 循环遍历对象值

<code class="js">Object.keys(jsonObject).forEach((key) => {
  // jsonObject[key] 是对象值
});</code>

登录后复制

使用 Array.forEach() 循环遍历数组

如果 JSON 对象包含数组，可以使用 Array.forEach() 方法遍历数组元素：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

<code class="js">jsonObject.array.forEach((element) => {
  // element 是数组元素
});</code>

登录后复制

示例：

以下示例展示了如何遍历以下 JSON 对象：

<code class="json">{
  "name": "John Doe",
  "age": 30,
  "occupation": "Software Engineer",
  "hobbies": ["coding", "reading", "hiking"]
}</code>

登录后复制

使用 for...in 循环遍历键：

<code class="js">const jsonObject = JSON.parse(json);

for (const key in jsonObject) {
  console.log(`Key: ${key}`);
}</code>

登录后复制

输出：

<code>Key: name
Key: age
Key: occupation
Key: hobbies</code>

登录后复制

使用 Object.keys() 和 forEach() 循环遍历值：

<code class="js">Object.keys(jsonObject).forEach((key) => {
  console.log(`Value: ${jsonObject[key]}`);
});</code>

登录后复制

输出：

<code>Value: John Doe
Value: 30
Value: Software Engineer
Value: coding,reading,hiking</code>

登录后复制

以上就是js 如何遍历json的详细内容，更多请关注php中文网其它相关文章！

大家都在看：