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.rhkb.cn/news/323940.html

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

相关文章

如何使git提交的时候忽略一些特殊文件?

认识.gitignore文件 在生成远程仓库的时候我们会看到这样一个选项&#xff1a; 这个.gitignore文件有啥用呢&#xff1f; .gotignore文件是Git版本控制系统中的一个特殊文件。用来指定哪些文件或者目录不被Git追踪或者提交到版本库中。也就意味着&#xff0c;如果我们有一些文…

网络相关笔记

IPv4地址 IPv4地址通常以“点分十进制”形式书写&#xff0c;即四个0-255之间的十进制数&#xff0c;各数之间用英文句点&#xff08;.&#xff09;分隔&#xff0c;例如&#xff1a;192.0.2.1。总共32位的地址空间可以表示大约42亿个不同的地址。 IPv4地址结构包括&#xff…

wordpress外贸建站公司歪建站新版网站上线

wordpress外贸建站公司 歪猫建站 歪猫WordPress外贸建站&#xff0c;专业从事WordPress多语言外贸小语种网站建设与外贸网站海个推广、Google SEO搜索引擎优化等服务。 https://www.waimaoyes.com/dongguan

使用Python实现DataFrame中奇数列与偶数列的位置调换

目录 一、引言 二、背景知识 三、问题描述 四、解决方案 五、案例分析与代码实现 六、技术细节与注意事项 七、扩展与应用 八、封装为函数 九、错误处理与健壮性 十、性能优化 十一、总结与展望 一、引言 在数据处理和分析中&#xff0c;数据框&#xff08;DataFra…

Springboot集成Mybatispuls操作mysql数据库-04

MyBatis-Plus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强而不做改变。它支持所有MyBatis原生的特性&#xff0c;因此引入MyBatis-Plus不会对现有的MyBatis构架产生任何影响。MyBatis-Plus旨在简化开发、提高效率&#xff0c;…

数据结构-二叉树结尾+排序

一、二叉树结尾 1、如何判断一棵树是完全二叉树。 我们可以使用层序遍历的思路&#xff0c;利用一个队列&#xff0c;去完成层序遍历&#xff0c;但是这里会有些许的不同&#xff0c;我们需要让空也进队列。如果队列里到最后只剩下空那么这棵树就是完全二叉树。具体的实现如下…

【springboot基础】如何搭建一个web项目?

正在学习springboot&#xff0c;还是小白&#xff0c;今天分享一下如何搭建一个简单的springboot的web项目&#xff0c;只要写一个类就能实现最基础的前后端交互&#xff0c;实现web版helloworld &#xff0c;哈哈&#xff0c;虽然十分简陋&#xff0c;但也希望对你理解web运作…

C++STL细节,底层实现,面试题04

文章目录 19. STL19.1. 序列容器19.1.1. vector19.1.1.1. 底层实现和特点19.1.1.2. 常用函数19.1.1.3. emplace_back() vs push_back() 19.1.2. array19.1.2.1. 底层实现和特点19.1.2.2. 常用函数 19.1.3. deque19.1.3.1. 底层实现和特点19.1.3.2. 常用函数 19.1.4 list19.1.4.…

誉天教育近期开班计划

云计算HCIE 晚班 2024/5/13 大数据直通车 周末班 2024/5/25 数通直通车 晚班 2024/5/27 云服务HCIP 周末班 2024/6/1 云计算HCIP 周未班 2024/6/1 RHCA442 晚班 2024/6/17 周末班&#xff1a;周六-周日9:00-17:00晚 班&#xff1a;周一到周五19:00-21:30注&…

搜索的未来:OpenAI 的 GPT 如何彻底改变行业

搜索的未来&#xff1a;OpenAI 的 GPT 如何彻底改变行业 概述 搜索引擎格局正处于一场革命的风口浪尖&#xff0c;而 OpenAI 的 GPT 处于这场变革的最前沿。最近出现了一种被称为“im-good-gpt-2-chatbot”的神秘聊天机器人&#xff0c;以及基于 ChatGPT 的搜索引擎的传言&am…

