JavaScript之Json数据格式

news2025/4/17 3:51:33

介绍

  • JavaScript Object Notation, js对象标注法,是轻量级的数据交换格式
  • 完全独立于编程语言文本
  • 字符集必须用UTF-8格式,必须用“”
  • 任何支持的数据类型都可以用JSON表示
  • JS内内置JSON解析
  • JSON本质就是字符串

Json对象和JS对象互相转化

  • 前端数据传到后端
  • 使用JSON.Stringify(),js对象转成JSON字符串
// Json对象和JS对象互相转化
var obj = { name: '小明', age: 18 };  // JS对象
var str = JSON.stringify(obj); // 将对象转为字符串,返回一个字符串
console.log('JSON.stringify(obj):', str); // {"name":"小明","age":18},将对象转为字符串,返回一个字符串
  • 从后端拿到数据需要在前端使用
  • 使用JSON.parse(),JSON字符串转为JS对象
 var xm = '{"name":"小明","age":18}'; // JSON字符串
 var obj1 = JSON.parse(xm); // 将字符串转为对象,返回一个对象
 console.log('JSON.parse(xm):', obj1.name); // 将字符串转为对象,返回一个对象,可以在前端使用

在这里插入图片描述

筛选对象的键值

  • js对象json转为字符串,JSON.stringify()方法,有三个参数
  • ①要转换的对象/数组
  • ②数组/函数
  • (若参数2为数组,则反转数组中的指定属性
  • 若参数2为函数,则调用该函数并传入每个成员的键和值。)
  • ③文本缩进、空格和换行符
// 筛选对象的键值
var xm = {
    name: '小明',
    age: 18,
    class: '一班',
    phone: 1333333333,
    height:'1.8米'
}
var xm_json = JSON.stringify(xm,['name','class','height']); // 将对象转为字符串,返回一个字符串,第二个参数是筛选的键值,第三个参数是缩进的空格数
console.log(xm_json)

var xm_json2 = JSON.stringify(xm,name,6);     //name是一个函数
function name(key,value){
    if (value == '小明') { 
        return '小华'; 
    } else {
        return value; // 返回该属性
    }
}
console.log(xm_json2) // {"name":"小华","age":18,"class":"一班","phone":1333333333,"height":"1.8米"}

在这里插入图片描述

传入函数处理json键值

  • 从服务器接收到JSON值,想再用parse转成对象时进行的处理
  • JSON.parse(),JSON字符串转为JS对象
  • 有两个参数
// 传入函数处理json键值
var xm = `{
    "name": "小明",
    "age": 18,
    "class": "一班",
    "phone": 1333333333,
    "height": "1.8米"
}`;                                 // JSON字符串
var xm_obj = JSON.parse(xm,name); // 将对象转为字符串,返回一个字符串,第二个参数是筛选的键值,第三个参数是缩进的空格数
function name(key,value){
    if (key == 'class') { 
        return '六班'; 
    } else {
        return value; // 返回该属性
    }
}
console.log(xm_obj) // {"name":"小明","age":18,"class":"六班","phone":1333333333,"height":"1.8米"}
console.log(xm_obj.class) // 六班

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2330607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 Rsync + Lsyncd 实现 CentOS 7 实时文件同步

