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

🌈 个人主页: Hygge_Code

🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络

💫 个人格言: “既然选择了远方，便不顾风雨兼程”

一、认识 JavaScript 对象🤔

1. 什么是对象？

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

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

1. 声明对象

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

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

注意事项：

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

示例：

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

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

（1）查：访问属性

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

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

示例：

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

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

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

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

示例：

// 修改已有属性（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 关键字：

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

三、对象中的方法🥝

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

1. 定义方法

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

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

2. 调用方法

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

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

四、遍历对象🧾

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

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

示例：

// 遍历 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. 定义数组对象

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

2. 遍历数组对象

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

// 先遍历数组
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 的核心特点

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

2. JSON 的语法规则

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

1. 数据类型：
   支持字符串、数字、布尔值、null、对象（{}）、数组（[]），不支持函数、日期、正则等特殊类型。

2. 键名必须用双引号包裹：
   这是与 JavaScript 对象的重要区别（JS 对象键名可省略引号或用单引号）。
   例：{"name": "张三"} 正确，{name: "张三"} 或 {'name': "张三"} 均为错误。

3. 字符串必须用双引号包裹：
   数值、布尔值、null 无需引号。
   例：{"age": 20, "isStudent": true, "address": null} 正确。

4. 末尾无逗号：
   对象或数组的最后一个元素后不能加逗号（JavaScript 允许末尾逗号，JSON 不允许）。
   错误示例：{"name": "张三",}（末尾多了逗号）。

5. 数组和对象可嵌套：
   数组中可以包含对象，对象中也可以包含数组或其他对象。

3. JSON 示例

1. 基本对象结构

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

2. 数组结构

[{"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 格式的字符串，便于传输或存储。
示例：

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 对象以便操作。
示例：

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

---

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