- JSON 英文全称 JavaScript Object Notation
- JSON 是一种轻量级的数据交换格式。
- JSON是独立的语言
- JSON 易于理解。
JSON 实例
- 简单的 JSON 字符串实例:
"{\"name\": \"Alice\", \"age\": 25, \"city\": \"San Francisco\"}"
- 包含数组的 JSON 字符串实例:
"{\"name\": \"Bob\", \"age\": 30, \"hobbies\": [\"reading\", \"traveling\", \"photography\"]}"
- 嵌套的 JSON 字符串实例:
"{\"name\": \"Charlie\", \"age\": 35, \"address\": {\"street\": \"123 Main St\", \"city\": \"Seattle\", \"zip\": \"98101\"}}"
- 包含 null 值的 JSON 字符串实例:
"{\"name\": \"David\", \"age\": null, \"city\": \"Los Angeles\"}"
- 包含嵌套数组和对象的 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 数据 - 一个名称对应一个值
- 字符串值:
{
"name": "Alice"
}
- 数字值:
{
"age": 25
}
- 布尔值:
{
"isStudent": true
}
- Null 值:
{
"address": null
}
- 数组值:
{
"hobbies": ["reading", "traveling", "photography"]
}
- 嵌套对象值:
{
"address": {
"street": "123 Main St",
"city": "Seattle"
}
}
- 多个键值对:
{
"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)"
都可以用于在超链接中阻止页面跳转,但它们之间有一些区别:
-
href="#"
:
- 当使用
href="#"
作为超链接的 URL 时,点击该超链接会在当前页面中滚动到页面顶部,并且 URL 会变为 URL 后面跟上#
。 - 使用
href="#"
可能会导致页面滚动到顶部,可能会影响用户体验。
-
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)"
不会导致页面滚动到顶部,因此在某些情况下可能更适合使用。
关注我,不迷路,共学习,同进步
关注我,不迷路,共学习,同进步