首页 > 其他分享 >JS中的JSON（秒懂如何操作JSON）

JS中的JSON（秒懂如何操作JSON）

时间：2024-04-10 18:33:27浏览次数：30  
标签：存储 console log JavaScript JS JSON 字符串 操作

目录

一、JSON介绍

1.概念

2.主要特点

3.优点

 4.使用JSON的原因

使用 XML

使用 JSON

 二、JSON语法

三、JSON使用

1.JSON的序列化

2.解析（parse) JSON

3.序列化（Stringify）JSON

四、JSON实例

1.用户信息

2.本地存储

五、JSON应用场景

六、总结

一、JSON介绍

1.概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的语法子集，但是独立于编程语言。JSON格式可以用来在网络中传输数据，也可以存储数据。JSON采用键值对的方式表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或者null。

2.主要特点

  1. 简洁性（Simplicity）：JSON的语法简洁清晰，易于阅读和编写。它由简单的键值对、数组和值组成，比起XML等其他数据格式更为简洁。

  2. 可读性（Readability）：JSON数据易于理解和解释，它使用了人们熟悉的键值对的形式，而且可以通过缩进来表示数据的层级结构，提高了可读性。

  3. 跨语言兼容性（Language Independence）：JSON是一种独立于编程语言的数据格式，可以被几乎所有编程语言支持。因此，无论是哪种编程语言，都可以轻松地解析和生成JSON格式的数据。

  4. 数据结构（Data Structure）：JSON支持复杂的数据结构，包括对象和数组的嵌套，可以表示各种形式的数据。这种灵活性使得JSON在应用程序之间传输复杂数据时非常有用。

  5. 可扩展性（Extensibility）：JSON格式是可扩展的，可以根据需要定义新的数据类型或数据结构。虽然JSON本身提供了基本的数据类型，但是它可以通过约定来支持更复杂的数据模型。

  6. 网络友好（Network Friendly）：JSON数据通常比XML等其他数据格式更小，因此在网络传输时占用的带宽更少，速度更快，对于移动设备或者网络带宽有限的环境尤其适用。

3.优点

  • 简洁易读：JSON使用简单的文本格式表示数据，易于阅读和编写。
  • 跨平台兼容：JSON是一种通用的数据格式，可以在不同编程语言和平台之间进行数据交换。
  • 易于解析和生成：JSON数据可以轻松地被解析和生成，几乎所有编程语言都有相关的解析器和生成器。
  • 支持复杂数据结构：JSON支持嵌套的对象和数组，可以表示复杂的数据结构。 

 4.使用JSON的原因

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML
  • 读取 XML 文档
  • 使用 XML DOM 来循环遍历文档
  • 读取值并存储在变量中
使用 JSON
  • 读取 JSON 字符串
  • 用 eval() 处理 JSON 字符串

 二、JSON语法

JSON（JavaScript Object Notation）的语法相对简单，主要由以下几个部分组成：

 对象（Object）：对象是一组无序的键值对（key-value pairs），用花括号 {} 包裹起来。每个键值对之间用逗号 , 分隔。键和值之间使用冒号 : 分隔。键必须是字符串，而值可以是字符串、数字、布尔值、数组、对象或者null。示例：

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "languages": ["JavaScript", "Python", "Java"],
  "address": {
    "city": "New York",
    "country": "USA"
  },
  "email": null
}

数组（Array）：数组是一组有序的值的集合，用方括号 [] 包裹起来。数组中的每个值之间用逗号 , 分隔。值可以是字符串、数字、布尔值、数组、对象或者null。示例：

["apple", "banana", "orange", 42, true, null]

 值（Value）：值可以是字符串、数字、布尔值、数组、对象或者null。示例：

  • 字符串："Hello, World!"
  • 数字：42
  • 布尔值：true 或 false
  • 数组：[1, 2, 3]
  • 对象：{"key": "value"}
  • null：null

 字符串（String）：字符串是一系列Unicode字符的序列，用双引号 " 包裹起来。示例："Hello, World!"

数字（Number）：数字可以是整数或浮点数的表示，不包含其他格式（如十六进制数、八进制数等）。示例：42 或 3.14

