在 React 中使用键从 JSON 中删除数据
介绍
JavaScript 对象表示法 (JSON) 是一种广泛流行的基于键值的数据格式，用于存储和传输数据。JSON 使用基本数据类型（例如字符串、布尔值、整数、小数、对象、数组和null）通过预定义的层次结构和键值对传输数据。由于其结构简洁且持久，大多数开发平台、No-SQL 数据库、REST、GraphQL 等都支持 JSON。
通过使用JSON API ，可以轻松将 JSON 字符串转换为 JavaScript 对象，以便使用点符号和键直接访问数据。内置的 JSON 支持允许您在 React 中轻松集成 REST API、数据管理和动态组件设计。本指南介绍了解析 JSON 数据并使用键作为输入对嵌套 JSON 对象执行删除操作的步骤。
创建 JSON 对象
JSON 对象使用一对花括号 ( {} )表示，键值使用冒号 ( : ) 分隔。可以使用单引号和双引号组合创建 JSON 字符串：
let jsonStr = '{"name":"ABC", "age":10 }';
注意： JSON 字符串只能使用双引号来包裹键和值。使用单引号包裹 JSON 字符串。可以使用parse方法将jsonStr转换为 JavaScript 对象：
let jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name, jsonObj.age); // ABC : 10
eval函数也用于解析：
let jsonObj = eval('('+jsonStr+')');
不建议使用eval ，因为eval可能被利用作为漏洞来运行格式错误的指令，尽管与parse函数不同，eval可以转换用双引号括起来的 JSON 字符串：
let jsonObj = eval('('+ "{'name':'ABC', 'age':10 }" +')');
使用正则表达式从 JSON 字符串中删除数据
正则表达式可用于使用replace函数查找和替换字符串的特定部分。一对带键的双引号可用于创建模式：
let jsonStr = '{"name":"ABC", "age":10 }';
let key = "age";
let cleanJsonRegex = new RegExp(`,.*${key}.*[, ]`, "g");
let nameJsonStr = jsonStr.replace(cleanJsonRegex, "");
console.log(nameJsonStr); // "{\"name\":\"ABC\"}"
cleanJsonRegex对象定义了匹配特定键值对的模式，可以解释为：
- ,匹配逗号字符
- .*匹配零个或多个字符，除了行终止符 ( \n )
- ${key}.*匹配key的精确值以及key后的零个或多个字符
- [, ]匹配逗号或空格
- g标志将匹配jsonStr中的所有可能匹配项
replace函数从jsonStr中查找并替换匹配的数据并返回结果字符串。
注意：正则表达式非常强大，但也很脆弱，因此请始终避免在复杂数据中使用正则表达式。
使用 JavaScript 对象从 JSON 中删除数据
JavaScript 对象提供了一种使用点符号和 JSON 数组索引来访问 JSON 数据的便捷方法。使用parse函数将 JSON 字符串转换为 JavaScript 对象：
let jsonStr = '{"name":"ABC", "age":10, "phone":["1234567890","1234567890"]}';
let jsonObj = JSON.parse(jsonStr);
delete运算符可用于从 JavaScript 对象中删除键值对：
delete jsonObj.name;
/* after delete
{
age: 10,
phone: ["1234567890", "1234567890"]
}
*/
或者，可以使用字符串键来删除键值对：
let key = 'name';
delete jsonObj[key];
在 JavaScript 对象中使用字符串键的优点是它允许使用具有特殊字符的键：
delete jsonObj['class.name'];
尖端
• 使用stringify将 JavaScript 对象转换为 JSON 字符串：
let obj = {name: "ABC"};
console.log(JSON.stringify(obj));
• 使用toJSON获取日期对象的字符串表示形式。 • 为了获得更好的支持，请使用 typescript 进行静态类型检查支持。
结论
JSON 和 JavaScript 对象具有几乎相同的语法和内置浏览器支持，可将 JSON 字符串解析为 JavaScript 对象。始终优先使用 JavaScript 对象来访问 JSON 数据。祝您编码愉快！
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
扫一扫，分享到微信
