目录
本文摘要: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加强篇。