JavaScript核心技术之JSON详解

news2024/11/20 9:19:07

JSON是什么?

JSON(JavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。它基于 ECMAScript(European Computer Manufacturers Association, 欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 

JSON源自于JavaScript,是一种轻量级(Light-Meight)、基于文本的(Text-Based)、可读的(Human-Readable)格式。

在现在的开发中,能够进行数据交换格式的,包括两个JSON   XML。

JSON是存储和交换文本信息的语法,类似 XML,JSON比 XML更小、更快,更易解析。

 那么,简而言之,对JSON的说明总结如下:

  • JSON是独立于任何编程语言的数据格式
  • 是一种用于存储和传输数据的轻量级格式
  • 语法是自描述的,便于人类阅读和理解

JSON语法

基本语法:

  • 数组(Array)用方括号 "[]" 表示
  • 对象(0bject)用大括号 "{}" 表示
  • 名称 / 值 对(name/value)组合成数组和对象
  • 名称( name )置于双引号中,值(value)有字符串、数值、布尔值、null、对象和数组
  • 并列的数据之间用逗号 "," 分隔
  • 名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值

需要注意的是:

JSON不支持注释。向 JSON添加注释无效

JSON文件的文件类型是 .json

JSON文本的 MIME 类型是 application/json

获取JSON数据

 json是以对象的形式存在的,直接获取JSON数据可通过如下方法:

1. json对象.键名

2. json对象["键名"]

3. 数组对象[索引]

4. 遍历 

代码示例:

//定义基本格式
      var person = { name: "张三", age: 23, gender: true };
      var persons = [
        { name: "张三", age: 23, gender: true },
        { name: "李四", age: 24, gender: true },
        { name: "王五", age: 25, gender: false },
      ];

      //获取person对象中所有的键和值
      //for in 循环
      /* for(var key in person){
          //这样的方式获取不行。因为相当于  person."name"
          //alert(key + ":" + person.key);
          alert(key+":"+person[key]);
          }*/

      //获取persons中的所有值
      for (var i = 0; i < persons.length; i++) {
        var p = persons[i];
        for (var key in p) {
          console.log(key + ":" + p[key]);
        }
      }

 输出结果为:

 JSON 解析与序列化(在JavaScript中)

先在控制台中打印一下JSON对象,看看有什么,如图:

 显而易见,在JavaScript中JSON对象仅有两个方法:parse和stringify。后面会详细介绍一下这两个方法

序列化的概念:序列化是将对象转化为字节序列的过程。对象序列化后可以在网络上传输,或者保存到硬盘上。

将对象序列化成json字符串: JSON.stringify(json对象);

反序列化:将json字符串反序列化为对象:   JSON.parse(str)

JSON.parse

API介绍:用来解析 JSON字符串,构造由字符串描述的 JavaScript 值或对象,传入的字符串不符合 JSON规范会报错

语法:

JSON.parse(str, reviver);
  • str:要解析的 JSON字符串
  • reviver:可选的函数 function(key,value),该函数的第一个参数和第二个参数分别代表键值对的键和值,并可以对值进行转换(函数返回值当做处理后的value)

代码示例:

// JSON.parse() 解析JSON字符串, 将JSON转换为对象
      let json = '{"name": ["js", "webpack"], "age": 22, "gridFriend": "ljj"}';
      console.log(JSON.parse(json)); 
      // {name: Array(2), age: 22, gridFriend: 'ljj'}

      // 第二个参数是一个函数,key和value代表每个key/value对
      let result = JSON.parse(json, (key, value) => {
        if (key == "age") {
          return `年龄:${value}`;
        }
        return value;
      });
      console.log(result);
      //{name: Array(2), age: '年龄:22', gridFriend: 'ljj'}

 JSON.stringify

API介绍:将一个 JavaScript 对象或值转换为 JSON字符串

如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性

语法:

JSON.stringify(value, replacer, space)

value:将要序列化成 一个 JSON 字符串的值

replacer:

  • 如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理
  • 如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中
  • 如果该参数为 null 或者未提供,则对象所有的属性都会被序列化

space:指定缩进用的空白字符串,用于美化输出

  • 如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格
  • 如果该参数为字符串(当字符串长度超过10个字母,取其前10个字母),该字符串将被作为空格
  • 如果该参数没有提供(或者为 null),将没有空格

代码示例:

      let obj = {
        name: "jsx",
        age: 22,
        lesson: ["html", "css", "js"],
      };
      let json = JSON.stringify(obj);
      console.log(json);
      // {"name":"jsx","age":22,"lesson":["html","css","js"]}

      // 第二个参数replacer 为函数时,被序列化的值得属性都会经过该函数转换处理
      function replacer(key, value) {
        if (typeof value === "string") {
          return undefined;
        }
        return value;
      }
      let result = JSON.stringify(obj, replacer);
      console.log(result);
      // {"age":22,"lesson":[null,null,null]}

      // 当replacer参数为数组,数组的值代表将被序列化成 JSON 字符串的属性名
      let result1 = JSON.stringify(obj, ["name", "lesson"]);
      // 只保留 “name” 和 “lesson” 属性值
      console.log(result1);
      // {"name":"jsx","lesson":["html","css","js"]}

      // 第三个参数spcae,用来控制结果字符串里面的间距
      let result2 = JSON.stringify(obj, null, 4);
      console.log(result2);
      /*{
          "name": "jsx",
          "age": 22,
          "lesson": [
              "html",
              "css",
              "js"
          ]
      }*/

 注意:如果replacer是一个函数,则该函数会进行深处理,即如果键值对的值也是一个数组,则也会执行该函数

JSON.stringify()原理

  • 转换值如果有 toJSON() 方法,该方法定义什么值将被序列化
  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中
  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值,undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。函数、undefined 被单独转换时,会返回 undefined,如JSON.stringify(function(){}) or JSON.stringify(undefined)
  • 对包含循环引用的对象(对象之间相互引用,形成无限循环)执行此方法,会抛出错误
  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们
  • Date 日期调用了 toJSON() 将其转换为了 string 字符串(同Date.toISOString()),因此会被当做字符串处理
  • NaN 和 Infinity 格式的数值及 null 都会被当做 null
  • 其他类型的对象,包括 Map/Set/WeakMap/WeakSet,仅会序列化可枚举的属性

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

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

相关文章

undetected_chromedriver的使用

undetected_chromedriver是专门针对浏览器识别做出来的拓展 直接使用undetected_chromedriver第三方库 if __name__ __main__:from selenium import webdriverfrom selenium.webdriver.common.by import Byfrom selenium.webdriver.support.ui import WebDriverWaitfrom sel…

前端数据加密的几种方式

1.base64加密方式 1.1 base64是什么&#xff1f; Base64&#xff0c;顾名思义&#xff0c;就是包括小写字母a-z、大写字母A-Z、数字0-9、符号""、"/"一共64个字符的字符集&#xff0c;&#xff08;另加一个“”&#xff0c;实际是65个字符&#xff0c;至…

Access-Control-Allow-Origin跨域解决及详细介绍

首先&#xff0c;跨域不是问题。是一种安全机制。 这是你在开发时、上线前就必须提前考虑到的安全问题并且采取合适的手段去避免这个问题带来的程序错误。不过通常情况下&#xff0c;前端开发的小伙伴们都非常坚信后端小伙伴的接口一定已经处理好了跨域这个需求。然而事实上许多…

JavaWeb 项目 --- 表白墙 和 在线相册

文章目录一. 案例: 表白墙 (使用模板引擎)1. 首先创建 maven 项目2. 创建好模板文件3. 使用数据库存储数据.创建一个类用于数据库连接4. 使用 监视器 来初始化 Thymeleaf5. 编写 Servlet 代码① 重写 doGet 方法② 重写 doPost 方法③ 实现 load 方法④ 实现 save 方法6. 注意事…

Vue中key的作用及原理

1. 先说结论 key在Vue是DOM对象的标识&#xff1b;进行列表展示时&#xff0c;默认key是index&#xff1b;如果数据只做展示使用&#xff0c;使用index作为key是没有任何问题的&#xff1b;如果使用index作为key&#xff0c;而后续操作会破坏顺序&#xff0c;一定会带来效率问…

vue3 antd table表格样式修改——使用rowClassName更改某行数据的样式

vue3 antd项目实战——修改ant design vue组件中table表格的默认样式&#xff08;二&#xff09;知识调用场景复现修改table表格的行样式一、rowClassName添加行样式二、表格的不可控操作写在最后知识调用 文章中可能会用到的知识链接vue3ant design vuets实战【ant-design-vu…

解决:在 VSCode 中如何设置默认的浏览器为Chrome或Firefox

1、问题描述&#xff1a; 在 VSCode 编辑器中&#xff0c;其一般默认打开的浏览器是 IE 浏览器&#xff0c;而我已经习惯使用 Chrome 浏览器&#xff0c;以及会遇到页面的调试等不同的问题&#xff0c;因此需要将 VSCode 的默认浏览器调整为 Chrome 浏览器&#xff1b; 2、操…

【web前端开发】超详细讲解CSS盒子模型

文章目录1.盒子模型介绍2.内容3.边框4.内边距5.⭐盒子大小计算6.⭐内减模式7.外边距外边距的合并外边距的塌陷行内元素的垂直外边距8.⭐清除默认样式9.⭐版心居中1.盒子模型介绍 所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子&#xff0c;封装周围的HTML元素&#xff0c…

使用Vue来完成项目中的首页导航+左侧菜单

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 2.3.2 配置路由 2.3.3 修改LeftAside组件 2.3.4 修改Main组件 3. …

8个不能错过的程序员必备网站,惊艳到我了!!!

程序员是一个需要不断学习的职业&#xff0c;不少朋友每天来逛CSDN、掘金等网站&#xff0c;但一直都抱着“收藏从未停止&#xff0c;学习从未开始”的态度&#xff0c;别骗自己了兄弟。在编程体系中&#xff0c;有很多不错的小工具&#xff0c;可以极大得提升我们的开发效率。…

前端技术:解决执行npm install提示 xxx packages are looking for funding run `npm fund` for details的问题 详述npm fund

目录复现问题分析问题npm fund的命令npm fund的由来npm fund与npm ls解决问题参看文献&#x1f610; 我的博客&#xff0c;不仅帮你解决此类问题&#xff0c;还会告诉如何去分析定位问题。 复现问题 今天执行如下命令时&#xff1a; npm install报出如下问题&#xff1a; 2…

cookie、localStorage和sessionStorage详解

目录 一、cookie 二、Web storage 1、localStorage 2、sessionStorage的使用 3、复杂数据类型储存 Web Storage带来的好处&#xff1a; 三、sessionStorage、localStorage和cookie的区别 一、cookie cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储…

vue引入elementUi后打开页面报错Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype‘)

vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错&#xff1a; Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’)。 百度了很多办法都说是因为在vue3中引入了elementUi&#xff0c;vue3.0之后是不支持el…

基于Java+Springmvc+vue+element员工信息管理系统详细设计

博主介绍&#xff1a;✌公司项目主程、全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,CSDN博客之星TOP100、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业设计✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f345;…

React中实现插槽效果的方案

文章目录React实现插槽children实现插槽props实现插槽React实现插槽 在开发中&#xff0c;我们抽取了一个组件&#xff0c;但是为了让这个组件具备更强的通用性&#xff0c;我们不能将组件中的内容限制为固定的div、span等等这些元素。 我们应该让使用者可以决定某一块区域到…

项目部署,一点也不难!

目录 一、部署前准备 &#xff08;一&#xff09;前端多环境准备 &#xff08;二&#xff09;后端多环境准备 二、项目部署 &#xff08;一&#xff09;原始部署 1、前端部署 2、前端部署测试 3、后端部署 &#xff08;二&#xff09;宝塔 Linux 部署 1、前端部署 2…

前端面试八股文--Vue篇(持续更新)

一. Vue2 篇 1.MVC MVVM区别 首先呢这是两种模式 MVC指的是 modal&#xff0c;view&#xff0c; controller MVVM 指的是 modal &#xff0c;view&#xff0c; view modal mvc和mvvm区别是&#xff1a;1、处理业务的模式不同&#xff0c;MVC里&#xff0c;View是可以直接访…

在 Vue3 中使用 Vuex

本篇文章主要记录 Vue3 中使用 Vuex 的步骤和注意事项&#xff1a; 1、安装依赖库 npm install vuex --save-dev2、配置 Vuex 实例 对比 Vue2 和 Vue3 各自创建 Store 实例的区别&#xff1b; Vue2 是用 Vue.use(Vuex)注入 Vuex 插件&#xff0c;然后通过 new Vuex.Store(o…

真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路,切实可行!

PS&#xff1a;想直接看解决方法的可以跳过前面的废话阶段从后往前看~ 前情回顾&#xff1a;萌新最近从Vue2转战Vue3&#xff0c;一边自学一遍自己做点娱乐项目练练手&#xff0c;这次Vue3项目权限管理用到动态路由&#xff0c;由于以前一直用的addRoutes()方法已经被废弃&…

如何在Windows server 2012配置Web服务器

现在&#xff0c;我们浏览网页已经成为了一种常态&#xff0c;但是你知道网页是怎么运行的吗&#xff1f; 我们浏览网页&#xff0c;首先会打开浏览器&#xff0c;然后输入网页的地址&#xff08;当然这里现在已经可以不用我们自己输入地址了&#xff0c;一般现在就是直接搜索…