文章目录 🌀使用 Rsync Lsyncd 实现 CentOS 7 实时文件同步前言介绍架构图🧱系统环境🔧Rsync配置(两台都需安装)关闭SELinux(两台都需) 📦配置目标端(client&#xff09…

Android studio学习之路(六)--真机的调试以及多媒体照相的使用

多媒体应用(语言识别,照相,拍视频)在生活的各个方面都具有非常大的作用,所以接下来将会逐步介绍多媒体的使用,但是在使用多媒体之前,使用模拟器肯定是不行的,所以我们必须要使用真机…

Qt 资源文件(.qrc 文件)

Qt 资源文件(.qrc 文件)是 Qt 提供的一种机制,用来将文件(如图像、音频、文本文件等)嵌入到应用程序中,使得这些文件不需要依赖外部文件路径,而是直接打包到程序的可执行文件中。通过使用 Qt 资…

PandaAI:一个基于AI的对话式数据分析工具

PandaAI 是一个基于 Python 开发的自然语言处理和数据分析工具,支持问答式(ChatGPT)的数据分析和报告生成功能。PandaAI 提供了一个开源的框架,主要核心组件包含用于数据处理的数据准备层(Pandas)以及实现 …

【C++算法】50.分治_归并_翻转对

文章目录 题目链接:题目描述:解法C 算法代码:图解 题目链接: 493. 翻转对 题目描述: 解法 分治 策略一:计算当前元素cur1后面,有多少元素的两倍比我cur1小(降序) 利用单…

基于pycatia的CATIA层级式BOM生成器开发全解析

引言:BOM生成技术的革新之路 在高端装备制造领域,CATIA的BOM管理直接影响着研发效率和成本控制。传统VBA方案 虽能实现基础功能,但存在代码维护困难、跨版本兼容性差等痛点。本文基于pycatia框架,提出一种支持动态层级识别、智能查重、Excel联动的BOM生成方案,其核心突破…

Flink 1.20 Kafka Connector:新旧 API 深度解析与迁移指南

Flink Kafka Connector 新旧 API 深度解析与迁移指南 一、Flink Kafka Connector 演进背景 Apache Flink 作为实时计算领域的标杆框架,其 Kafka 连接器的迭代始终围绕性能优化、语义增强和API 统一展开。Flink 1.20 版本将彻底弃用基于 FlinkKafkaConsumer/FlinkK…

2025年渗透测试面试题总结- 某四字大厂面试复盘扩展 一面(题目+回答)

网络安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 某四字大厂面试复盘扩展 一面 一、Java内存马原理与查杀 二、冰蝎与哥斯拉原理对比(技术演…

批量压缩 jpg/png 等格式照片|批量调整图片的宽高尺寸

图片格式种类非常的多,并且不同的图片由于像素、尺寸不一样,可能占用的空间也会不一样。文件太大会占用较多的磁盘空间,传输及上传系统都非常不方便,可能会收到限制,因此我们经常会碰到需要对图片进行压缩的需求。如何…

【动手学深度学习】卷积神经网络(CNN)入门

【动手学深度学习】卷积神经网络(CNN)入门 1,卷积神经网络简介2,卷积层2.1,互相关运算原理2.2,互相关运算实现2.3,实现卷积层 3,卷积层的简单应用:边缘检测3.1&#xff0…

在huggingface上制作小demo

在huggingface上制作小demo 今天好兄弟让我帮他搞一个模型,他有小样本的化学数据,想让我根据这些数据训练一个小模型,他想用这个模型预测一些值 最终我简单训练了一个小模型,起初想把这个模型和GUI界面打包成exe发给他&#xff0…

51.评论日记

千万不能再挖了,否则整个华夏文明将被改写。_哔哩哔哩_bilibili 2025年4月7日22:13:42

SpringCloud第二篇:注册中心Eureka

注册中心的意义 注册中心 管理各种服务功能包括服务的注册、发现、熔断、负载、降级等,比如dubbo admin后台的各种功能。 有了注册中心,调用关系的变化,画几个简图来看一下。(了解源码可求求: 1791743380) 服务A调用服务B 有了注册中心之后&a…

ES 参数调优

1、refresh_interval 控制索引刷新的时间间隔。增大这个值可以减少I/O操作,从而提升写入性能,但会延迟新文档的可见性 查看 GET /content_erp_nlp_help_202503191453/_settings?include_defaultstrue 动态修改:refresh_interval 是一个动态…

用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)

一、功能概览和本文核心 本次开发,不是1天干撸,而是在下班后或早起搞的,总体加和计算了一下,大概1天的时间(12个小时),平常下班都是9点的衰仔,好在还有双休,谢天谢地。 …

【GeoDa使用】空间自相关分析操作

使用 GeoDa 软件进行空间自相关分析 双击打开 GeoDa 软件 选择 .shp 文件 导入文件 空间权重矩阵(*.gal / *.gwt)是进行任何空间分析的前提 构建空间权重矩阵 空间权重矩阵(Spatial Weights Matrix) 是一个用来描述空间对象之间…

C++基于rapidjson的Json与结构体互相转换

简介 使用rapidjson库进行封装,实现了使用C对结构体数据和json字符串进行互相转换的功能。最短只需要使用两行代码即可无痛完成结构体数据转换为Json字符串。 支持std::string、数组、POD数据(int,float,double等)、std::vector、嵌套结构体…

OpenStack Yoga版安装笔记(十七)安全组笔记

一、安全组与iptables的关系 OpenStack的安全组(Security Group)默认是通过Linux的iptables实现的。以下是其主要实现原理和机制: 安全组与iptables的关系 OpenStack的安全组规则通过iptables的规则链实现。每条安全组规则会被转换为相应的i…

通义万相2.1 图生视频:为AI绘梦插上翅膀,开启ALGC算力领域新纪元

通义万相2.1图生视频大模型 通义万相2.1图生视频技术架构万相2.1的功能特点性能优势与其他工具的集成方案 蓝耘平台部署万相2.1核心目标典型应用场景未来发展方向 通义万相2.1ALGC实战应用操作说明功能测试 为什么选择蓝耘智算蓝耘智算平台的优势如何通过API调用万相2.1 写在最…

52.个人健康管理系统小程序(基于springbootvue)

目录 1.系统的受众说明 2.开发环境与技术 2.1 MYSQL数据库 2.2 Java语言 2.3 微信小程序技术 2.4 SpringBoot框架 2.5 B/S架构 2.6 Tomcat 介绍 2.7 HTML简介 2.8 MyEclipse开发工具 3.系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作…