我的 React 之旅:第 18 天

我的 react 之旅:第 18 天

json 和数据操作

json (javascript 对象表示法) 是一种 轻量级数据格式,用于在服务器和 web 应用程序之间交换数据。它受到不同编程语言的广泛支持,是现代 web 开发的关键组件。

json 的主要特性:
1.结构:

数据以键值对的形式存储在对象中或作为值数组。示例(对象):

{  "name": "damilare",  "age": 30,  "isemployed": true,  "hobbies": ["singing", "reading", "coding"]}

示例(数组):

["dee", "fred", "inioluwa", "iteoluwa"]

2.数据交换:

json 通常用于在服务器和客户端之间发送和接收数据。

json 和 javascript 之间的转换

将 javascript 转换为 json使用 json.stringify() 将 javascript 对象或数组转换为 json 字符串。

示例:javascript 数组到 json

const names = ["dee", "fred", "inioluwa", "iteoluwa"];const jsonstring = json.stringify(names);console.log(names);       // original js arrayconsole.log(jsonstring);  // json string

示例:javascript 对象到 json

const person = {    name: "damilare",    age: 30,    isemployed: true,    hobbies: ["singing", "reading", "coding", "helping"]};const jsonstring = json.stringify(person);console.log(person);      // original js objectconsole.log(jsonstring);  // json string

2。将 json 转换为 javascript
使用 json.parse() 将 json 字符串转换为 javascript 对象或数组。

示例:json 字符串到 javascript 数组

const jsonarray = `["dee", "fred", "inioluwa", "iteoluwa"]`;const jsarray = json.parse(jsonarray);console.log(jsonarray);   // json stringconsole.log(jsarray);     // js array

示例:json 字符串到 javascript 对象

const jsonobject = `{    "name": "damilare",    "age": 30,    "isemployed": true,    "hobbies": ["singing", "reading", "coding", "helping"]}`;const jsobject = json.parse(jsonobject);console.log(jsonobject);  // json stringconsole.log(jsobject);    // js object

获取和操作 json 文件
json 数据可以从服务器或本地文件动态获取和操作。

1。获取 json 文件
使用 fetch() api 请求 json 数据。

示例:获取 json 文件

天工 天工

昆仑万维推出的通用AI智能体平台,原天工AI

天工 212 查看详情 天工

fetch("people.json")    .then(response => response.json()) // convert response to js object/array    .then(data => console.log(data));  // log the json data

2。迭代 json 数据
如果获取的 json 是对象数组,您可以使用 .foreach() 等方法来迭代每个元素。

示例:迭代获取的 json 数据

fetch("people.json")    .then(response => response.json())    .then(people => {        people.forEach(person => {            console.log(person.name); // Access properties of each object        });    });

json 在应用程序中的用例:
1.配置文件:

json 用于存储应用程序设置(例如 config.json)。

2.api:

rest api 通常返回 json 作为响应格式。

3.数据存储:

轻量级数据库(例如 firebase、mongodb)依赖于类似 json 的结构。

4.数据交换:

json 用于前端后端之间的通信。

反思

我学到了什么:

如何将 javascript 对象/数组转换为 json,反之亦然。使用 fetch() 从外部文件或 api 请求 json 数据。使用 .foreach() 迭代 json 数据。

每天的成长都是甜蜜的,尽管需要额外的纪律。

第18天被压垮

以上就是我的 React 之旅:第 18 天的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/385967.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月6日 13:35:18
下一篇 2025年11月6日 13:38:52

相关推荐

发表回复

登录后才能评论
关注微信