js读取并解析JSON类型数据的方法

下面是"JS读取并解析JSON类型数据的方法"的完整攻略：

什么是JSON格式数据？

JSON(JavaScript Object Notation)是一种常用的数据交换格式，它基于JavaScript语法而创建。JSON格式的数据通常用于前后端之间的数据传输。

JSON数据的最外层是一个大括号{}，里面存放一系列键值对，键和值之间用冒号:分隔，键值对之间用逗号,分隔。值可以是字符串、数字、布尔型、null、对象或数组。

读取JSON数据的方法

在JavaScript中读取JSON格式的数据，需要借助JSON对象提供的API方法。

JSON.parse()方法

JSON.parse()方法可以将一个JSON格式的字符串转换成一个JavaScript对象。

语法：

let jsonObj = JSON.parse(jsonStr);

其中，jsonStr是待解析的JSON字符串，转换后生成的JavaScript对象将被赋值给jsonObj。

例如，有以下JSON字符串：

{
    "name": "张三",
    "age": 22,
    "gender": true,
    "address": {
        "province": "广东",
        "city": "深圳",
        "district": "福田区"
    },
    "hobbies": ["打游戏", "看电影", "旅游"]
}

可通过如下代码将其转换为JavaScript对象：

let jsonStr = '{ "name": "张三", "age": 22, "gender": true, "address": { "province": "广东", "city": "深圳", "district": "福田区" }, "hobbies": ["打游戏", "看电影", "旅游"] }';
let jsonObj = JSON.parse(jsonStr);
console.log(jsonObj);

解析结果将显示在控制台中:

{
    name: "张三",
    age: 22,
    gender: true,
    address: {
        province: "广东",
        city: "深圳",
        district: "福田区"
    },
    hobbies: ["打游戏", "看电影", "旅游"]
}

XMLHttpRequest对象获取JSON数据

我们可以通过XMLHttpRequest（XHR）对象向后端发送请求并获取响应，从而获取JSON格式的数据。

下面是一个示例，通过XMLHttpRequest对象从后端获取JSON数据。

// 创建一个XMLHttpRequest对象
let xhr = new XMLHttpRequest();

// 配置请求参数
xhr.open('GET', 'http://example.com/path/to/data.json', true); // GET请求，请求地址为http://example.com/path/to/data.json，采用异步方式交互数据

// 设置响应处理函数
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) { // 请求已完成
        if (xhr.status === 200) { // HTTP状态码为200，表示请求成功
            let jsonObj = JSON.parse(xhr.responseText); // 将响应文本转换成JavaScript对象
            console.log(jsonObj); // 在控制台中显示转换后的JavaScript对象
        } else {
            console.log('请求失败！'); // 请求失败
        }
    }
};

// 发送请求
xhr.send(null);

fetch方法获取JSON数据

fetch方法可以发送异步请求，返回一个Promise对象，可以轻松获取JSON格式的数据。

下面是一个示例，通过fetch方法获取后端JSON数据。

fetch('http://example.com/path/to/data.json')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log('请求失败！', error));

注意事项

在使用JSON.parse()方法解析JSON格式数据时，要确保JSON字符串是符合规范的。例如，属性名称必须用双引号包裹，不能使用单引号或没有引号。否则，将抛出语法错误。