JavaScript 对象零基础详解|属性、方法、遍历、增删改查

一、什么是对象?

对象是一组 键值对(key: value) 的集合,用来描述一个具体事物。

对象分为两部分:

  • 属性:事物的特征(名词:名字、年龄、性别)

  • 方法:事物的行为(动词:说话、跑步)

简单理解:数组是一堆数据,对象是一个完整的人/物品/数据模型。


二、对象创建三种方式

1. 对象字面量(工作最常用、推荐)

直接使用 {} 创建,简洁高效。

复制代码

// 用对象描述一个用户 let person = { name: "小明", age: 18, gender: "男", // 对象方法 sayHi: function () { console.log("Hello 前端!"); } };

2. new Object() 创建

先创建空对象,再动态追加属性。

复制代码

let user = new Object(); user.name = "小红"; user.age = 20; console.log(user);

3. 自定义构造函数(批量创建对象)

适合批量生成多个结构相同的对象。

复制代码

function Student(name, age) { this.name = name; this.age = age; } // 实例化多个对象 let s1 = new Student("张三", 19); let s2 = new Student("李四", 21); console.log(s1, s2);


三、对象属性访问两种方式

1. 点语法 . (最常用)

复制代码

console.log(person.name); console.log(person.age); // 调用对象方法 person.sayHi();

2. 方括号语法 \[\]

适用场景:属性名不规则、需要用变量动态取值。

复制代码

console.log(person["name"]); // 变量动态获取属性 let key = "age"; console.log(person[key]);

区别总结:

. 简单固定取值;\[\] 支持变量、动态取值、特殊属性名取值。


四、对象增、改、删操作

对象是可变数据,可以随时动态修改。

复制代码

let car = { brand: "比亚迪" }; // 1. 新增属性 car.color = "白色"; // 2. 修改属性(同名覆盖) car.brand = "特斯拉"; // 3. 删除属性 delete car.color; console.log(car);


五、对象遍历 for...in

for in 专门用来遍历对象,自动获取对象所有属性名。

复制代码

let student = { name: "小红", score: 95, class: "前端一班" }; // k 代表每一个属性名 for (let k in student) { console.log("属性名:", k); console.log("属性值:", student[k]); }

⚠️ 注意:for in 不适合遍历数组,只用于对象。


六、对象引用类型特点(重点坑点)

对象属于 引用数据类型,变量存的是地址,不是真实值。

多个变量指向同一个对象,会互相影响。

复制代码

let obj1 = { num: 10 }; let obj2 = obj1; // 修改 obj2 会影响 obj1 obj2.num = 100; console.log(obj1.num); // 100 console.log(obj2.num); // 100


七、知识点总结

  • 对象以 键值对 存储数据,描述一个完整事物

  • 包含:属性(特征)、方法(行为)

  • 字面量 {} 是开发首选创建方式

  • 取值:. 静态取值 、\[\] 动态取值

  • 支持动态新增、修改、delete 删除属性

  • for in 遍历对象属性

  • 对象是引用类型,赋值会互相影响

对象是 JS 核心精髓,后续 AJAX、接口数据、组件、面向对象全部基于对象!

相关推荐
豆角焖肉4 小时前
SpringBoot+JWT 实现前后端分离登录鉴权
java·开发语言·spring boot·jwt·前后端分离·登录认证
程序员Sunday4 小时前
Vue 3 响应式原理是什么?Proxy、ref 和 reactive 有什么区别?
前端·javascript
Wang's Blog4 小时前
Java 项目部署之 Docker工具快速入门: 自定义镜像的分层结构与写时复制
java·开发语言·docker
mldong4 小时前
一个 npm 包,九页审批中心:Vue3 项目接上工作流引擎
前端·javascript·vue.js
kimnoic13 小时前
Python数据库学习心得:SQLite、MySQL、PostgreSQL优缺点
开发语言·python
必须得开心呀14 小时前
python编写带界面的软件,需要安装哪些插件
开发语言·python
刘发财15 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
A接拉起00716 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
_馒头16 小时前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js
沫璃染墨16 小时前
《Qt从零入门系列(十三):QSS样式表详解——从选择器与层叠规则到控件美化实战》
开发语言·css·c++·qt·ui·qt6.3·qss