JavaScript基础篇——第五章 对象(最终篇)

目录

十一、对象与内置对象

[11.1 对象本质与声明](#11.1 对象本质与声明)

[11.2 对象属性操作](#11.2 对象属性操作)

[11.3 对象方法](#11.3 对象方法)

[11.4 遍历对象](#11.4 遍历对象)

[11.5 内置Math对象](#11.5 内置Math对象)

[11.6 数据类型存储机制](#11.6 数据类型存储机制)

[11.7 专业术语解析](#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加强篇。

相关推荐
中微子1 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君2 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子2 小时前
React 状态管理 源码深度解析
前端·react.js
百锦再3 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖
风吹落叶花飘荡3 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则3 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
失败又激情的man4 小时前
python之requests库解析
开发语言·爬虫·python
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4534 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友4 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维