1. 直接访问对象属性

假设你有一个对象 data：

const data = { id: 1, title: "你好" };
console.log(data.title); // 输出: "你好"

应用到你的代码中

<script>// 假设这是你的本地数据（不是 API 返回的）const localData = { id: 1, title: "你好" };// 直接访问属性document.querySelector('.title').innerText = localData.title;
</script>

2. 解构赋值（推荐）

如果对象结构复杂，可以用解构提取 title：

const { title } = { id: 1, title: "你好" };
console.log(title); // 输出: "你好"

应用到你的代码中

<script>const localData = { id: 1, title: "你好" };const { title } = localData; // 解构赋值document.querySelector('.title').innerText = title;
</script>

3. 动态属性访问

如果属性名是动态的（比如通过变量指定），可以用 []语法：

const data = { id: 1, title: "你好" };
const key = "title";
console.log(data[key]); // 输出: "你好"

4. 对比 Axios 的 params（澄清区别）

场景

数据来源

如何获取 title

本地 JavaScript 对象

内存中的变量

data.title或 const { title } = data

Axios 请求的响应数据

后端 API 返回

result.data.title（需解构或直接访问）

Axios 的 params

HTTP 查询参数

仅用于 发送 给后端的参数，不用于访问本地数据

错误理解示例

// ❌ 错误！params 是用于发送请求参数的，不能用来访问本地数据
axios.get('/api', {params: {title: localData.title // 这是把 title 作为查询参数发给后端，不是读取本地数据}
});

5. 完整示例：本地数据渲染到网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>本地数据示例</title>
</head>
<body><h1 class="title"></h1><script>// 本地数据（无需请求 API）const localData = {id: 1,title: "你好，世界！",content: "这是本地存储的数据。"};// 方法1：直接访问属性document.querySelector('.title').innerText = localData.title;// 方法2：解构赋值// const { title } = localData;// document.querySelector('.title').innerText = title;</script>
</body>
</html>

总结

  • 如果你的数据已经在 JavaScript 变量中：
    直接用 对象.属性名或解构赋值（如 const { title } = data）访问，完全不需要 params。
  • 如果你需要从后端 API 获取数据：
    才需要用 Axios 的 params发送查询参数，并通过 result.data访问返回的数据。
  • 关键区别：
    params是 发给后端的参数，而 data.title是 访问本地对象的属性。