布尔值（Boolean）：布尔值表示真（true）或假（false）的值。示例：true 或 false

空值（null）：表示空值或缺失值。示例：null

JSON的语法规则包括：

  • 键和字符串必须使用双引号 " 包裹。
  • 键值对之间使用冒号 : 分隔。
  • 键值对之间使用逗号 , 分隔。
  • 数组中的元素之间使用逗号 , 分隔。
  • JSON文本必须包含在大括号 {} 或方括号 [] 中。

 JSON是一种轻量级的数据交换格式，易于理解和编写，被广泛用于数据交换和存储。

三、JSON使用

1.JSON的序列化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var obj = {
            name:"why",  
            age : 18,
            friend:{
                name:"kobe"
            }
        }
        console.log(obj.name,obj.age)

        // 1.将obj对象进行序列化
        var objJSONString = JSON.stringify(obj)
        console.log(objJSONString)

        // 2.将对象存储到LocalStorage
        localStorage.setItem("info",objJSONString)

        var item = localStorage.getItem("info")
        console.log(item,typeof item)

        //3.将字符串转回到对象(反序列化)
        var newObj = JSON.parse(item)
        console.log(newObj)
    </script>
</body>
</html>

2.解析（parse) JSON

解析JSON意味着将JSON格式的字符串转换为对应的数据结构，如对象、数组等。在大多数编程语言中，这个过程通常由一个名为parse的函数来完成。例如，在JavaScript中，可以使用JSON.parse()函数来解析JSON字符串，将其转换为相应的JavaScript对象。示例如下：

const jsonString = '{"name": "John", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject); // 输出: { name: 'John', age: 30 }

3.序列化（Stringify）JSON

序列化JSON意味着将数据结构，如对象、数组等，转换为JSON格式的字符串。在大多数编程语言中，这个过程通常由一个名为stringify的函数来完成。例如，在JavaScript中，可以使用JSON.stringify()函数来序列化JavaScript对象为JSON格式的字符串。示例如下：

const jsonObject = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonObject);
console.log(jsonString); // 输出: '{"name":"John","age":30}'

四、JSON实例

1.用户信息

创建一个包含一些用户信息的JSON对象，然后将其解析为JavaScript对象，最后将JavaScript对象序列化为JSON字符串。

// 创建一个包含用户信息的JSON对象
const userJSON = `{
  "name": "Alice",
  "age": 25,
  "email": "[email protected]",
  "address": {
    "city": "New York",
    "zipcode": "10001"
  },
  "hobbies": ["reading", "traveling", "photography"]
}`;

// 解析JSON字符串为JavaScript对象
const userObj = JSON.parse(userJSON);

// 输出解析后的JavaScript对象
console.log(userObj);

// 访问JavaScript对象中的属性
console.log(`Name: ${userObj.name}`);
console.log(`Age: ${userObj.age}`);
console.log(`Email: ${userObj.email}`);
console.log(`City: ${userObj.address.city}`);
console.log(`Zipcode: ${userObj.address.zipcode}`);
console.log("Hobbies:");
userObj.hobbies.forEach(hobby => console.log(`- ${hobby}`));

// 创建一个JavaScript对象
const newUserObj = {
  name: "Bob",
  age: 30,
  email: "[email protected]",
  address: {
    city: "Los Angeles",
    zipcode: "90001"
  },
  hobbies: ["coding", "playing guitar"]
};

// 序列化JavaScript对象为JSON字符串
const newUserJSON = JSON.stringify(newUserObj);

// 输出序列化后的JSON字符串
console.log(newUserJSON);

我们首先创建了一个包含用户信息的JSON字符串。然后，我们使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并打印该对象的内容。接着，我们访问JavaScript对象中的属性，并演示了如何访问嵌套对象和数组。接下来，我们创建了一个新的JavaScript对象，并使用JSON.stringify()方法将其序列化为JSON字符串。最后，我们打印了序列化后的JSON字符串。

2.本地存储

将数据存储到浏览器的本地存储中，并在需要时检索和更新该数据。

