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…

NodeJs入门知识

**************************************************************************************************************************************************************************** 1、配置Node.js与npm下载&#xff08;精力所致&#xff0c;必有精品&#xff09; …

算法--分治法

分治法是一种算法设计策略&#xff0c;它将一个复杂的问题分解成两个或多个相同或相似的子问题&#xff0c;直到这些子问题可以简单地直接解决。然后&#xff0c;这些子问题的解被合并以产生原始问题的解。 分治法通常遵循以下三个步骤&#xff1a; 分解&#xff1a;将原问题…

蓝桥杯-路径之谜

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

整数的表示和运算

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

前端初学者的 CSS 入门

文章导读&#xff1a;AI 辅助学习前端&#xff0c;包含入门、进阶、高级部分前端系列内容&#xff0c;当前是 CSS 的部分&#xff0c;瑶琴会持续更新&#xff0c;适合零基础的朋友&#xff0c;已有前端工作经验的可以不看&#xff0c;也可以当作基础知识回顾。 从这篇文章开始…

OneFlow深度学习框架入门与实践

OneFlow深度学习框架入门与实践 一、引言 在深度学习领域&#xff0c;框架的选择对于研究人员和开发者至关重要。OneFlow作为一款新兴的深度学习框架&#xff0c;凭借其高性能、易用性和灵活性&#xff0c;逐渐在业界崭露头角。本文将带领大家深入了解OneFlow深度学习框架&am…

Spark Stream

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

React 第十七章 Hook useRef

React中的useRef是一个Hook函数&#xff0c;它可以用来在函数组件中创建一个可变的引用。它类似于类组件中的ref属性&#xff0c;但有一些不同之处。 useRef可以用来保存任意可变值&#xff0c;而不仅仅是DOM元素的引用。它可以在函数组件的多次渲染之间保持不变。 使用useRe…

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;连接着计算机科学的过去与现在。作为一门历史悠…

C++泛型算法2——谓词,lambda表达式

定制操作 很多算法都会比较输入序列中的元素。 默认情况下&#xff0c;这类算法使用元素类型的<或运算符完成比较。 标准库还为这些算法定义了额外的版本&#xff0c;允许我们提供自己定义的操作来代替默认运算符。 例如&#xff0c;sort 算法默认使用元素类型的<运算…

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

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