26 JavaScript学习:JSON和void

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言
  • JSON 易于理解。
    在这里插入图片描述

JSON 实例

  1. 简单的 JSON 字符串实例:
"{\"name\": \"Alice\", \"age\": 25, \"city\": \"San Francisco\"}"
  1. 包含数组的 JSON 字符串实例:
"{\"name\": \"Bob\", \"age\": 30, \"hobbies\": [\"reading\", \"traveling\", \"photography\"]}"
  1. 嵌套的 JSON 字符串实例:
"{\"name\": \"Charlie\", \"age\": 35, \"address\": {\"street\": \"123 Main St\", \"city\": \"Seattle\", \"zip\": \"98101\"}}"
  1. 包含 null 值的 JSON 字符串实例:
"{\"name\": \"David\", \"age\": null, \"city\": \"Los Angeles\"}"
  1. 包含嵌套数组和对象的 JSON 字符串实例:
"{\"name\": \"Eve\", \"age\": 40, \"friends\": [{\"name\": \"Friend 1\", \"age\": 38}, {\"name\": \"Friend 2\", \"age\": 42}]}"

这些是一些常见的 JSON 字符串实例,它们表示不同类型的数据结构,并且可以在不同系统之间进行数据交换和传输。 JSON 是一种轻量级的数据交换格式,易于阅读和编写。

JSON 格式化后为 JavaScript 对象

在 JavaScript 中,JSON 格式是一种常见的数据交换格式,它与 JavaScript 对象有着相似的结构,但在一些细节上有所不同。下面是一些常见的 JSON 格式化后的 JavaScript 对象的情况和举例:

1. 简单的 JSON 对象

{"name": "Alice","age": 25,"city": "San Francisco"
}

2. 包含数组的 JSON 对象

{"name": "Bob","age": 30,"hobbies": ["reading", "traveling", "photography"]
}

3. 嵌套的 JSON 对象

{"name": "Charlie","age": 35,"address": {"street": "123 Main St","city": "Seattle","zip": "98101"}
}

4. 包含 null 值的 JSON 对象

{"name": "David","age": null,"city": "Los Angeles"
}

5. 包含嵌套数组和对象的 JSON 对象

{"name": "Eve","age": 40,"friends": [{"name": "Friend 1","age": 38},{"name": "Friend 2","age": 42}]
}

JSON 语法规则

  • 数据为 键/值 对
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

JSON 数据 - 一个名称对应一个值

  1. 字符串值:
{"name": "Alice"
}
  1. 数字值:
{"age": 25
}
  1. 布尔值:
{"isStudent": true
}
  1. Null 值:
{"address": null
}
  1. 数组值:
{"hobbies": ["reading", "traveling", "photography"]
}
  1. 嵌套对象值:
{"address": {"street": "123 Main St","city": "Seattle"}
}
  1. 多个键值对:
{"name": "Bob","age": 30,"city": "New York"
}

这些是一些 JSON 数据中一个名称对应一个值的举例。在 JSON 中,每个键值对由一个名称和一个值组成,名称是一个字符串,值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。

JSON 字符串转换为 JavaScript 对象

在 JavaScript 中,可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。以下是一些常用的方法:

1. JSON.parse()

JSON.parse() 方法用于将 JSON 字符串转换为 JavaScript 对象。语法如下:

const jsonString = '{"name": "Alice", "age": 25}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject);

2. 使用try-catch处理异常

在使用 JSON.parse() 方法时,可以使用 try-catch 块来处理可能的异常情况,例如 JSON 字符串格式不正确的情况:

const jsonString = '{"name": "Alice", "age": 25';
try {const jsonObject = JSON.parse(jsonString);console.log(jsonObject);
} catch (error) {console.error('Invalid JSON string:', error);
}

3. 处理数组类型的 JSON 字符串

如果 JSON 字符串表示的是一个数组,也可以使用 JSON.parse() 方法将其转换为 JavaScript 数组:

const jsonArrayString = '["apple", "banana", "cherry"]';
const jsonArray = JSON.parse(jsonArrayString);
console.log(jsonArray);

4. 处理嵌套对象类型的 JSON 字符串

如果 JSON 字符串表示的是一个嵌套对象,同样可以使用 JSON.parse() 方法将其转换为 JavaScript 对象:

const nestedJsonString = '{"name": "Alice", "address": {"city": "San Francisco"}}';
const nestedJsonObject = JSON.parse(nestedJsonString);
console.log(nestedJsonObject);

相关函数

在这里插入图片描述

javascript:void(0) 含义

在 JavaScript 中,javascript:void(0) 是一个特殊的表达式,通常用于在 href 属性中作为超链接的 URL,以防止页面跳转。当用户点击这样的超链接时,不会发生页面跳转,而是执行 void(0),这相当于执行一个空操作。