// 检查浏览器是否支持本地存储
if (typeof(Storage) !== "undefined") {
    // 如果支持本地存储

    // 从本地存储中获取用户数据
    let userData = localStorage.getItem("user");

    // 检查是否已经保存了用户数据
    if (userData) {
        // 如果已经保存了用户数据，则解析为JavaScript对象
        userData = JSON.parse(userData);
        console.log("已从本地存储中获取用户数据:", userData);
    } else {
        // 如果没有保存用户数据，则创建一个新的用户对象
        userData = {
            name: "Alice",
            age: 25,
            email: "[email protected]"
        };
        console.log("未找到本地存储中的用户数据，创建新用户数据:", userData);
    }

    // 更新用户数据
    userData.age = 26;
    console.log("更新后的用户数据:", userData);

    // 将更新后的用户数据保存到本地存储
    localStorage.setItem("user", JSON.stringify(userData));
    console.log("已将更新后的用户数据保存到本地存储");
} else {
    // 如果浏览器不支持本地存储，则输出错误消息
    console.log("抱歉，您的浏览器不支持本地存储功能");
}

我们首先检查浏览器是否支持本地存储。如果支持，则尝试从本地存储中获取名为"user"的数据。如果找到了该数据，则将其解析为JavaScript对象，并输出到控制台。如果没有找到数据，则创建一个新的用户对象，并将其保存到本地存储中。接着，我们更新了用户数据的年龄，并将更新后的数据重新保存到本地存储中。如果浏览器不支持本地存储，则输出相应的错误消息。

五、JSON应用场景

  1. Web开发：JSON在Web开发中被广泛用于客户端与服务器端之间的数据交换。前端通常通过Ajax请求从服务器获取JSON格式的数据，并将其解析后在网页上进行展示或交互。

  2. API通信：许多Web服务通过RESTful API或GraphQL等方式提供数据。这些API通常以JSON格式返回数据，因为JSON易于解析且支持复杂的数据结构，如嵌套对象和数组。

  3. 配置文件：许多应用程序使用JSON格式来存储配置信息，例如软件的偏好设置、插件配置等。JSON的易读性使得用户可以轻松编辑配置文件。

  4. 移动应用开发：JSON常用于移动应用的数据存储和交换，例如在iOS和Android应用中使用JSON格式的数据与服务器通信，或在应用中存储本地数据。

  5. 数据存储：某些小型应用程序或原型可能使用JSON作为数据存储格式，尤其是对于小规模的数据集，它比传统的数据库更加简单和灵活。

  6. 日志记录：有些系统会将日志以JSON格式记录，以便后续分析和处理。JSON的结构化特性使得日志信息更容易被解析和理解。

  7. 配置API响应：API通常会以JSON格式返回请求的响应，包括成功消息、错误消息、数据等。开发人员可以根据API响应中的JSON数据来处理请求结果。

六、总结

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在不同系统之间进行数据传输和存储。以下是关于JSON的一些重要知识点的总结：

  1. 格式：

    • JSON采用键值对的方式存储数据。
    • 键（key）必须是字符串，值（value）可以是字符串、数字、布尔值、数组、对象或null。
    • 数据以大括号{}包裹表示对象，以中括号[]包裹表示数组。

  2. 特点：

    • 简洁：JSON数据结构简单明了，易于理解和编写。
    • 易读性：JSON数据易于阅读和解析，适合人类阅读和编写。
    • 与语言无关：JSON是一种语言无关的数据格式，几乎所有编程语言都支持JSON的解析和生成。

  3. 用途：

    • 在Web开发中用于客户端与服务器之间的数据传输。
    • API通信的数据格式，常见于RESTful API和GraphQL。
    • 配置文件的存储格式，易于人类编辑和解析。
    • 移动应用开发中的数据存储和交换格式。
    • 日志记录的数据格式，便于后续分析和处理。

  4. 解析与生成：

    • 在JavaScript中，可以使用JSON.parse()将JSON字符串解析为JavaScript对象。
    • 可以使用JSON.stringify()将JavaScript对象转换为JSON字符串。

  5. 示例：

  1. {
    "name": "John",
    "age": 30,
    "isStudent": false,
    "friends": ["Alice", "Bob"],
    "address": {
        "city": "New York",
        "country": "USA"
    },
    "nullValue": null
}