android zygote进程启动流程

一&#xff0c;启动入口 app_main.cpp int main(int argc, char* const argv[]) {if (!LOG_NDEBUG) {String8 argv_String;for (int i 0; i < argc; i) {argv_String.append("\"");argv_String.append(argv[i]);argv_String.append("\" ")…

Python语言基础学习(上)

目录 一、常量和表达式 二、变量和类型 2.1 认识变量 2.2 定义变量 2.3 变量类型 1、整数 int 2、浮点数&#xff08;小数&#xff09;float 3、字符串 str 4、布尔类型 2.4 类型转换 三、注释 3.1 单行注释 3.2 文档注释&#xff08;或者多行注释&#xff09; …

[附源码]石器时代_恐龙宝贝内购版_三网H5手游_带GM工具

石器时代之恐龙宝贝内购版_三网H5经典怀旧Q萌全网通手游_Linux服务端源码_视频架设教程_GM多功能授权后台_CDK授权后台 本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff0…

SpringBoot工作原理

优点&#xff1a;自动装配&#xff0c;起步依赖 起步依赖 原理就是maven的依赖传递 【A依赖B、B依赖C….&#xff0c;则我导入依赖A的时候&#xff0c;B&#xff0c;C都会被maven加载进来】 重点看看自动装配 概念&#xff1a; 当Spring容器启动后&#xff0c;一些配置类、…

攻略:ChatGPT3.5~4.0(中文版)国内无限制免费版(附网址)【2024年5月最新更新】

一、什么是ChatGPT&#xff1f; 1、ChatGPT的全名是Chat Generative Pre-trained Transformer&#xff0c;其中"chat"表示聊天。"GPT"则是由三部分组成&#xff1a;生成式&#xff08;generative&#xff09;意味着具有创造力&#xff1b;预训练&#xff0…

LeetCode 难题解析 —— 正则表达式匹配 (动态规划)

10. 正则表达式匹配 思路解析 这道题虽然看起来不难理解&#xff0c;但却存在多种可能&#xff0c;当然这种可能的数量是有限的&#xff0c;且其规律对于每一次判别都使用&#xff0c;所以自然而然就想到用 动态规划 的方法啦 接下来逐步分析可能的情况&#xff1a; &#x…

3---Linux编译器gcc/g++

一、程序的翻译过程&#xff1a;ESc->iso 1.1预处理&#xff1a;c->c 主要功能&#xff1a;宏替换、头文件的展开、条件编译、去注释&#xff1b;目的是让代码变得纯粹。条件编译&#xff0c;可以实现对代码的裁剪。比如对于不同用户&#xff0c;设置不同的宏常量&…

详解分布式锁

知识点&#xff1a; 单体锁存在的问题&#xff1a; 单体锁&#xff0c;即单体应用中的锁&#xff0c;通过加单体锁&#xff08;synchronized或RentranLock&#xff09;可以保证单个实例并发安全 单体锁是JVM层面的锁&#xff0c;只能保证单个实例上的并发访问安全 如果将单…

java JMH 学习

JMH 是什么&#xff1f; JMH&#xff08;Java Microbenchmark Harness&#xff09;是一款专用于代码微基准测试的工具集&#xff0c;其主要聚焦于方法层面的基准测试&#xff0c;精度可达纳秒级别。此工具由 Oracle 内部负责实现 JIT 的杰出人士编写&#xff0c;他们对 JIT 及…

鸿蒙内核源码分析(任务切换篇) | 看汇编如何切换任务

在鸿蒙的内核线程就是任务&#xff0c;系列篇中说的任务和线程当一个东西去理解. 一般二种场景下需要切换任务上下文: 在线程环境下&#xff0c;从当前线程切换到目标线程&#xff0c;这种方式也称为软切换&#xff0c;能由软件控制的自主式切换.哪些情况下会出现软切换呢? 运…