具体含义如下:

  • void 是一个 JavaScript 操作符,用于计算一个表达式的值并返回 undefined。
  • 0 是一个数字,表示数字 0。

因此,javascript:void(0) 表示执行 void(0) 操作,该操作会计算表达式 0 并返回 undefined。在超链接中使用 javascript:void(0) 可以防止页面跳转,同时在点击时不会执行任何实际操作。

例如,在 HTML 中使用 javascript:void(0) 作为超链接的 URL:

<a href="javascript:void(0)">Click me</a>

点击这个超链接时,不会发生页面跳转,而是执行 void(0) 操作,不会产生任何实际效果。

href="#"与href="javascript:void(0)"的区别

href="#"href="javascript:void(0)" 都可以用于在超链接中阻止页面跳转,但它们之间有一些区别:

  1. href="#":
  • 当使用 href="#" 作为超链接的 URL 时,点击该超链接会在当前页面中滚动到页面顶部,并且 URL 会变为 URL 后面跟上 #
  • 使用 href="#" 可能会导致页面滚动到顶部,可能会影响用户体验。
  1. href="javascript:void(0)":
  • 当使用 href="javascript:void(0)" 作为超链接的 URL 时,点击该超链接不会发生页面跳转,而是执行 void(0) 操作,即返回 undefined,不会有任何实际效果。
  • 使用 href="javascript:void(0)" 可以防止页面跳转,同时不会触发页面滚动或其他操作。

综上所述,虽然 href="#"href="javascript:void(0)" 都可以用于阻止页面跳转,但在阻止页面跳转的同时,href="javascript:void(0)" 不会导致页面滚动到顶部,因此在某些情况下可能更适合使用。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步
在这里插入图片描述

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

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

相关文章

PX4二次开发快速入门(三):自定义串口驱动

文章目录 前言 前言 软件&#xff1a;PX4 1.14.0稳定版 硬件&#xff1a;纳雷NRA12&#xff0c;pixhawk4 仿照原生固件tfmini的驱动进行编写 源码地址&#xff1a; https://gitee.com/Mbot_admin/px4-1.14.0-csdn 修改 src/drivers/distance_sensor/CMakeLists.txt 添加 add…

Servlet详解(从xml到注解)

文章目录 概述介绍作用 快速入门Servelt的执行原理执行流程&#xff1a;执行原理 生命周期概述API 服务器启动&#xff0c;立刻加载Servlet对象(理解)实现Servlet方式(三种)实现Servlet接口实现GenericServlet抽象类&#xff0c;只重写service方法实现HttpServlet实现类实现Htt…

蓝桥杯-路径之谜

题目描述 小明冒充X星球的骑士&#xff0c;进入了一个奇怪的城堡。城堡里面什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡的地面时n*n个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或者纵向移动&#xff0c;但是不能斜着走&#x…

整数的表示和运算

目录 无符号整数 有符号整数 原码表示 原码的缺点 原码-->反码-->补码的转换 原码,补码快速转换技巧(手算) 补码的加法计算 补码的减法计算 总结 无符号整数 无符号整数,即"自然数",0,1,2,3,4,.... C语言中的无符号整数: unsigned short a 1; //无符…

Spark Stream

一、Spark Streaming是什么 Spark Streaming 用于流式数据的处理。Spark Streaming 支持的数据输入源很多&#xff0c;例如&#xff1a;Kafka、Flume、Twitter、ZeroMQ 和简单的 TCP 套接字等等。数据输入后可以用 Spark 的高度抽象原语如&#xff1a;map、reduce、join、wind…

C++ | Leetcode C++题解之第67题二进制求和

题目&#xff1a; 题解&#xff1a; class Solution { public:string addBinary(string a, string b) {string ans;reverse(a.begin(), a.end());reverse(b.begin(), b.end());int n max(a.size(), b.size()), carry 0;for (size_t i 0; i < n; i) {carry i < a.siz…

算法学习系列(五十五):背包模型(三)

目录 引言一、潜水员二、背包问题求具体方案三、机器分配四、开心的今明五、金明的预算方案 引言 今天介绍的是背包模型&#xff0c;还是以题目的形式来介绍的。主要讲了背包问题求方案&#xff0c;就是由最优方案递推回去即可。还有就是一些比较经典的背包问题&#xff0c;其…

im即时通讯源码/仿微信app源码+php即时通讯源码带红包+客服+禁言等系统php+uniapp开发

即时通讯(IM)系统是现代互联网应用中不可或缺的一部分&#xff0c;它允许用户进行实时的文本、语音、视频交流。随着技术的发展&#xff0c;IM系统的功能越来越丰富&#xff0c;如红包、客服、禁言等。本文将探讨如何使用PHP语言开发一个功能完备的即时通讯系统&#xff0c;包括…

逻辑漏洞:Cookie脆弱性导致的逻辑漏洞

