前端面试必备：JavaScript内置函数与边界行为全解析

前端开发这个工作干久了你会发现真正拉差距的往往不是谁更会背框架 API而是对原生 JavaScript 内置函数的熟悉程度。像 map、filter、JSON.parse 这种高频 API 大家每天都在用可一旦面试官问起“字符串怎么截取最稳”“怎么判断一个变量是不是 NaN”“不借助 lodash 怎么深拷贝”很多写了两三年业务代码的同学都会突然卡壳。这篇文章就是一次标准意义的“查漏补缺”。我会把前端开发中常用但容易被忽略的 JS 内置函数重新过一遍重点放在那些隐藏在第二参数、边界行为、替代 API 里面的细节。整理它的核心价值在于很多函数大家不是不知道而是缺少一个系统视角告诉你“在哪种场景下该想起它”。如果你正在准备前端开发面试或者想把业务代码里一堆手写工具函数替换成原生 API这份清单应该能帮到你。1. 字符串内置函数别只会 split 和 replace1.1 容易被忽视的第二个参数字符串函数里最容易被忽视的其实是“第二参数”。比如split绝大多数人只用过第一个分隔符参数完全不知道它还能传第二个参数控制返回数组的长度const str a,b,c,d str.split(,, 2) // [a, b]这个 limit 参数在清洗接口返回的 CSV、处理日志字符串时特别好用能直接省掉后续的一次 slice。同样容易被漏掉的还有indexOf和lastIndexOf的第二个参数 fromIndex它决定了从哪个位置开始找。写“跳过第一个匹配、找第二个匹配”这类逻辑时没有这个参数就得手动维护下标有了它一行就能搞定const str hello hello world str.indexOf(hello) // 0 str.indexOf(hello, 1) // 6, 从下标 1 继续找真正的高频考点是字符串截取三兄弟substring、substr、slice。我做面试评审时几乎每次都问这道题能完全说清区别的人不超过一半。很多人写着写着就混了尤其是不小心把起点和终点写反时不同函数的行为差异会让你措手不及。const str hello world str.substring(0, 5) // hello, 但 substring(5, 0) 也会返回 hello因为它会自动交换参数 str.substr(0, 5) // hello, 注意第二个参数是“长度”该方法已废弃 str.slice(0, 5) // hello, 推荐参数不交换 str.slice(-5) // world, 支持负索引我之前维护过一个老项目代码里全是 substr后来在 Node 升级后看到一堆 deprecation warning那感觉真的酸爽。一句话总结截取字符串一律用 slice不要用 substring更不要用 substr。slice 支持负索引参数传反了会直接返回空字符串而不是悄悄帮你交换这种显式失败比隐式容错更有利于排查问题。关于“字符串是否包含某个子串”的经典需求includes、startsWith、endsWith这三个 ES6 函数比indexOf -1的写法语义清晰得多javascript.includes(script) // true javascript.startsWith(java) // true javascript.endsWith(script) // true需要注意includes 区分大小写。如果你想忽略大小写常规做法是先把两边都 toLowerCase 再判断这是最简单的方案性能也能接受。1.2 字符编码相关的坑从 fromCharCode 到 codePointAt这一节是很多前端开发者的知识盲区。JavaScript 的字符串是 UTF-16 编码早期很多字符串函数都是基于 16 位码元设计的遇到 emoji 这类超出基本多语言平面BMP的字符就会出现意外结果。最典型的是String.fromCharCode和charCodeAt。String.fromCharCode(0x1F600)并不能返回 这个表情只会返回一个乱码字符因为 0x1F600 超出了 16 位范围函数只能取到低位。正确做法是用 ES6 新增的String.fromCodePoint和codePointAtString.fromCodePoint(0x1F600) // .codePointAt(0) // 128512, 也就是 0x1F600字符串遍历也建议用for...of或者展开运算符因为它们按码点迭代而不是按码元for (const ch of ab) { console.log(ch) // 依次输出 a、、b }这也是为什么你只写一行str.split().reverse().join()去做字符串反转时碰到 emoji 全乱了。另一个经常被忽略的函数是normalize。它解决的是 Unicode 里“同一个字符有两种表示方式”的问题。比如 é 既可以直接用 U00E9 表示也可以写成 e 加上组合重音符号 U0301。在搜索、排序、做唯一性校验之前最好先 normalizeconst s1 \u00E9 // é const s2 e\u0301 // e 重音符号 s1 s2 // false s1.normalize(NFC) s2.normalize(NFC) // true我做过一个多语言内容管理系统用户输入法语、德语带重音的词搜索时经常匹配不上最后就是靠 normalize 统一的。1.3 补全、重复与本地化排序padStart和padEnd是 ES2017 带来的函数日常开发里出镜率不低但很多人不知道它们能优雅地解决补位问题。最常见的是时间格式化补零、银行卡号脱敏、序号统一宽度const hour 9 String(hour).padStart(2, 0) // 09 13812345678.slice(-4).padStart(11, *) // *******5678repeat的用途比想象中广。画控制台分隔线、生成缩进字符串、做简单表格对齐效果都不错-.repeat(30) .repeat(4) 标题replace 函数有两个容易漏的细节第二个参数可以是函数这让你在动态替换场景下不用先查再拼字符串ES2021 新增的replaceAll则解决了“字符串形式只能替换第一处”的尴尬2024-01-01.replace(-, /) // 2024/01-01, 只替换第一个 2024-01-01.replaceAll(-, /) // 2024/01/01, 全部替换注意 replaceAll 的正则必须带全局标志 g否则会直接抛 TypeError这也是很多人踩过的坑。最后必须说localeCompare。如果没有它中文排序会非常痛苦因为默认的 sort 是按 Unicode 码点排序的不是你期望的拼音序[张三, 李四, 王五].sort() // 默认按码点结果不一定合适 [张三, 李四, 王五].sort((a, b) a.localeCompare(b, zh-Hans-CN))如果是大量数据的排序建议直接用Intl.Collator性能更好const collator new Intl.Collator(zh-Hans-CN) list.sort(collator.compare)这个方案在省市区列表、通讯录按姓名排序时都很稳我实测比手写拼音字典方案靠谱得多。2. 数组内置函数能用原生实现就不要手写循环2.1 创建数组的隐藏技巧Array.from 和 Array.of很多开发者创建数组只会字面量和 new Array但Array.from和Array.of是两个被严重低估的函数。Array.from的核心能力是“把类数组和可迭代对象转成真正的数组”。arguments、NodeList、Set、Map、字符串都能直接转const domList document.querySelectorAll(div) Array.from(domList) // 真正的数组可以用 map/filter 了 Array.from(new Set([1, 2, 2])) // [1, 2]它最巧妙的地方在于还能接受一个 mapFn 参数专门用来生成序列Array.from({ length: 5 }, (_, i) i) // [0, 1, 2, 3, 4] Array.from({ length: 5 }, (_, i) item-${i 1})这个“生成 0 到 n-1 数组”的能力写测试用例、生成 mock 数据、做分页组件时非常好用比我以前写的Array.from(Array(n).keys())直观多了。Array.of解决的是new Array的经典歧义new Array(3)创建的是长度为 3 的空数组而new Array(3, 4)创建的是[3, 4]。这种“一个参数两种语义”的设计让很多人踩过坑。Array.of统一了行为Array.of(3) // [3] Array.of(3, 4) // [3, 4]还有一个必须要高度警惕的坑new Array(3).fill({})。很多人以为这样会得到三个独立对象实际上 fill 填充的是同一个引用改一个全变。正确做法是用 Array.from 配合箭头函数new Array(3).fill({}) // 三个元素指向同一个对象 Array.from({ length: 3 }, () ({})) // 三个独立对象这个问题在初始化二维数组时尤其致命我见过一个表格组件因为用了 fill 填二维数组导致改一行数据整列都跟着变排查了一天。2.2 查找元素的新姿势at、findLast 和 includes取数组最后一个元素以前必须写arr[arr.length - 1]现在可以用atconst arr [1, 2, 3] arr.at(-1) // 3 arr.at(-2) // 2at 支持负索引源码里很多“取最近一条记录”的场景用它直接少写好几个字符。字符串也有 at 方法同样支持负索引。findLast和findLastIndex是 ES2023 新增的从数组尾部往前找第一个满足条件的元素。以前要找“最近一条满足条件的记录”得先 reverse 再找或者手动遍历。现在原生支持const logs [ { level: info, msg: start }, { level: error, msg: first error }, { level: info, msg: doing }, { level: error, msg: second error } ] logs.findLast(item item.level error) // { level: error, msg: second error }includes和indexOf的区别是个容易被忽略的细节。数组的 includes 能正确判断 NaN而 indexOf 因为内部使用严格相等判断永远找不到 NaNconst arr [1, NaN, 2] arr.indexOf(NaN) // -1 arr.includes(NaN) // true这背后的原因是 NaN 不等于它自身includes 内部用的是 SameValueZero 算法专门处理了这个问题。2.3 flat、flatMap 和 reduce批量处理的效率担当数组展平在真实的接口数据处理里太常见了。flat和flatMap就是为此设计的const nested [[1, 2], [3, [4, 5]]] nested.flat() // [1, 2, 3, [4, 5]], 默认只展平一层 nested.flat(2) // [1, 2, 3, 4, 5] nested.flat(Infinity) // 不管嵌套多深都能展平flatMap相当于 map 之后紧接 flat(1)但它只遍历一次性能更好。适合处理“一个元素映射出多个元素”的场景const words [hello world, hi js] words.flatMap(str str.split( )) // [hello, world, hi, js]reduce是另一个被严重低估的武器。不要只拿它求和它能把数组转对象、做分组统计、把扁平数组转树形结构。我最常用的场景是数组转 Map 和分组const users [ { id: 1, name: 张三 }, { id: 2, name: 李四 } ] const userMap users.reduce((acc, user) { acc[user.id] user return acc }, {}) // { 1: { id: 1, name: 张三 }, 2: { id: 2, name: 李四 } }reduce 的第二个参数 initialValue 一定要养成习惯写上否则空数组会直接抛 TypeError。copyWithin是更冷门但很实用的函数它能在数组内部复制一段元素到另一个位置不改变数组长度。适合做滑动窗口、循环缓冲区等场景。平时用得不多但面试或写算法题时遇到“数组内原地移动元素”会有奇效。3. 对象与类型判断别再手写 isObject 了3.1 Object.entries、fromEntries 和 Object.hasOwnObject.entries、Object.values、Object.fromEntries这三个组合拳非常强大。条目们可以把对象转成二维数组fromEntries 则把二维数组转回对象。它们配合 map、filter 可以做到“过滤对象属性”这种以前必须手写循环的操作const user { name: 张三, age: 20, email: , phone: } const cleaned Object.fromEntries( Object.entries(user).filter(([_, v]) v ! ) ) // { name: 张三, age: 20 }Object.fromEntries也常用于把 Map 转成普通对象const map new Map([[a, 1], [b, 2]]) Object.fromEntries(map) // { a: 1, b: 2 }这个函数对普通开发者来说算比较新但写配置表、URL query 互转时非常顺手。Object.hasOwn是 ES2022 出的新函数用来替代老的hasOwnProperty写法。它的优势很明显不会因为对象的 hasOwnProperty 被覆盖而出问题也兼容 Object.create(null) 创建出的无原型对象const obj Object.create(null) obj.name test // obj.hasOwnProperty(name) // 这里直接 TypeError Object.hasOwn(obj, name) // true, 完美3.2 类型判断的“严格版”Number.isNaN 与 isNaN 的差别很多同学在判断 NaN 时直接用 isNaN实际上全局isNaN和Number.isNaN的行为完全不同。全局 isNaN 会先把参数转成数字再判断所以它会把很多非数字值误判成 NaNisNaN(abc) // true, 因为 Number(abc) 结果是 NaN isNaN(123) // false, 因为 Number(123) 是 123 Number.isNaN(abc) // false, 没有做类型转换 Number.isNaN(NaN) // true判断 NaN 应该用 Number.isNaN它只对真正的 NaN 返回 true。同理全局isFinite和Number.isFinite也有类似区别用 Number.isFinite 判断“数值是否有限”更严谨。Number.isInteger也有个容易被问到的边界Number.isInteger(3.0)返回 true因为 3.0 在内存里就是 3这不算坑但面试里总有人答错。Math 对象里藏着不少好用的函数只是平时被 Math.floor、Math.random 盖过了风头。Math.trunc直接丢弃小数部分Math.sign返回数字的符号Math.hypot可以更安全地计算两点距离Math.trunc(-1.7) // -1, 注意和 Math.floor(-1.7) 的 -2 不一样 Math.sign(-8) // -1 Math.sign(0) // 0 Math.hypot(3, 4) // 5, 相当于 Math.sqrt(3*3 4*4)Math.hypot 的好处是内部会做数值范围处理不会因为中间值太大而溢出。比如计算两个距离很远的点坐标时手写 xx yy 可能超出安全整数范围hypot 则稳定得多。3.3 Object.freeze、seal 与原型相关函数对象保护三个函数很多人分不清Object.freeze是彻底冻结属性不能增删改Object.seal是密封属性不能增删但可以改已有值Object.preventExtensions只是禁止新增属性已有的可以删改。const obj1 Object.freeze({ a: 1 }) obj1.a 2 // 严格模式下直接报错 delete obj1.a // 也不行 const obj2 Object.seal({ a: 1 }) obj2.a 2 // 可以 delete obj2.a // 不行使用场景配置对象、静态枚举、状态常量用 freeze 可以防止别处代码误改。原型操作三个基础函数也得拎出来说一下Object.create创建指定原型的新对象Object.getPrototypeOf获取对象的原型Object.setPrototypeOf动态设置原型。setPrototypeOf 性能较差不建议在热路径里频繁调用尽量在创建对象时就用 Object.create 指定好原型。4. 全局函数与跨环境细节运行机制相关的隐藏 API4.1 encodeURIComponent 与 Base64 中文的经典坑URL 参数编码是每个前端都写过的事情。encodeURI和encodeURIComponent的区别在于encodeURI 不编码 ; , / ? : $ # 这些 URL 保留字符而 encodeURIComponent 几乎编码所有非字母数字字符。拼 query 参数时用 encodeURIComponent拼整个 URL 时用 encodeURIconst url https://example.com/search?q encodeURIComponent(前端 开发)更推荐直接用URLSearchParams它封装的更彻底还能直接序列化整个对象const params new URLSearchParams({ q: 前端 开发, page: 1 }) params.toString() // q%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91page1注意 URLSearchParams 对空格的编码结果是 而 encodeURIComponent 是 %20这两者在服务端解析时通常都能正确处理但如果要严格校验签名这个差异可能害你排查一下午。Base64 编码也有坑浏览器原生btoa和atob只支持 ASCII 字符直接对中文调用 btoa 会报错btoa(前端) // Uncaught DOMException解决方案是先做 UTF-8 编码再转 Base64。我整理过一个通用工具写法function utf8ToBase64(str) { return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p) String.fromCharCode(parseInt(p, 16)) )) } function base64ToUtf8(base64) { return decodeURIComponent( atob(base64).replace(/[\s\S]/g, (c) % c.charCodeAt(0).toString(16).padStart(2, 0) ) ) }现在也可以用 TextEncoder 方案function utf8ToBase64(str) { return btoa(String.fromCharCode(...new TextEncoder().encode(str))) }但注意展开运算符对超长字符串会有参数数量上限问题大数据量时用上面的循环替换方案更稳。4.2 queueMicrotask更精细的异步节奏控制JavaScript 的异步任务分为宏任务和微任务。微任务会在当前宏任务结束之后、浏览器渲染之前执行。以前注册微任务只能写Promise.resolve().then()现在可以用更直观的queueMicrotaskqueueMicrotask(() { // 这段代码会在当前脚本执行完、渲染前运行 })这个机制在“合并多次 DOM 更新”时很实用。比如你在循环里连续改一个 DOM 节点的内容直接写会触发多次重排用一个标志位加 queueMicrotask 合并成一次更新let pending false function scheduleUpdate(data) { cache.push(data) if (pending) return pending true queueMicrotask(() { render(cache) cache.length 0 pending false }) }批量更新逻辑很多框架内部也在用理解微任务能帮你排查很多渲染时序问题。微任务的优先级高于 setTimeout 这类宏任务所以“想尽快执行但不要在渲染前阻塞页面”这种需求queueMicrotask 是比 setTimeout 更精确的选择。4.3 structuredClone终于有原生深拷贝了以前提起深拷贝第一反应是JSON.parse(JSON.stringify(obj))但这个方案丢信息严重undefined、函数、Symbol 直接消失Date 变成字符串RegExp 变成空对象循环引用直接报错。structuredClone是浏览器和 Node 17 原生支持的深拷贝函数专门解决这些问题const original { list: [1, 2], date: new Date(), reg: /abc/gi } const clone structuredClone(original) // clone 是独立对象date 还是 Datereg 还是 RegExp它还能处理循环引用和 Map、Set、ArrayBuffer 这类复合结构。但它也不是万能的不能克隆函数、DOM 节点、Symbol 键会被丢弃遇到克隆不了的东西会抛 DataCloneError。所以它适合“纯数据对象”的深拷贝遇到 class 实例、函数方法还是要用序列化库。另一个跨环境差异是定时器返回值。浏览器里 setTimeout 返回的是数字 idNode.js 里返回的是一个 Timeout 对象。如果你写的是跨端工具库要小心这个类型差异打印日志时尤其容易看到奇怪的对象输出。好在 clearTimeout 对两种返回值都兼容所以只要不直接拿返回值做类型判断影响不大。5. 面试和自查3 个必考边界情况5.1 经典送命题map(parseInt)这个题面试出现频率极高因为考的是函数传参的底层理解[1, 2, 3].map(Number) // [1, 2, 3] [1, 2, 3].map(parseInt) // [1, NaN, NaN]为什么结果是 NaN因为 map 的回调会接收三个参数当前值、当前索引、原数组。parseInt 的签名是parseInt(string, radix)所以第二个参数被当成了进制数。parseInt(2, 1)进制 1 不合法返回 NaNparseInt(3, 2)二进制里没有数字 3也返回 NaN。写法是语言中数组、函数等高阶概念交织的地方理解了它基本就理顺了“回调参数传递”的机制。还有一个空数组边界[].every()返回 true[].some()返回 false。前者是“空集的全称命题为真”后者是“空集不存在满足条件的元素”。这个规则有人觉得反直觉但记住空数组 every 返回 true 就够了。5.2 sort 的默认行为字符串字典序排序是日常开发最常出错的地方之一。sort()如果不传比较函数会先把元素转成字符串再按 UTF-16 编码排序结果就是数字排序完全不对[10, 9, 8].sort() // [10, 8, 9]因为 10 在字符串比较中排在 8 前面 [10, 9, 8].sort((a, b) a - b) // [8, 9, 10]另外注意 sort 是原地排序会直接修改原数组。如果后续代码还要用原数组需要先[...arr].sort()或arr.slice().sort()。ES2019 之后 sort 是稳定排序同样排序 key 的元素能保持原来相对顺序这对多条件排序和分页很重要。5.3 速查表与自查清单下面把我工作中反复用到、最容易混淆的知识点整理成表。修改原数组的数组方法方法行为push / pop尾部增删shift / unshift头部增删splice插入、删除、替换sort原地排序reverse原地反转fill批量填充copyWithin内部复制不修改原数组的方法包括map、filter、slice、concat、at、flat、flatMap、reduce、find、findIndex、includes 等使用前先确认你是否依赖原数组不变。全局判断函数的对比错误写法正确写法区别isNaN(abc)Number.isNaN(abc)全局版会先转数字数字版不做转换isFinite(123)Number.isFinite(123)同上parseInt(08)Number(08) 或 parseInt(08, 10)老浏览器对 0 开头字符串可能有历史兼容问题建议显式传进制再送你一个自查思路遇到不确定边界行为的 API直接去 MDN 看它的 Polyfill 实现。比如你想知道某个数组方法对空槽是什么行为、某个字符串函数对负索引怎么处理把 Polyfill 代码读一遍就全清楚了。这比背规范文档高效得多也能帮你理解为什么各种框架源码里经常出现 map parseInt 这类微妙的组合。我自己的习惯是维护一个 snippets 文件平时在 MDN 上看到有意思的边界行为就复制一段最小示例进去标上“为什么”。面试前、重构前翻一遍确实比临时搜资料有效率得多。这个习惯坚持了几年前端开发的知识体系就是这么一点点补起来的。