建网站的详细案例手机版企页网站案例
目录
十一、对象与内置对象
11.1 对象本质与声明
11.2 对象属性操作
11.3 对象方法
11.4 遍历对象
11.5 内置Math对象
11.6 数据类型存储机制
11.7 专业术语解析
本文摘要：JavaScript对象是描述现实事物的无序数据集合，包含属性和方法。对象通过字面量或构造函数创建，属性操作包括查询、修改、新增和删除。方法使用函数表达式定义并通过this访问属性。遍历对象使用for...in循环，注意属性无序存储。内置Math对象提供多种数学方法。数据存储分值类型（栈存储，深拷贝）和引用类型（堆存储，浅拷贝）。专业术语包括关键字、标识符、表达式和语句等。对象类比"人物卡片"，核心知识体系涵盖变量到对象的基础语法要点。
十一、对象与内置对象
11.1 对象本质与声明
核心定义：
1.对象是无序的数据集合，用于描述现实事物
2.与数组对比：数组有序（索引访问），对象无序（键值对）
声明语法：
// 对象字面量（推荐）let 对象名 = {属性名: 属性值,方法名: function() { ... }};// 构造函数（了解）let 对象名 = new Object();生活化案例：
let teacher = {name:'张老师', // 静态特征（属性）age: 18, // 属性skills: ['教学', '唱歌', '跳舞'], // 数组属性teach: function() { // 动态行为（方法）console.log('讲解JavaScript知识');}};11.2 对象属性操作
| 操作类型 | 语法 | 示例 | 内存变化 |
| 查询 | 对象.属性名 | teacher.name → 'pink老师' | 读取栈中地址指向的值 |
| 对象['属性名'] | teacher['age'] → 18 | ||
| 修改 | 对象.属性名 = 新值 | teacher.age = 20 | 堆中数据被修改 |
| 新增 | 对象.新属性名 = 值 | teacher.gender = '女' | 堆中添加新键值对 |
| 删除 | delete 对象.属性名 | delete teacher.skills | 堆中移除键值对 |
两种访问方式对比：
| 场景 | 点语法(.) | 方括号([]) |
| 常规属性名 | ✅ obj.name | ✅ obj['name'] |
| 特殊字符属性名 | ❌ obj.first-name | ✅ obj['first-name'] |
| 动态属性名 | ❌ | ✅ let key='age'; obj[key] |
11.3 对象方法
方法定义：
let person = {name: 'Andy',// 方法定义（函数表达式）sayHi: function() {console.log('你好！');},// ES6简写语法eat(food) { // 等价于 eat: function(food)console.log(`吃${food}`);}};方法调用：
person.sayHi(); // 输出：你好！person.eat('苹果'); // 输出：吃苹果注意事项：
1.方法名后必须有()才会执行
2.方法内部可通过this访问对象属性（进阶内容）
11.4 遍历对象
for...in 循环：
let student = {name: '小明',age: 16,grade: '高一'};for (let key in student) {console.log(key); // 属性名：'name','age','grade'console.log(student[key]); // 属性值：'小明',16,'高一'}遍历规则：
1.key变量自动获取每个属性名（字符串类型）
2.必须用对象[key]获取值（不能用对象.key）
3.遍历顺序不固定（对象属性无序存储）
11.5 内置Math对象
| 方法 | 功能 | 示例 | 结果 |
| Math.random() | 生成0~1随机数 | Math.random() | 0.123（随机） |
| Math.ceil(x) | 向上取整 | Math.ceil(1.1) | 2 |
| Math.floor(x) | 向下取整 | Math.floor(1.9) | 1 |
| Math.round(x) | 四舍五入 | Math.round(1.5) | 2 |
| Math.max(a,b...) | 求最大值 | Math.max(5, 10, 3) | 10 |
| Math.min(a,b...) | 求最小值 | Math.min(5, 10, 3) | 3 |
| Math.pow(x,y) | 幂运算（x的y次方） | Math.pow(2, 3) | 8 |
| Math.abs(x) | 绝对值 | Math.abs(-5) | 5 |
随机整数公式：
// 生成min~max的随机整数function getRandomInt(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}let dice = getRandomInt(1, 6); // 1~6随机骰子数11.6 数据类型存储机制
值类型（栈存储）：
| 类型 | 特点 | 复制行为 |
| string | 字符串 | 深拷贝（完全独立） |
| number | 数字 | |
| boolean | 布尔值 | |
| undefined | 未定义 | |
| null | 空值 |
引用类型（堆存储）：
| 类型 | 特点 | 复制行为 |
| object | 对象 | 浅拷贝（共享引用） |
| array | 数组 | |
| function | 函数 |
内存模型图示：
值类型复制：创建完全独立的副本
let a = 10;let b = a; // b=10（内存中新空间）b = 20; // a仍为10引用类型复制：复制引用地址（指向同一对象）
let obj1 = { name: 'Alice' };let obj2 = obj1; // 复制引用地址obj2.name = 'Bob'; // 修改堆中数据console.log(obj1.name); // 'Bob'（同步变化）11.7 专业术语解析
| 术语 | 定义 | 示例 |
| 关键字 | JavaScript中有特殊含义的保留单词 | let, function, if |
| 保留字 | 未来可能成为关键字的单词（避免使用） | class, enum, super |
| 标识符 | 变量、函数、属性的名字 | userName, calculateTotal |
| 表达式 | 会产生值的代码片段 | 10 + 5, age >= 18 |
| 语句 | 执行操作的完整指令 | if (...) {...}, for (...) {...} |
知识体系全景图
终极整合说明：
1.对象生活化：用“人物卡片”类比对象（属性=特征，方法=行为）
2.内存可视化：
（一）栈/堆存储差异图解
（二）深浅拷贝动画演示
3.操作对比表：
（一）属性访问两种方式适用场景
（二）Math方法速查表
4.易错点标注：
（一）方法调用忘记()
（二）遍历对象时错误使用对象.key
（三）引用类型复制的陷阱
5.完整覆盖所有图片内容：
（一）对象术语（属性/方法）
（二）for...in遍历机制
（三）数据类型存储区别
（四）专业术语定义
至此，JavaScript核心知识体系已完整构建，从变量到对象，覆盖基础语法所有关键点。下一个篇章JavaScript加强篇。