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

相关推荐
小羊没烦恼!6 小时前
初探性能优化——2个月到4小时的性能提升
java·开发语言·windows·算法·c#
三十而立洋7 小时前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
伞伞悦读7 小时前
【第38期】Python 模块与包详解:import、from、模块搜索路径、包结构和 __init__
开发语言·python
卡布鲁7 小时前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
C语言小火车8 小时前
C/C++ 为什么需要编译器?
开发语言·c++
李少兄8 小时前
JavaScript 隐式全局变量解析
javascript
霍霍的袁9 小时前
【C++】map 和 set 的使用 | 从用法到底层
开发语言·c++·学习·visual studio
孙启超9 小时前
【AI开发之Rust】第 11 课:智能指针与内部可变性
开发语言·后端·rust
此生决int9 小时前
深入理解C++系列(20)——C++11(下)
开发语言·c++
沙蒿同学10 小时前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端