适用于JavaScript和Node.js的JSON初学者教程

简介: 适用于JavaScript和Node.js的JSON初学者教程

在本教程中,您将学习什么是JSON以及如何在JavaScript和Node.js中使用它。


介绍


在后端和前端之间交换数据的最流行的格式之一是JSON,它用来表示JavaScript对象。它与常规JavaScript对象的外观非常相似,但也有其独特之处。它的读音为“ jason”或“ jay-sun”,所以您可能会听到一些不同的发音。


JSON对其使用的编程语言没有任何限制。您可以在这样的组织中工作:有些后端服务是用Python编写的,有些后端是Java的,前端是JS的,它们都可以完美地交换JSON消息。


以JSON格式存储数据


首先JSON是一个字符串。这允许在需要时进行非常有效的数据压缩。缺点是我们无法存储循环数据结构,例如,引用自身的对象。


(几乎)所有内容都应使用引号引起来


与JavaScript不同,您只应使用双引号并将所有对象属性包装在其中。您不能使用单引号或反引号。


在JS中,我们有一个像这样的对象


{
  name: 'Jack',
  isMarried: false,
  age: 25,
}


而在JSON中,它将变成


{
  "name": "Jack",
  "isMarried": false,
  "age": 25
}


请注意:在JavaScript对象中,在逗号后出现逗号age: 25,是可以接受的,但在JSON中则是不允许的。


所有字段名称都用双引号引起来,但并非所有原始值都使用双引号引起来。数字和布尔值不带引号存储。


对象存储在花括号中


像在JS中一样,花括号用于存储对象。


请注意,如果服务器以JSON格式响应,则期望它以对象响应。您不能只列出这些字段。它们都需要用大括号括起来才能成为JSON对象。


数组存储在方括号中


一切都与JS中完全一样,我们将数组的名称用双引号引起来,并且数组本身在方括号中表示。


{

 "pets": ["Rex", "Sandy"]

}


再次注意,该行的末尾没有逗号或分号。


所有JSON对象数据都存储为"key": “value”(“键”:“值”)对


与JS中一样,您只能将对添加key:value到对象。如果需要存储多个不带键的值,则需要一个数组。


将JavaScript对象转换为JSON并返回


要将常规JS对象转换为JSON字符串,您需要此JSON.stringify(obj)函数。无需安装其他模块即可使用。您向其传递一个对象,obj并获得一个JSON对象作为输出。


const user = {
  name: 'Jack',
  isMarried: false,
  age: 25,
}
const userJSON = JSON.stringify(user);
console.log(userJSON); // {"name": "Jack", "isMarried": false, "age": 25}

要从JSON转换为常规对象,我们需要JSON.parse(s)函数。我们以JSON格式的字符串作为输入,并返回一个普通的JS对象。


const jsonString = '{"name": "Jack", "isMarried": false, "age": 25}';

const parsedUser = JSON.parse(jsonString);


console.log(parsedUser); // {name: 'Jack', isMarried: false, age: 25}


Express.js和JSON


如果您不熟悉Express,我将在后续的文章为您讲解:


如何创建Express服务器

快速中间件和外部访问

由于我们知道JSON对象是一个字符串,因此我们可以非常轻松地修改服务器并发送一些对象而不是Hello, Express.js。


假设我们需要将一个对象传递给前端


{
  name: 'Hero',
  isLearning: true,
  level: 'apprentice',
}


我们将通过几种方式来做到这一点。在所有情况下,前端都会收到相同的内容,您可以在浏览器中通过请求进行验证。


普通字符串:

server.get('/', (req, res) => {

 return res.send('{"name": "Hero", "isLearning": true, "level": "apprentice"}');

})


对象转换为JSON.stringify:

server.get('/', (req, res) => {

 const user = { name: 'Hero', isLearning: true, level: 'apprentice' };


对象转换为res.json:

server.get('/', (req, res) => {
  const user = { name: 'Hero', isLearning: true, level: 'apprentice' };
  return res.json(user);
})


我会重复一遍。在所有情况下,结果都是相同的。我们发送状态为200和字符串的响应,{"name": "Hero", "isLearning": true,"level": "apprentice"}收件人可以根据需要使用该字符串。


老实说,res.send和res.json之间存在细微差别。如果使用,并且选择,则会设置 一个特殊的标头Content-Type。text/htmlres.sendapplication/jsonres.json


res.json如果您有想要以JSON格式发送的对象,则使用此属性。

第三个示例是最方便的示例,因为我们不执行任何不必要的操作。我们将对象传递给,res.json并在内部进行到JSON字符串的转换。JSON.stringify在这种情况下,不需要像示例2一样对进行额外的(显式)调用。


最后给大家分享一个学习全栈JavaScript的网站:


https://js.coderslang.com/


比较生动有趣的带入性学习

image.png

目录
相关文章
|
4月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
462 1
|
8月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
525 24
|
10月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
10385 23
|
11月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
262 32
|
10月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
230 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
615 2
2024年5月node.js安装(winmac系统)保姆级教程