【Java Web学习 | 第十篇】JavaScript(4) 对象

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

- [一、认识 JavaScript 对象🤔](#一、认识 JavaScript 对象🤔)
- - [1. 什么是对象？](#1. 什么是对象？)
- 二、对象的声明与基本操作🐦‍🔥
- - [1. 声明对象](#1. 声明对象)
  - [2. 对象的核心操作（CRUD）](#2. 对象的核心操作（CRUD）)
- 三、对象中的方法🥝
- - [1. 定义方法](#1. 定义方法)
  - [2. 调用方法](#2. 调用方法)
- 四、遍历对象🧾
- 五、数组对象（对象的集合）🥝
- - [1. 定义数组对象](#1. 定义数组对象)
  - [2. 遍历数组对象](#2. 遍历数组对象)
- [六、 JSON对象🐦‍🔥](#六、 JSON对象🐦‍🔥)
- - [1. JSON 的核心特点](#1. JSON 的核心特点)
  - [2. JSON 的语法规则](#2. JSON 的语法规则)
  - [3. JSON 示例](#3. JSON 示例)
  - - [1. 基本对象结构](#1. 基本对象结构)
    - [2. 数组结构](#2. 数组结构)
  - [4. JSON 与 JavaScript 对象的区别](#4. JSON 与 JavaScript 对象的区别)
  - [5. JavaScript 中操作 JSON](#5. JavaScript 中操作 JSON)
  - - [1. `JSON.stringify()`：将 JS 对象转为 JSON 字符串](#1. JSON.stringify()：将 JS 对象转为 JSON 字符串)
    - [2. `JSON.parse()`：将 JSON 字符串转为 JS 对象](#2. JSON.parse()：将 JSON 字符串转为 JS 对象)

一、认识 JavaScript 对象🤔

1. 什么是对象？

对象是 JavaScript 中的一种复杂数据类型 ，用于存储键值对形式的数据
与数组（有序集合）不同，对象是无序的数据集合，通过"属性名"访问数据
生活中的例子：一个"人"可以用对象表示（包含姓名、年龄、性别等属性）

二、对象的声明与基本操作🐦‍🔥

1. 声明对象

对象通过大括号 {} 声明，内部包含多个"属性名: 属性值"对，语法如下：

javascript 复制代码

let 对象名 = {
  属性名1: 属性值1,
  属性名2: 属性值2,
  // ...更多属性
};

注意事项：

属性名和属性值之间用冒号 : 分隔
多个属性之间用逗号 , 分隔（最后一个属性后的逗号可省略）
属性名一般可省略引号，但若包含空格、中横线等特殊字符，必须用 "" 或 '' 包裹

示例：

javascript 复制代码

let person = {
  uname: "林七夜",  // 普通属性名（无引号）
  age: 18,
  sex: "男",
  "goods-name": "青春"  // 含特殊字符，必须加引号
};
console.log(typeof person); // 输出：object（对象类型）

2. 对象的核心操作（CRUD）

（1）查：访问属性

有两种方式访问对象的属性：

点语法 ：对象名.属性名（适合普通属性名）
方括号语法 ：对象名["属性名"]（适合特殊属性名或变量属性名）

示例：

javascript 复制代码

// 点语法访问
console.log(person.uname); // 输出："林七夜"

// 方括号语法访问
console.log(person["uname"]); // 输出："林七夜"
console.log(person["goods-name"]); // 输出："青春"（必须用方括号访问特殊属性名）

（2）增/改：添加或修改属性

添加和修改属性使用相同的语法，区别在于对象中是否已存在该属性：

若属性不存在：执行新增操作
若属性已存在：执行修改操作

示例：

javascript 复制代码

// 修改已有属性（age 已存在）
person.age = 20;
console.log(person.age); // 输出：20

// 新增属性（hobby 不存在）
person.hobby = "守夜人";
console.log(person.hobby); // 输出："守夜人"

// 用变量作为属性名（必须用方括号语法）
let key = "height";
person[key] = 180; // 等价于 person.height = 180

（3）删：删除属性

删除对象属性必须使用 delete 关键字：

javascript 复制代码

// 删除 sex 属性
delete person.sex;
console.log(person.sex); // 输出：undefined（属性已被删除）

三、对象中的方法🥝

对象的属性值不仅可以是字符串、数字等基本类型，还可以是函数。当对象的属性值为函数时，我们称之为方法。

1. 定义方法

方法的定义与普通属性类似，只需将属性值设为函数即可：

javascript 复制代码

let obj = {
  uname: "沧南市",
  // 定义方法（函数作为属性值）
  sing: function(x, y) {
    console.log("singing");
    console.log(x + y); // 方法可以接收参数
  },
  dance: function() {
    // 空方法
  }
};

2. 调用方法

通过 对象名.方法名() 调用对象的方法：

javascript 复制代码

obj.sing(1, 2); // 输出："singing" 和 3

四、遍历对象🧾

要遍历对象的所有属性，可以使用 for...in 循环，语法如下：

javascript 复制代码

for (let 变量名 in 对象名) {
  // 变量名表示当前属性名（字符串类型）
  // 对象名[变量名] 表示当前属性值
}

示例：

javascript 复制代码

// 遍历 person 对象
for (let kk in person) {
  console.log(kk + ":" + person[kk]); 
  // 输出：uname:林七夜、age:20、goods-name:青春、hobby:守夜人、height:180
}

注意：

for...in 循环中，变量获取的是属性名字符串，因此必须用 对象名[变量名] 访问属性值（不能用 对象名.变量名）
for...in 也可遍历数组，但不推荐（数组更适合用 for 循环或 forEach 方法）

五、数组对象（对象的集合）🥝

在实际开发中，我们经常需要处理多个对象的集合（如多个用户、多条商品数据），这时可以用数组存储对象，形成"数组对象"。

1. 定义数组对象

javascript 复制代码

let stu = [
  { uname: "林七夜", age: 18, sex: "男" },
  { uname: "立夏", age: 20, sex: "女" },
  { uname: "肖奈", age: 22, sex: "男" }
];

2. 遍历数组对象

需结合数组遍历 和对象遍历：

javascript 复制代码

// 先遍历数组
for (let i = 0; i < stu.length; i++) {
  // 再遍历数组中的每个对象
  for (let key in stu[i]) {
    console.log(key + ":" + stu[i][key]);
  }
}

输出结果：

复制代码

uname:林七夜
age:18
sex:男
uname:立夏
age:20
sex:女
uname:肖奈
age:22
sex:男

六、 JSON对象🐦‍🔥

JSON（JavaScript Object Notation，JavaScript 对象表示法）是一种轻量级的数据交换格式，它基于 JavaScript 对象语法的子集，但独立于编程语言，几乎所有主流编程语言都支持 JSON 的解析和生成，因此成为跨平台、跨语言数据传输的首选格式。

1. JSON 的核心特点

简洁清晰：语法简单，易于人类阅读和编写，也易于机器解析和生成。
跨平台兼容：与编程语言无关，任何语言都能处理（如 JavaScript、Python、Java 等）。
纯文本格式：以文本形式存储数据，便于网络传输和存储。
键值对结构：类似对象的"属性-值"形式，同时支持数组等复合结构。

2. JSON 的语法规则

JSON 语法是 JavaScript 对象语法的严格子集，有以下核心规则：

数据类型 ：

支持字符串、数字、布尔值、null、对象（{}）、数组（[]），不支持函数、日期、正则等特殊类型。
键名必须用双引号包裹 ：

这是与 JavaScript 对象的重要区别（JS 对象键名可省略引号或用单引号）。

例：{"name": "张三"} 正确，{name: "张三"} 或 {'name': "张三"} 均为错误。
字符串必须用双引号包裹 ：

数值、布尔值、null 无需引号。

例：{"age": 20, "isStudent": true, "address": null} 正确。
末尾无逗号 ：

对象或数组的最后一个元素后不能加逗号（JavaScript 允许末尾逗号，JSON 不允许）。

错误示例：{"name": "张三",}（末尾多了逗号）。
数组和对象可嵌套 ：

数组中可以包含对象，对象中也可以包含数组或其他对象。

3. JSON 示例

1. 基本对象结构

json 复制代码

{
  "uname": "林七夜",
  "age": 18,
  "isMale": true,
  "hobby": ["看书", "跑步"],
  "address": {
    "city": "沧南市",
    "street": "守夜人街道"
  },
  "score": null
}

2. 数组结构

json 复制代码

[
  {"name": "立夏", "age": 20},
  {"name": "肖奈", "age": 22},
  {"name": "微微", "age": 19}
]

4. JSON 与 JavaScript 对象的区别

特性	JSON	JavaScript 对象
键名	必须用双引号包裹	可省略引号，或用单/双引号（特殊名需引号）
字符串	必须用双引号	可单/双引号
末尾逗号	不允许	允许（部分环境支持）
数据类型	字符串、数字、布尔、null、对象、数组	额外支持函数、日期、正则等
用途	数据交换格式（文本）	代码中的数据结构（内存中）

5. JavaScript 中操作 JSON

JavaScript 内置了 JSON 对象，提供了两个核心方法用于 JSON 与 JS 对象的转换：

1. `JSON.stringify()`：将 JS 对象转为 JSON 字符串

用于将内存中的 JavaScript 对象转换为 JSON 格式的字符串，便于传输或存储。

示例：

javascript 复制代码

let person = {
  uname: "林七夜",
  age: 18,
  hobby: ["看书", "跑步"]
};

// 转换为 JSON 字符串
let jsonStr = JSON.stringify(person);
console.log(jsonStr); 
// 输出：{"uname":"林七夜","age":18,"hobby":["看书","跑步"]}
console.log(typeof jsonStr); // 输出：string

2. `JSON.parse()`：将 JSON 字符串转为 JS 对象

用于解析接收到的 JSON 字符串，转换为 JavaScript 对象以便操作。

示例：

javascript 复制代码

let jsonStr = '{"uname":"林七夜","age":18,"hobby":["看书","跑步"]}';

// 解析为 JS 对象
let person = JSON.parse(jsonStr);
console.log(person); 
// 输出：{ uname: "林七夜", age: 18, hobby: ["看书", "跑步"] }
console.log(person.uname); // 输出：林七夜（可直接操作属性）

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！

【Java Web学习 | 第十篇】JavaScript(4) 对象

文章目录

一、认识 JavaScript 对象🤔

1. 什么是对象？

二、对象的声明与基本操作🐦‍🔥

1. 声明对象

2. 对象的核心操作（CRUD）

（1）查：访问属性

（2）增/改：添加或修改属性

（3）删：删除属性

三、对象中的方法🥝

1. 定义方法

2. 调用方法

四、遍历对象🧾

五、数组对象（对象的集合）🥝

1. 定义数组对象

2. 遍历数组对象

六、 JSON对象🐦‍🔥

1. JSON 的核心特点

2. JSON 的语法规则

3. JSON 示例

1. 基本对象结构

2. 数组结构

4. JSON 与 JavaScript 对象的区别

5. JavaScript 中操作 JSON

1. JSON.stringify()：将 JS 对象转为 JSON 字符串

2. JSON.parse()：将 JSON 字符串转为 JS 对象

1. `JSON.stringify()`：将 JS 对象转为 JSON 字符串

2. `JSON.parse()`：将 JSON 字符串转为 JS 对象