26 JavaScript学习：JSON和void

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)" 不会导致页面滚动到顶部，因此在某些情况下可能更适合使用。