26 JavaScript学习:JSON和void

发布于:2024-05-08 ⋅ 阅读:(34) ⋅ 点赞:(0)
  • 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)" 不会导致页面滚动到顶部,因此在某些情况下可能更适合使用。

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

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