js-将JSON 字符串转换为JavaScript 对象(JSON.parse)

1.背景

javascript 复制代码
// JSON 字符串
const jsonString = '{"name": "张三", "age": 30, "city": "北京"}';

获取name值

2. JSON字符串进行转换为JS对象

将 JSON 字符串转换为 JavaScript 对象(JSON.parse(jsonString))

javascript 复制代码
// JSON 字符串
const jsonString = '{"name": "张三", "age": 30, "city": "北京"}';

// 将 JSON 字符串转换为 JavaScript 对象
const jsonObject = JSON.parse(jsonString);

console.log(jsonObject.name); // 输出: 张三
console.log(jsonObject.age);  // 输出: 30
console.log(jsonObject.city); // 输出: 北京

JSON.parse 是 JavaScript 中用于将 JSON 格式的字符串转换为 JavaScript 对象的方法。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成

JSON.parse方法接受一个 JSON 格式的字符串作为参数,并返回一个 JavaScript 对象。如果字符串不是有效的 JSON 格式,则会抛出一个 SyntaxError 异常。

3. 应用场景

  1. 从服务器获取数据:当从服务器获取数据时,数据通常是 JSON 格式的字符串,需要将其转换为 JavaScript 对象以便进一步处理。

  2. 本地存储数据:在浏览器中使用 localStoragesessionStorage 存储数据时,可以将 JavaScript 对象转换为 JSON 字符串存储,需要时再转换回对象。

  3. 跨域数据交换:在 Web 开发中,经常需要跨域交换数据,JSON 是一种常用的数据格式。

4.注意事项

  1. 异常处理JSON.parse 在解析无效的 JSON 字符串时会抛出异常,因此在使用时应该进行异常处理。

  2. 安全性 :当解析来自不受信任的源的 JSON 数据时,应该小心防范潜在的代码注入攻击。可以使用 JSON.parse 的第二个参数,一个函数,来过滤或转换解析后的数据。

  3. 数据类型JSON.parse 只能解析 JSON 格式的字符串,不能解析 JavaScript 的其他数据类型,如 undefinedfunction 等。

javascript 复制代码
try {
    const jsonString = '{"name": "张三", "age": 30, "city": "北京"}';
    const jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
} catch (error) {
    console.error("解析 JSON 字符串时出错:", error);
}
相关推荐
KaMeidebaby9 分钟前
卡梅德生物技术快报|葫芦科植物遗传转化:Fast‑TrACC 工程化优化:葫芦科植物遗传转化效率提升与成本控制
前端·其他·百度·新浪微博
换日线°24 分钟前
vue 加入购物车抛物线动画
前端·javascript·vue.js
切糕师学AI1 小时前
为什么你的 SPA 网址必须包含 `#`?—— 前端路由 Hash 模式深度解析
前端·spa 网址·hash路由
冴羽1 小时前
超越Vibe Coding —— AI 辅助编程进阶指南
前端·javascript·ai编程
流氓也是种气质 _Cookie1 小时前
Chrome Performance常见名词解释(FP, FCP, LCP, DCL, FMP, TTI, TBT, FID, CLS)
开发语言·javascript·ecmascript
MXN_小南学前端1 小时前
自制和整理常用前端 AI Skills分享,从需求到页面(附github地址)
前端·ai编程
yuki_uix1 小时前
双 RAF + MutationObserver:微前端跳转后的滚动复原完整方案
前端
暗不需求1 小时前
一文吃透 React Context:跨层级通信的利器
前端·javascript·react.js
Wect1 小时前
前端工程化 Mock 数据原理与实践
前端·api·前端工程化
小宇的天下2 小时前
Calibre DESIGNrev 单元(Cell)操作核心指南
java·前端·javascript