总的来说，JSON作为一种轻量级、简洁、易读的数据交换格式，在各种应用场景中都有着广泛的应用，并且是现代软件开发中不可或缺的一部分。

标签：存储,console,log,JavaScript,JS,JSON,字符串,操作
From： https://blog.csdn.net/m0_73916603/article/details/137605933

相关文章

  • 002nestjs控制器(controller)
    一、控制器的作用控制器负责处理传入请求并向客户端返回响应二、使用方法新建/cats目录创建cats.controller.ts在里面添加如下内容import{Controller,Get}from'@nestjs/common';@Controller('cats')exportclassCatsController{@Get()findAll():string{......
  • 操作系统综合题之“采用二级页表的分页存储管理方式，计算页目录号的位数 和 页大小，给定
    一、问题：某计算机系统的主存按字节编址，逻辑地址和物理地址都是32位，其内存管理采用两级页表的分页存储管理方式。逻辑地址中页号位10位，页内偏移地址为10位。该计算机系统的两级页表结构如下图所示，图中数值均为十进制数1.页目录号的位数为多少？页的大小为多少KB？2.如果页目录项大小......
  • 使用 Js 纯手写实现组件
    vue的单文件组件，其实最终是编译成了一个object，然后调用该object上的setup()函数来渲染页面的；如下两个页面，一个使用vue单文件组件的语法来实现，一个使用纯js来实现，二者效果一致使用vue实现组件src/views/VueImplementedView.vue<template><div><h1class="......
  • H.265视频直播点播录像EasyPlayer.js流媒体播放器用户常见问题及解答
    EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，无须安装任何插件，起播快、延迟低、兼容性强，使用非常便捷。今天我们来汇总下用户常见的几个问题及解答。1、EasyPlayer.js播放多路H.265视频时，CPU直接被占满该如何处理?答：因为H.265解码比较占......
  • 批处理文件是一个包含一系列命令的文本文件，这些命令按顺序执行，以完成特定的任务或自动
    批处理是一种在计算机系统中执行一系列命令的技术和方法。通常，批处理文件是一个包含一系列命令的文本文件，这些命令按顺序执行，以完成特定的任务或自动化操作。批处理文件通常使用扩展名为.bat（在Windows系统中）或.sh（在类Unix系统中，如Linux和macOS）。批处理文件中的命令可以......
  • QGIS对较大的shp文件进行切片操作
    一般情况下，shp文件不是很大时可以通过geoserver去发布wms服务；但是业务中遇到了文件大小为1.5g的shp文件同时需要根据里面的字段类型进行分类直接通过geoserver发布会发现渲染非常的缓慢这边我是先将shp文件通过QGIS打开具体可以通过QGIS将shp文件直接拖到数据库中让它变成......
  • Redis支持事务 yii操作示例代码
    //首先确保已经配置了Yii的Redis组件//在配置文件中（例如：config/main.php）return[//...'components'=>['redis'=>['class'=>'yii\redis\Connection','hostname'=>&......
  • DISM命令管理和操作FFU映像
    dism/?部署映像服务和管理工具版本:10.0.20348.681DISM.exe[dism_options]{Imaging_command}[<Imaging_arguments>]DISM.exe{/Image:<path_to_offline_image>|/Online}[dism_options]     {servicing_command}[<servicing_arguments>]描述: DISM枚......
  • nodejs + ts + nodemon + webpack 代码热更新
    依赖：npminodemonwebpackwebpack-clits-loadertypescript//webpack.config.jsimport{defaultaswebpack}from"webpack";importnodeExternalsfrom"webpack-node-externals";constplugins=[newCleanWebpackPlugin({dangero......
  • 使用DISM命令来管理和操作WIM映像并将其转换为FFU映像可以按照以下步骤进行：
    使用DISM命令来管理和操作WIM映像并将其转换为FFU映像可以按照以下步骤进行：挂载WIM映像：使用Dism/Mount-Wim命令来挂载WIM映像到指定目录。powershellCopyCodeDism/Mount-Wim/WimFile:"C:\path\to\install.wim"/Index:1/MountDir:"C:\Mount"转换为FFU：使用Dism/Captur......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99