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、接口数据、组件、面向对象全部基于对象!

相关推荐
dear_bi_MyOnly21 分钟前
数组字符串深度解析:从入门到卡牌实战
开发语言·c++·学习
正在走向自律25 分钟前
从 Python 基础到大模型落地:读《深入浅出 Python 人工智能》,吃透 AI 工程化 CRUD 实战
开发语言·人工智能·python·机器学习·知识脉络
用户2832096793741 分钟前
从进程线程到 async/await:JS Event-loop事件循环机制底层解析
前端·javascript
被摘下的星星42 分钟前
Java 中 .length、.length() 以及 .size() 的区分
java·开发语言
guanguan0_01 小时前
用 AI 做技术方案评审:输入 3 个方案,输出对比矩阵 + 推荐理由
javascript·人工智能·矩阵·ai编程
geovindu1 小时前
CSharp: State Pattern
开发语言·后端·c#·.net·状态模式·行为模式
IT小白杨1 小时前
TikTok小店防封号浏览器实战:2026年多店铺环境隔离与账号安全运营技术解析
开发语言·数据库·安全·php·chrome devtools·指纹浏览器
2601_966949651 小时前
Python 量化开发为什么适合使用金融数据 SDK?从数据获取到策略研究的工程化实践
开发语言·python·数据分析·量化交易·股票数据·quantdash
万年咸鱼1 小时前
Java ArrayList 详解:原理、用法与实战
java·开发语言·windows