前几天学习了逻辑漏洞中的越权漏洞和支付漏洞&#xff0c;今天学习一下cookie脆弱性导致的逻辑漏洞 还是和之前一样&#xff0c;所有内容都是参考别的大佬总结好的&#xff0c;我只是在这里进行学习练习 1、cookie介绍 用户在客户端 (一般为浏览器) 中访问某个页面 &#xff0…

电脑崩溃了,之前备份的GHO文件怎么恢复到新硬盘?

前言 之前咱们说到用WinPE系统给电脑做一个GHO镜像备份&#xff0c;这个备份可以用于硬盘完全崩溃换盘的情况下使用。 那么这个GHO镜像文件怎么用呢&#xff1f; 咱们今天详细来讲讲&#xff01; 如果你的电脑系统硬盘崩溃了或者是坏掉了&#xff0c;那么就需要使用之前备份…

华为机考入门python3--(20)牛客20- 密码验证合格程序

分类&#xff1a;字符串 知识点&#xff1a; 遍历字符串的每个字符 for char in my_str: 可以直接比较字符范围 a < char < z 列表统计元素个数 my_list.count(elem) 寻找子串 my_str.find(sub_str) 题目来自【牛客】 import re import sysdef check_…

【算法】唯一分解定理及最lcm和gcd关系 宝石组合

前言 今天在做一道宝石组合的题目时了解到了这个定理&#xff0c;还是蛮有意思的。 思想 唯一分解定理&#xff1a; 对于任何正整数n&#xff0c;有 n p 1 a 1 p 2 a 2 . . . p k a k n p_1^{a1} \times p_2^{a2} \times ... \times p_k^{ak} np1a1​p2a2​...pkak​ …

C语言零基础快速入门视频教程

C语言零基础快速入门视频教程 介绍C语言C语言零基础视频教程领取教程下期更新预报 介绍C语言 C语言零基础快速入门&#xff1a;探索C语言的起源、特性与魅力 在编程世界中&#xff0c;C语言犹如一座古老而坚实的桥梁&#xff0c;连接着计算机科学的过去与现在。作为一门历史悠…

家庭用水安全新举措:保障自来水管和储水设施卫生

随着公众对家庭用水安全意识的提高&#xff0c;如何确保自来水管和楼顶储水罐的安全性和卫生已成为家庭生活中的重要议题。近期&#xff0c;专家针对此问题提出了一系列实用的注意事项和建议。 注意事项&#xff1a; 定期检查&#xff1a;专家强调&#xff0c;家庭应每季度至…

分布式事务—> seata

分布式事务之Seata 一、什么是分布式事务&#xff1f; 分布式事务是一种特殊类型的事务&#xff0c;它涉及多个分布式系统中的节点&#xff0c;包括事务的参与者、支持事务的服务器、资源服务器以及事务管理器。 在分布式事务中&#xff0c;一次大型操作通常由多个小操作组成…

如何查公网IP?

在网络通信中&#xff0c;每个设备都被分配一个独特的IP地址&#xff0c;用于在Internet上进行标识和通信。公网IP是指可以直接从Internet上访问的IP地址&#xff0c;也称为全局IP。通过查公网IP&#xff0c;我们可以了解我们的设备在Internet上的位置和连接状态。 2. 查公网IP…

vue3使用echarts做树图tree

vue3使用echarts做树图tree 1.安装echarts npm install echarts --save2.在main.js引入 import * as echarts from echarts // 全局方法 app.config.globalProperties.$echarts echarts3.使用 <div id"myChart" :style"{ width: 1000px, height: 1000px …

Django后台项目开发实战五

完成两个功能&#xff1a; HR 可以维护候选人信息面试官可以录入面试反馈 第五阶段 创建 interview 应用&#xff0c;实现候选人面试评估表的增删改功能&#xff0c;并且按照页面分组来展示不同的内容&#xff0c;如候选人基础信息&#xff0c;一面&#xff0c;二面的面试结…

[Linux][网络][传输层][UDP]详细讲解

目录 0.预备知识1.端口号的划分范围2.认识知名端口号3.netstat命令4.pidof 1.UDP协议端格式2.UDP特点3.面向数据报4.UDP的缓冲区5.UDP使用注意事项6.基于UDP的应用层协议 0.预备知识 1.端口号的划分范围 端口号的长度是16位&#xff0c;因此端口号的范围是0 ~ 65535 0 ~ 1023…

构建智能化商旅服务:酒店中台云服务架构设计与实践

随着商旅行业的不断发展和智能化趋势的兴起&#xff0c;酒店中台云服务成为了提升服务质量和效率的关键。本文将探讨酒店商旅中台云服务的架构设计与实现&#xff0c;介绍其关键特点和最佳实践&#xff0c;助力商旅行业迈向智能化未来。 1. **需求分析与场景设计&#xff1a;*…