码上未来IT培训老师直接接听

400-029-09** 400-029-0997 转 36015
查看完整号码
扫码拨号
微信扫码拨号

AI大模型全栈开发|前端基础：JavaScript基础-内置对象

2025/6/8 0:23:13

前端基础JavaScript基础内置对象课程前言Cours...

前端基础JavaScript基础内置对象

课程前言Course Introduction同学们，欢迎进入今天的课程！本章节将聚焦内置对象与数据存储机制两大核心模块。你将系统学习 Math 的数学运算、Date 的时间处理、Array 与 String 的常用操作方法，深入理解简单与复杂数据类型在堆栈中的存储逻辑及传参差异。这些知识是 JS 编程的基石，助你掌握高效操作数据的能力，为后续框架学习与项目开发筑牢根基。现在让我们开始今天的课程吧！一内置对象

CodingFuture

1.1概述

1.对象分类：JavaScript 对象分为三类：自定义对象：开发者手动创建的对象（如var obj = {name: "张三"}）。内置对象：JS 语言自带的对象，提供基础功能（如Math、Date）。浏览器对象：浏览器环境提供的对象（如window、document）。2.内置对象的作用：封装常用功能，简化开发。例如：Math用于数学运算，Date用于处理日期时间。学习内置对象需掌握其常用属性和方法，可通过查阅文档（如 MDN）深入学习。1.2Math 对象

功能：提供数学运算相关的属性和方法。常用成员：属性/方法说明示例Math.PI圆周率console.log(Math.PI); // 3.141592653589793Math.floor()向下取整Math.floor(3.9); // 3Math.ceil()向上取整Math.ceil(3.1); // 4Math.round()四舍五入Math.round(-3.5); // -3（注意负数规则）Math.abs()绝对值Math.abs(-5); // 5Math.max()求*大值Math.max(1, 3, 5); // 5（不能直接传数组）Math.random()生成 [0,1) 随机数Math.random(); // 0.7854...生成指定范围随机整数：公式：Math.floor(Math.random() * (max - min + 1)) + min例：生成 1-10 的随机整数：Math.floor(Math.random() * 10) + 1封装函数：function getRandom(min, max){return Math.floor(Math.random() * (max - min + 1)) + min;}案例：随机颜色生成1.RGB 颜色（0-255）：function randomRgb(){const r = Math.floor(Math.random() * 256);const g = Math.floor(Math.random() * 256);const b = Math.floor(Math.random() * 256);return `rgb(${r}, ${g}, ${b})`;}2.预定义颜色数组随机选取：const colors = ["red", "green", "blue", "black"];const index = Math.floor(Math.random() * colors.length);console.log(colors[index]); // 随机输出数组中的颜色案例：猜数字小游戏逻辑：生成 1-10 的随机数，用户猜三次，提示 “大了” 或 “小了”。const random = getRandom(1, 10);let attempts = 0;while (attempts < 3) {  const num = parseInt(prompt("猜一个1-10的数字"));  attempts++;  if (num > random) {    alert("猜大了！");  } elseif (num < random) {    alert("猜小了！");  } else {    alert("猜对了！");    break; // 猜对即退出循环  }}if (attempts === 3) {  alert(`次数用尽！正确答案是${random}`);}1.3Date 对象

功能：处理日期和时间，需通过new Date()实例化。构造函数形式：new Date()：获取当前时间。new Date("2023-10-01")：根据字符串创建日期。new Date(year, month, day)：指定年（四位数）、月（0-11）、日。常用方法：方法说明示例getFullYear()获取年份new Date().getFullYear(); // 2025getMonth()获取月份（0-11）new Date("2023-10-01").getMonth(); // 9（10月对应9）getDate()获取日期（1-31）new Date().getDate(); // 当前日getDay()获取星期（0-6，0 为周日）new Date().getDay(); // 1（周一）getTime()获取总毫秒数（1970 年至今）const ms = new Date().getTime();总毫秒数的用途：计算时间差、倒计时等。const start = new Date().getTime();// 执行某操作const end = new Date().getTime();const duration = end - start; // 耗时（毫秒）1.4Array 对象

