js 遍历json返回的map内容示例代码

下面就来详细介绍一下“js 遍历json返回的map内容示例代码”的完整攻略。

1. 了解JSON

在使用 JavaScript 遍历 JSON 对象之前，我们需要先了解 JSON 的概念和使用方法。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，与 XML 类似，但比 XML 更加简洁。在 JavaScript 中，可以使用 JSON 对象来进行 JSON 格式的解析和处理。

一个 JSON 对象通常有以下两种表示方式：

• 对象表示法：使用 {} 括起来的一组键值对，每个键值对之间使用逗号进行分隔；

{
  "name": "张三",
  "age": 18,
  "gender": "男"
}

• 数组表示法：使用 [] 括起来的一组值，每个值之间使用逗号进行分隔；

["张三", 18, "男"]

2. 遍历 JSON 对象

遍历 JSON 对象可以使用 JavaScript 中的 for-in 语句。它可以遍历 JSON 对象的所有属性和方法，包括继承的属性和方法。for-in 语句的语法如下：

for (variable in object) {
  // code to be executed
}

其中，变量 variable 表示对象的属性名称，object 表示要遍历的对象。示例如下：

var jsonObj = {
  "name": "张三",
  "age": 18,
  "gender": "男"
};

for(var key in jsonObj){
    console.log(key + ": " + jsonObj[key]);
}

输出结果如下：

name: 张三
age: 18
gender: 男

3. 遍历 JSON 数组

遍历 JSON 数组除了使用普通的 for 循环之外，还可以使用 forEach() 方法。其语法如下：

array.forEach(function(currentValue, index, arr), thisValue)

其中，参数 currentValue 表示当前正在处理的元素，index 表示正在处理的当前元素在数组中的索引，arr 表示正在处理的数组，thisValue 表示可选的参数，作为函数执行时 this 的值。示例如下：

var jsonArray = [
    {"name": "张三", "age": 18},
    {"name": "李四", "age": 20},
    {"name": "王五", "age": 22}
];

jsonArray.forEach(function(item, index, arr){
    console.log(index + ": " + item.name + " - " + item.age);
});

输出结果如下：

0: 张三 - 18
1: 李四 - 20
2: 王五 - 22

示例说明

下面给出两个示例说明：

示例一

请你输出下面 JSON 数据中所有文件的文件名和文件大小：

{
  "dir": "/home/user",
  "files": [
    {
      "filename": "file1.txt",
      "filesize": "2KB"
    },
    {
      "filename": "file2.txt",
      "filesize": "5KB"
    },
    {
      "filename": "file3.txt",
      "filesize": "1KB"
    }
  ]
}

使用 JavaScript 代码实现如下：

var jsonObj = {
  "dir": "/home/user",
  "files": [
    {
      "filename": "file1.txt",
      "filesize": "2KB"
    },
    {
      "filename": "file2.txt",
      "filesize": "5KB"
    },
    {
      "filename": "file3.txt",
      "filesize": "1KB"
    }
  ]
};

for(var i=0; i<jsonObj.files.length; i++){
    console.log("filename: " + jsonObj.files[i].filename + ", filesize: " + jsonObj.files[i].filesize);
}

输出结果如下：

filename: file1.txt, filesize: 2KB
filename: file2.txt, filesize: 5KB
filename: file3.txt, filesize: 1KB

示例二

请你输出下面 JSON 数组中所有人的姓名和年龄：

[
  {
    "name": "张三",
    "age": "18"
  },
  {
    "name": "李四",
    "age": "20"
  },
  {
    "name": "王五",
    "age": "22"
  }
]

使用 JavaScript 代码实现如下：

var jsonArray = [
  {
    "name": "张三",
    "age": "18"
  },
  {
    "name": "李四",
    "age": "20"
  },
  {
    "name": "王五",
    "age": "22"
  }
];

jsonArray.forEach(function(item, index, arr){
    console.log("name: " + item.name + ", age: " + item.age);
});

输出结果如下：

name: 张三, age: 18
name: 李四, age: 20
name: 王五, age: 22