Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
我的 React 之旅:第 18 天_创想鸟

我的 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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
2026届毕业生看过来!阿里国际要招1000人!
上一篇 2025年11月6日 13:38:25
怎么解决夸克浏览器加载网页变慢的情况 夸克浏览器有没有加速设置可以调整如何处理
下一篇 2025年11月6日 13:38:26

相关推荐

  • 如何在Debian上检测Nginx SSL状态

    在debian系统上检测nginx的ssl状态,可以通过以下几种方法进行: 使用Nginx命令行工具:打开终端,输入以下命令来检查Nginx的SSL配置是否正确: sudo nginx -t -c /etc/nginx/nginx.conf 这个命令会测试Nginx配置文件的语法是否正确,并且会显示…

    2026年9月25日
    000
  • PHP三元运算符可读性差吗_PHP三元运算符优化可读性

    三元运算符可读性取决于使用方式,合理使用能提升代码简洁性。1. 基本语法为“条件 ? 值1 : 值2”,适用于简单赋值,如根据年龄判断成年与否。2. 避免嵌套,多层三元运算符应改用 if-else 或提前返回。3. 提升可读性技巧包括:将复杂条件封装为布尔变量、换行书写嵌套表达式、仅用于赋值或返回。…

    2026年9月25日
    100
  • 如何设置Linux文件访问时间 禁止atime更新方法

    如何设置Linux文件访问时间 禁止atime更新方法如何设置Linux文件访问时间 禁止atime更新方法如何设置Linux文件访问时间 禁止atime更新方法如何设置Linux文件访问时间 禁止atime更新方法

    linux系统中可通过禁用atime提升性能。1. atime是文件访问时间,每次读取文件会更新,影响i/o性能;2. 推荐使用noatime挂载选项,在/etc/fstab中添加noatime并重挂载分区;3. 也可使用relatime保留部分atime信息;4. 特定文件可用chattr +a禁…

    2026年9月25日 • 用户投稿
    200
  • Groovy编程:在HTTP请求头中传递授权令牌的实践指南

    Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南Groovy编程:在HTTP请求头中传递授权令牌的实践指南

    本教程详细介绍了如何在Groovy中通过HTTP请求头发送授权令牌,以实现对RESTful API的安全访问。针对用户在Groovy中模拟curl -H ‘Authorization: token …’命令时遇到的常见问题,本文提供了基于java.net.URL和…

    2026年9月25日 • 用户投稿
    900
  • 快速搭建一个管理App数据和用户的界面

    快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面快速搭建一个管理App数据和用户的界面

    在电商、教育、企业服务等关键领域,app的数据管理效率与系统用户体验已成为决定产品市场竞争力的核心因素。本文将为开发者提供一套从需求分析到技术落地的完整路径,助你快速构建一个高效且易用的管理类app界面。 一、厘清需求:聚焦数据与用户场景的深度融合 构建管理型App的第一步是精准把握业务本质。必须深…

    2026年9月25日 • 用户投稿
    700
  • 通过索引获取 LinkedHashMap 的值?解决方案与最佳实践

    通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践通过索引获取 LinkedHashMap 的值?解决方案与最佳实践

    本文旨在解决如何比较两个 LinkedHashMap 中具有相同键(chargeTypeName)的值的问题。由于 LinkedHashMap 本身不支持通过索引直接访问,文章将探讨如何利用流(Stream)和分组(Grouping)等技术,有效地找出两个 LinkedHashMap 中键相同的值对…

    2026年9月25日 • 用户投稿
    100
  • 如何通过Golang日志诊断Debian网络问题

    如何通过Golang日志诊断Debian网络问题如何通过Golang日志诊断Debian网络问题如何通过Golang日志诊断Debian网络问题如何通过Golang日志诊断Debian网络问题

    本文介绍如何利用Golang日志机制在Debian系统中高效诊断网络问题。我们将探讨几种实用方法,帮助您快速定位并解决网络连接故障。 一、日志记录 标准库log包: Golang的log包是记录网络请求和响应细节的理想选择。 在发送请求前后添加日志,可以清晰地追踪请求的发送和接收过程。以下是一个简单…

    2026年9月25日 • 用户投稿
    000
  • MongoDB在Debian上的备份频率如何确定

    MongoDB在Debian上的备份频率如何确定MongoDB在Debian上的备份频率如何确定MongoDB在Debian上的备份频率如何确定MongoDB在Debian上的备份频率如何确定

    在Debian系统上,MongoDB数据库的备份频率取决于诸多因素,例如业务需求、数据更新速度、备份策略以及所选备份工具。下文将提供一些建议,帮助您确定合适的备份频率。 影响备份频率的因素 业务关键性: 业务对数据实时性的要求越高,备份频率就应越高。数据变化率: 数据更新越频繁,备份频率也应相应提高…

    2026年9月25日 • 用户投稿
    000
  • 如何在微服务之间共享静态数据

    如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据如何在微服务之间共享静态数据

    微服务架构的本质决定了微服务之间无法直接共享静态变量。正如上面摘要所说,每个微服务都是一个独立的进程,拥有自己的内存空间,静态变量只在其所属的进程内有效。试图在一个微服务中访问另一个微服务的静态变量,就像试图在一个独立的Java程序中访问另一个程序的变量一样,是不可能的。 微服务架构的独立性 微服务…

    2026年9月25日 • 用户投稿
    100
  • VSCode怎样用调试启动参数自定义运行时环境变量 VSCode启动参数自定义环境变量的创新用法​

    vscode允许通过launch.json中的”env”属性直接设置环境变量,或使用”envfile”指定.env文件来加载变量。1. 直接在launch.json中定义”env”属性可为调试会话注入键值对形式的环境变量,适用于…

    2026年9月25日
    300
  • 【新手入门】使用ERNIE-4.5-0.3B-Paddle从原始文本构建知识图谱

    1. 概述 本文将探讨如何使用ernie-4.5-0.3b-paddle模型从原始文本构建知识图谱。通过结合大语言模型(llm)和检索增强生成(rag)技术实现文本生成,帮助我们从非结构化数据中高效提取实体和关系信息。 2. 什么是知识图谱? 2.1 基本概念 知识图谱是一种语义网络,它表示和连接现…

    2026年9月25日
    100
  • DeepSeek能否生成结构化JSON输出 格式化结果生成方法与适配方式

    DeepSeek能否生成结构化JSON输出 格式化结果生成方法与适配方式DeepSeek能否生成结构化JSON输出 格式化结果生成方法与适配方式DeepSeek能否生成结构化JSON输出 格式化结果生成方法与适配方式DeepSeek能否生成结构化JSON输出 格式化结果生成方法与适配方式

    DeepSeek模型具备生成结构化JSON输出的能力。要实现这一目标,核心在于有效的提示词设计与后续的输出处理。本文将详细阐述如何通过构建精炼的输入,引导DeepSeek输出符合预期的JSON格式数据,并介绍在实际应用中如何进行格式化结果的生成方法与适配方式,帮助用户掌握 DeepSeek 在处理结…

    2026年9月25日 • 用户投稿
    100
  • 怎样通过Nginx日志定位网站问题

    怎样通过Nginx日志定位网站问题怎样通过Nginx日志定位网站问题怎样通过Nginx日志定位网站问题怎样通过Nginx日志定位网站问题

    Nginx日志是网站故障排查的利器,它主要包含访问日志和错误日志两部分。本文将指导您如何利用这两类日志高效定位问题。 一、访问日志 (access log) 访问日志记录了所有对网站的请求信息,包括客户端IP、请求时间、URL、HTTP状态码等关键数据。 常用字段说明: $remote_addr:客…

    2026年9月25日 • 用户投稿
    100
  • Tomcat日志中隐藏了哪些信息

    Tomcat日志中隐藏了哪些信息Tomcat日志中隐藏了哪些信息Tomcat日志中隐藏了哪些信息Tomcat日志中隐藏了哪些信息

    Tomcat日志文件蕴藏着丰富的服务器信息,其中可能包含安全漏洞的线索。本文将分析Tomcat日志中可能泄露的敏感信息,并提供相应的安全防护措施。 潜在风险信息包括: 服务器版本信息: Tomcat版本号的暴露,可能使攻击者针对特定版本已知的安全漏洞发起攻击。访问记录: 详细的客户端访问记录可能包含…

    2026年9月25日 • 用户投稿
    000
  • 微软Defender更新导致误删除开始菜单和任务栏快捷方式

    微软Defender更新导致误删除开始菜单和任务栏快捷方式微软Defender更新导致误删除开始菜单和任务栏快捷方式微软Defender更新导致误删除开始菜单和任务栏快捷方式微软Defender更新导致误删除开始菜单和任务栏快捷方式

    在最近一次微软microsoft defender防病毒软件的更新中,有用户反馈称其系统的开始菜单和任务栏中的应用程序快捷方式.lnk文件被意外删除。具体表现为,在安装了microsoft defender杀毒软件的1.381.2140.0版本的安全情报更新后,无论是开始菜单里的快捷方式、固定在任务…

    2026年9月25日 • 用户投稿
    400
  • Debian环境下MongoDB如何进行性能调优

    在debian环境下进行mongodb性能调优,可以参考以下步骤和建议: 硬件和配置优化 选择合适的硬件:根据应用需求选择合适的CPU、内存和存储设备。配置内存:确保MongoDB有足够的内存来缓存数据和索引,减少磁盘I/O。使用SSD:SSD硬盘比传统硬盘提供更快的读写速度,显著提升数据库性能。 …

    2026年9月24日
    100
  • MongoDB在Debian上如何进行集群搭建

    在debian上搭建mongodb集群涉及多个步骤,包括安装、配置、启动各个组件以及设置副本集和分片。以下是一个基本的指南: 1. 安装MongoDB 首先,确保你的Debian系统是最新的,然后安装MongoDB。 sudo apt updatesudo apt upgradesudo apt i…

    2026年9月24日
    300
  • win8安装autocad兼容性问题_Win8 AutoCAD兼容性修复

    win8安装autocad兼容性问题_Win8 AutoCAD兼容性修复win8安装autocad兼容性问题_Win8 AutoCAD兼容性修复win8安装autocad兼容性问题_Win8 AutoCAD兼容性修复win8安装autocad兼容性问题_Win8 AutoCAD兼容性修复

    首先设置兼容性模式并以管理员身份运行程序,再启用.NET Framework 3.5;具体为:右键安装文件→属性→兼容性→勾选“以兼容模式运行”并选择Windows 7或Vista→同时勾选“以管理员身份运行”→应用设置后重启电脑;若仍无法运行,则前往控制面板→程序和功能→启用或关闭Windows功…

    2026年9月24日 • 用户投稿
    200
  • 如何在Debian上配置MongoDB审计日志

    在debian上配置mongodb审计日志可以帮助你监控和记录数据库的活动,从而提高安全性。以下是详细的步骤来配置mongodb审计日志: 1. 安装MongoDB 首先,确保你已经在Debian上安装了MongoDB。如果没有安装,可以使用以下命令进行安装: sudo apt updatesudo…

    2026年9月24日
    100
  • 高效集成SOAP服务:Spring Boot中WSDL转Java的实践与策略

    高效集成SOAP服务:Spring Boot中WSDL转Java的实践与策略高效集成SOAP服务:Spring Boot中WSDL转Java的实践与策略高效集成SOAP服务:Spring Boot中WSDL转Java的实践与策略高效集成SOAP服务:Spring Boot中WSDL转Java的实践与策略

    本教程旨在指导开发者如何在Spring Boot项目中将WSDL(Web Services Description Language)文件转换为Java类,并成功消费SOAP(Simple Object Access Protocol)Web服务。文章将探讨常见的转换挑战,如wsimport兼容性问…

    2026年9月24日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信