JavaScript学习之JSON入门

什么是JSON？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于 JavaScript 的一个子集，易于人们阅读和编写。JSON以键值对的方式存储数据，类似与JavaScript中的对象。在前后端数据交互中，JSON被广泛使用。

JSON的基本语法

1. JSON对象

JSON对象是由花括号包含的一组键值对，键值对之间使用逗号分隔。

{
    "name": "Tom",
    "age": 18,
    "gender": "male"
}

2. JSON数组

JSON数组是由方括号包含的一组数据，数据之间使用逗号分隔。

["apple", "banana", "orange"]

3. JSON数据类型

在JSON中，可以使用的数据类型包括：字符串、数字、布尔、数组、对象和null。

{
    "name": "Tom",
    "age": 18,
    "gender": "male",
    "favItems": ["reading","coding"],
    "userInfo": {
        "address": "Beijing",
        "phone": 123456789
    },
    "isStudent": true,
    "desc": null
}

如何在JavaScript中使用JSON？

1. JSON.parse()

使用JSON.parse()方法将JSON字符串转换为JavaScript对象。

const jsonStr = '{"name":"Tom","age":18,"gender":"male"}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name);  // Tom
console.log(jsonObj.age);   // 18
console.log(jsonObj.gender); // male

2. JSON.stringify()

使用JSON.stringify()方法将JavaScript对象转换为JSON字符串。

const jsonObj = {
    "name": "Tom",
    "age": 18,
    "gender": "male"
}
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr);   // {"name":"Tom","age":18,"gender":"male"}

示例

示例一：解析包含JSON数组的数据

const jsonStr = '[{"name":"Tom","age":18},{"name":"Jerry","age":20}]';
const jsonObj = JSON.parse(jsonStr);
jsonObj.forEach(item => {
    console.log(item.name + " " + item.age);
})

示例二：使用axios发送POST请求，提交JSON数据

axios.post('/api/user/add', {
    "name": "Tom",
    "age": 18,
    "gender": "male"
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.log(error);
})

以上就是本次“JavaScript学习之JSON入门”的完整攻略。