首页 › JavaScript › JavaScript 教程

JSON 与数据交互

JavaScript 教程 · 第 13 章 · 4 次浏览

JSON（JavaScript Object Notation）是前后端数据交换的标准格式，语法与 JavaScript 对象几乎一致。

两个核心方法

  • JSON.stringify(obj)：对象转 JSON 字符串；
  • JSON.parse(str)：JSON 字符串转对象。

发起网络请求

fetch() 是现代浏览器内置的请求 API，返回 Promise。基本用法：fetch(url).then(res => res.json()).then(data => ...)。

async/await 让异步代码更接近同步写法：const res = await fetch(url); const data = await res.json();。

代码示例

<script>
// 对象转 JSON 字符串
let user = { name: "小王", age: 25, tags: ["前端", "学习"] };
let jsonStr = JSON.stringify(user);
console.log(jsonStr);
// {"name":"小王","age":25,"tags":["前端","学习"]}

// JSON 字符串转对象
let obj = JSON.parse(jsonStr);
console.log(obj.name);     // 小王

// fetch 请求（示例 API）
async function loadUsers() {
    try {
        let res = await fetch("https://jsonplaceholder.typicode.com/users/1");
        let data = await res.json();
        console.log("用户：", data.name);
    } catch (err) {
        console.error("请求失败：", err);
    }
}
loadUsers();
</script>
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读