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

相关推荐
1024奇点7 小时前
【仓颉语言入门 · 第二篇 第 22 课】
开发语言·ide·开源
Warren2Lynch8 小时前
C4 模型详解:利用 Visual Paradigm 可视化软件架构的综合指南
开发语言·uml
Knight_AL8 小时前
Java 文件下载时文件名中的 `#` 被转换成 `%23`?一次 URL 编码与解码问题排查
java·开发语言
FRing039 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿9 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
by209999 小时前
C++ 智能指针的所有权与使用
开发语言·c++·经验分享
砚底藏山河9 小时前
python量化自定义周期 K 线合成
java·开发语言·数据库·python·金融
IT召唤狮10 小时前
开源企业级零信任项目Pangolin,零信任能挡住PHP核弹漏洞吗?
开发语言·开源·php
知已难寻10 小时前
03 · OpenStack的计算管理 Nova
运维·服务器·开发语言·云原生·云计算·openstack·开源软件
Rover Ramble10 小时前
C++ 用互斥锁实现读写锁
开发语言·c++