数组判断：instanceof：判断是否为Array实例。const arr = [1, 2, 3];console.log(arr instanceof Array); // trueArray.isArray()：更准确的数组判断（推荐）。Array.isArray([]); // trueArray.isArray({}); // false添加 / 删除元素：方法作用是否修改原数组返回值push()末尾添加元素是新数组长度pop()末尾删除元素是删除的元素unshift()开头添加元素是新数组长度shift()末尾删除元素是删除的元素数组排序：reverse()：颠倒数组顺序。const arr = [1, 3, 2];arr.reverse(); // [2, 3, 1]sort()：排序，需传入比较函数。const arr = [3, 1, 2];arr.sort((a, b) => a - b); // 升序 [1, 2, 3]arr.sort((a, b) => b - a); // 降序 [3, 2, 1]数组转字符串：toString()：用逗号连接元素。[1, 2, 3].toString(); // "1,2,3"join(分隔符)：自定义分隔符。[1, 2, 3].join(" - "); // "1 - 2 - 3"索引方法：indexOf(元素[, 起始位置])：查找出现的索引，不存在返回-1。const arr = ["a", "b", "a"];arr.indexOf("a"); // 0arr.indexOf("a", 1); // 2（从索引1开始找）lastIndexOf()：从后往前查找最后一次出现的索引。清空数组：const arr = [1, 2, 3];arr = []; // 推荐，简单直接// 或 arr.length = 0;// 或 arr.splice(0, arr.length);其他方法：concat()：合并数组，返回新数组。[1, 2].concat([3, 4]); // [1, 2, 3, 4]slice(start[, end])：截取数组（含 start，不含 end），返回新数组。[1, 2, 3, 4].slice(1, 3); // [2, 3]splice(start, 删除数量[, 插入元素])：删除 / 插入元素，修改原数组。const arr = [1, 2, 3];arr.splice(1, 1); // 删除索引1的元素，arr变为[1, 3]1.5String 对象

字符串的不可变性：字符串的值不可修改，重新赋值会开辟新内存空间。let str = "abc";str = "def"; // 原"abc"仍在内存中，str指向新地址根据字符找位置：indexOf(字符[, 起始位置])：返回出现的索引。"hello".indexOf("l"); // 2lastIndexOf()：返回最后一次出现的索引。根据位置找字符：charAt(index)：返回指定索引的字符。"code".charAt(1); // "o"等价于数组索引访问："code"[1] // "o"。字符串操作方法：方法作用示例concat(str)拼接字符串"a".concat("b", "c"); // "abc"substr(start, length)从 start 开始截取 length 长度"hello".substr(1, 3); // "ell"slice(start, end)从 start 截取到 end（不含 end）"hello".slice(1, 4); // "ell"substring(start, end)同 slice，但不支持负数索引"hello".substring(1, 4); // "ell"替换方法：replace(旧字符, 新字符)：替换出现的字符。"abca".replace("a", "x"); // "xbca"（仅第*个a被替换）分割方法：split(分隔符)：将字符串转为数组。"a,b,c".split(","); // ["a", "b", "c"]二数据类型存储方式

CodingFuture

2.1数据类型分类

1.简单数据类型（基本类型）：存储值本身。包括：string、number、boolean、undefined、null。2.复杂数据类型（引用类型）：存储地址引用。包括：Object、Array、Function、Date等。2.2堆栈存储机制

1.栈内存：存储简单数据类型的值，由系统自动分配和释放。特点：访问快，空间小，数据直接存储。2.堆内存：存储复杂数据类型的对象，需手动分配内存。特点：访问慢，空间大，存储对象的键值对。示例：// 简单数据类型（栈存储）let a = 10;let b = a; // 复制值，a和b独立a = 20;console.log(b); // 10（b不受影响）// 复杂数据类型（堆存储）const arr1 = [1, 2, 3];const arr2 = arr1; // 复制地址，arr1和arr2指向同一堆内存arr1[0] = 10;console.log(arr2[0]); // 10（修改堆内存，两者同步变化）2.3简单数据类型传参（值传递）

函数接收的是原始值的副本，函数内修改不影响外部变量。function changeNum(n){  n = 20; // 修改副本}let num = 10;changeNum(num);console.log(num); // 10（原始值不变）2.4复杂数据类型传参（引用传递）

函数接收的是对象地址的副本，修改会影响原始对象（因指向同一堆内存）。function changeName(obj){  obj.name = "李四"; // 修改堆内存中的值}const person = { name: "张三" };changeName(person);console.log(person.name); // 李四（原始对象被修改）

结言陈词Closing statement至此，我们完成了内置对象与数据存储的核心知识学习。从 Math 的随机数生成到 Array 的数组操作，从字符串的不可变性到堆栈内存的工作原理，每一个知识点都紧密关联实际开发场景。建议通过反复练习猜数字游戏、数组排序等案例巩固技能，并养成查阅 MDN 文档的习惯。记住，扎实的基础是进阶全栈开发的关键，期待你在实践中进一步深化理解，开启 JS 编程的更多可能！下期课程预告：JavaScript基础-DOM（上）码上未来为同学们安排统一答疑扫码添加微信领取详细课程大纲

微信号:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨询
夏老师 @大连码上未来IT培训

资深职业咨询规划师

微信号：155******12

立即咨询

“大连码上未来IT培训”是码上未来科技(大连)有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：5.0师资：5.0服务：5.0效果：5.0

公示信息

店铺名称：大连码上未来IT培训

单位名称：码上未来科技(大连)有限公司

账号名称：mswl（158******92）

所属城市：辽宁大连

入驻时长：6年

在线客服：在线聊

相关课程

微信咨询

返回顶部