一文吃透 JavaScript 内置对象｜JS 核心内置对象全解

JavaScript 分为三大组成部分ECMAScript核心语法、BOM、DOM。 而内置对象是 ECMAScript 提供的原生封装好的工具对象不需要我们手动创建类浏览器 / JS 引擎直接提供开箱即用内置大量属性、方法处理数字、字符串、数组、日期、正则等业务场景。很多前端开发者只会简单调用split()、push()但对以下核心问题一知半解面试极易丢分内置对象分为几大类引用类型与基本包装对象区别是什么String/Number/Boolean 包装对象底层原理自动装箱拆箱流程Math、Date、Array、RegExp 高频方法实战场景全局内置对象 JSON、Object 的底层特性内置对象常见踩坑、隐式转换 Bug、面试高频考题。本文系统性梳理 JS 全部常用内置对象分分类、附完整可运行代码、底层原理、业务场景、避坑指南、面试真题看完彻底搞定 JS 内置对象所有知识点兼顾开发实用性与面试深度。二、JS 内置对象整体分类JS 内置对象统一分为三大类清晰区分避免混淆2.1 基本包装类型原始值包装对象专门包装简单基本数据类型string/number/boolean原始值本身不是对象调用方法时 JS 自动临时包装成对象执行完立即销毁。 包含String、Number、Boolean2.2 单例内置对象无需 new直接调用静态方法全局唯一对象不需要实例化直接使用对象名调用属性 / 方法 包含Math、JSON、Globalwindow2.3 引用类型内置对象需要 new 实例化复杂数据类型存储在堆内存拥有实例方法可创建多个独立实例 包含Array、Date、RegExp、Object三、第一类基本包装对象String / Number / Boolean3.1 底层核心自动装箱与拆箱原始字符串let str abc本身是基础类型没有方法当执行str.length时引擎自动执行三步装箱临时创建new String(abc)包装对象调用对应属性 / 方法获取结果拆箱销毁临时包装对象回归原始值。代码验证javascript运行let str 前端开发; str.test 100; console.log(str.test); // undefined // 原因方法执行完临时包装对象立即销毁新增属性无法保存3.2 String 字符串内置对象开发最高频常用实例方法业务实战javascript运行let s Hello JavaScript; // 1. 获取字符 console.log(s.charAt(0)); // H console.log(s[0]); // H // 2. 截取字符串 slice/substr/substring console.log(s.slice(0,5)); // Hello // 3. 查找索引 console.log(s.indexOf(Java)); // 6 console.log(s.includes(JS)); // false // 4. 分割、替换、大小写转换 let arr s.split( ); // [Hello,JavaScript] let upper s.toUpperCase(); let replaceStr s.replace(JavaScript,Vue); // 5. 去除空格 let trimStr 前端 .trim();面试易错点slice支持负数索引substring负数自动置 0substr第二个参数代表长度ES 废弃不推荐。3.3 Number 数字内置对象用于数值格式化、精度处理、数值判断javascript运行let num 3.1415926; // 保留小数 console.log(num.toFixed(2)); // 3.14 注意返回字符串 // 极值静态属性 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); console.log(Number.isNaN(NaN)); // true console.log(Number.isInteger(12.0)); // true3.4 Boolean 布尔包装对象极少主动使用仅自动装箱时隐式创建不推荐手动 newjavascript运行let flag new Boolean(false); console.log(flag ? 真 : 假); // 输出真 // 坑所有对象在布尔判断中都为true哪怕包装false四、第二类单例全局内置对象Math / JSON / Global4.1 Math 数学对象静态方法无需 new无构造函数全部为静态属性与静态方法处理数学计算javascript运行// 常用属性 Math.PI // 圆周率 Math.E // 取整 Math.floor(3.9) // 向下取整3 Math.ceil(3.1) // 向上取整4 Math.round(3.5) // 四舍五入4 // 随机数 0 ~ 1 左闭右开 let random Math.random(); // 封装生成min-max随机整数 function getRandom(min,max){ return Math.floor(Math.random()*(max-min1)) min; } // 最值 Math.max(1,5,9); Math.min(2,7,1);实战场景抽奖随机数、分页计算、图表数值处理。4.2 JSON 对象数据序列化核心两大核心静态方法前后端数据交互必备JSON.stringify()对象转 JSON 字符串JSON.parse()JSON 字符串转回 JS 对象javascript运行let user {name:小明,age:18}; // 对象转字符串 let jsonStr JSON.stringify(user); // 字符串还原对象 let obj JSON.parse(jsonStr);高频坑点无法转换函数、undefined、SymbolDate 类型序列化后变为字符串还原不会自动变回 Date 对象循环引用对象会直接报错。4.3 Global 全局对象浏览器为 window全局所有内置函数都挂载在 Global 上parseInt、parseFloat、isNaN、eval浏览器中全局对象等价于windowNode 中为globalThis。五、第三类可实例化引用内置对象5.1 Array 数组内置对象开发高频数组是 JS 内置引用对象提供遍历、增删、过滤、映射全套 API1增删改查方法javascript运行let arr [1,2,3]; arr.push(4); // 尾部添加 arr.pop(); // 尾部删除 arr.unshift(0); // 头部添加 arr.shift(); // 头部删除 arr.splice(1,1,99); // 指定位置删除/插入2遍历转换高阶方法ES6 必备javascript运行let list [10,20,30]; // map映射返回新数组 let double list.map(item item*2); // filter过滤筛选 let filterArr list.filter(item item 15); // reduce累加、数组求和、转对象 let sum list.reduce((total,item) totalitem, 0); // forEach单纯遍历无返回值 list.forEach(itemconsole.log(item));3查询与去重javascript运行list.includes(20) list.find(itemitem20) list.findIndex(itemitem20) // 数组去重 let unique [...new Set(list)];5.2 Date 日期内置对象时间处理处理时间戳、格式化、倒计时、时区javascript运行// 当前时间 let now new Date(); // 指定时间戳创建 let target new Date(1788888888000); // 获取年月日时分秒 now.getFullYear(); now.getMonth(); // 0~11 0代表一月 now.getDate(); now.getHours(); // 时间戳两种获取方式 Date.now(); new Date(); // 简单格式化封装 function formatDate(){ let d new Date(); let y d.getFullYear(); let m d.getMonth()1; let day d.getDate(); return ${y}-${m}-${day}; }常见业务订单创建时间、倒计时、活动有效期判断。5.3 RegExp 正则内置对象两种创建方式匹配、替换、表单校验手机号 / 邮箱javascript运行// 字面量创建推荐 let reg /^\d{11}$/; // new实例创建 let reg2 new RegExp(^\\d{11}$); let phone 13800138000; console.log(reg.test(phone)); // true 校验手机号 // 全局替换 let str a1b2c3; let res str.replace(/\d/g,*);业务场景表单验证、敏感词过滤、字符串提取数字。5.4 Object 基础根内置对象所有引用类型顶层父类提供静态工具方法javascript运行let person {name:小红}; // 获取键、值、键值对 Object.keys(person); Object.values(person); Object.entries(person); // 对象合并 let newObj Object.assign({},person,{age:20}); // 判断是否自有属性 person.hasOwnProperty(name);六、内置对象核心底层区别基本类型 vs 包装对象表格对比维度原始基本值 (string/number)new String 包装对象存储位置栈内存堆内存typeof 检测string / numberobject新增属性无法持久保存可以自定义属性布尔判断/0/false 为假所有对象恒为 true使用推荐开发中全部使用原始值禁止手动 new 创建七、开发高频踩坑总结避坑必看Boolean 包装对象陷阱new Boolean (false) 在 if 判断中恒为 trueNumber.toFixed 返回字符串直接参与加减运算会出现拼接错误字符串方法不会修改原字符串全部返回新字符串Array 中 splice 修改原数组slice/map/filter 返回新数组JSON 序列化丢失函数、undefined、循环引用报错Date.getMonth 月份从 0 开始忘记 1 导致日期错误Math.random 取不到 1生成随机数注意区间边界自动装箱临时对象用完销毁不要给原始值添加自定义属性。八、全文总结JS 内置对象是引擎原生提供工具不用自行封装覆盖字符串、数字、数组、时间、正则、数学计算全场景基本包装对象存在自动装箱拆箱机制开发中尽量使用原始值避免手动 newMath、JSON 属于单例对象直接静态调用Array/Date/RegExp 需要 new 创建实例每种内置对象都有专属业务场景熟练掌握内置 API 可以大幅简化代码内置对象底层特性、隐式转换、边界坑是前端笔试面试高频考点开发时避开文中总结陷阱。