📚 JS 常用 API 速查手册

'Hello World'.includes('World') // true 'Hello World'.includes('world') // false（区分大小写） 'a-b-c'.includes('-', 2) // true（从索引2开始找）

'a,b,c'.split(',') // ['a','b','c'] 'a-b-c'.split('-', 2) // ['a','b']（只切2段） '2024-01-15'.split('-') // ['2024','01','15'] 'abc'.split('') // ['a','b','c']（空串→逐字符） '1 2 3'.split(/\s+/) // ['1','2','3']（正则切空格）

'Hello'.slice(1, 3) // 'el'（索引1到3，不含3） 'Hello'.slice(-2) // 'lo'（后2个字符） 'file.txt'.slice(-4) // '.txt'（取后缀） 'Hello'.slice(1, -1) // 'ell'（去掉首尾）

// 基础：只替换第一个匹配 'a-b-c'.replace('-', '+') // 'a+b-c'（只换第一个） // 全局替换：用 /g 正则 或 replaceAll 'a-b-c'.replace(/-/g, '+') // 'a+b+c' 'a-b-c'.replaceAll('-', '+') // 'a+b+c'（ES2021，更直观） // 函数替换（高级用法，常考） 'a1b2c3'.replace(/\d/g, m => `[${m}]`) // 'a[1]b[2]c[3]' // 模板渲染（捕获组 $1） '2024-01-15'.replace(/(\d+)-(\d+)-(\d+)/, '$3/$2/$1') // '15/01/2024'（日期格式转换）

// match + /g：返回所有匹配的字符串 'a1b2c3'.match(/\d/g) // ['1','2','3'] // match 无 /g：返回第一个匹配 + 捕获组详情 '2024-01'.match(/(\d+)-(\d+)/) // ['2024-01', '2024', '01', index:0, input:'2024-01', groups:undefined] // matchAll：返回所有匹配 + 捕获组（ES2020） [...'a1b2c3'.matchAll(/([a-z])(\d)/g)] // [['a1','a','1'], ['b2','b','2'], ['c3','c','3']]

'1'.padStart(2, '0') // '01'（日期补零） '5'.padStart(3, '0') // '005' 'abc'.padEnd(6, '*') // 'abc***' String(5).padStart(4, '0') // '0005'（序号补零） // 实战：倒计时显示 00:05 const fmtTime = s => `${Math.floor(s/60)}:${String(s%60).padStart(2,'0')}'`

' hello '.trim() // 'hello' ' hello '.trimStart() // 'hello ' ' hello '.trimEnd() // ' hello' // 也去掉换行符、tab '\n\t hello \n'.trim() // 'hello'

'https://a.com'.startsWith('https') // true 'photo.jpg'.endsWith('.jpg') // true 'isAdmin'.startsWith('is') // true（变量名判断）

'a-b-c'.indexOf('-') // 1（第一个 - 的位置） 'a-b-c'.lastIndexOf('-') // 3（最后一个 - 的位置） 'abc'.indexOf('z') // -1（不存在） // 判断包含：indexOf >= 0 是 includes 的老写法

const name = 'Tom', age = 18 // 变量插值 ${} const msg = `姓名：${name}，年龄：${age}` // '姓名：Tom，年龄：18' // 多行字符串（不用 \n） const html = `<div> <p>${name}</p> </div>` // 嵌套表达式 const status = age >= 18 ? '成年' : '未成年' const desc = `${name} 是${status}` // 标签模板（高级，常考） function tag(strings, ...values) { return strings.reduce((acc, s, i) => acc + s + (values[i] || ''), '') } tag`Hello ${name}!` // 'Hello Tom!'

const nums = [1, 2, 3] // 每个元素 ×2 nums.map(n => n * 2) // [2, 4, 6] // 提取对象字段（最常用！） const users = [{id:1,name:'Tom'}, {id:2,name:'Jerry'}] users.map(u => u.name) // ['Tom', 'Jerry'] users.map(u => u.id) // [1, 2] // 转换结构（VO → DTO） users.map(u => ({ label: u.name, value: u.id })) // [{label:'Tom',value:1}, {label:'Jerry',value:2}]（下拉框数据） // 带索引 nums.map((n, i) => `第${i}个:${n}`) // ['第0个:1', '第1个:2', '第2个:3']

const nums = [1, 2, 3, 4] nums.filter(n => n > 2) // [3, 4] // 筛选上架商品 products.filter(p => p.status === '上架') // 多条件筛选（搜索 + 分类） products.filter(p => p.name.includes(keyword) && p.category === selectedCategory ) // 删除某项（按 id） list.filter(item => item.id !== removeId) // 去除 falsy 值（0、null、''、false 都去掉） [0, 'a', null, 'b', ''].filter(Boolean) // ['a','b']

const nums = [1, 2, 3, 4] // 求和 nums.reduce((sum, n) => sum + n, 0) // 10 // 购物车总价（最常见场景） cart.reduce((total, item) => total + item.price * item.qty, 0) // 数组转对象（以 id 为 key，业务高频） users.reduce((map, u) => (map[u.id] = u, map), {}) // { '1':{id:1,...}, '2':{id:2,...} } // 分组（按字段） users.reduce((groups, u) => { (groups[u.dept] ||= []).push(u) return groups }, {}) // { '技术':[{...}], '产品':[{...}] } // 找最大值 nums.reduce((max, n) => Math.max(max, n)) // 4 // 扁平化 [[1,2],[3,4]].reduce((acc, arr) => acc.concat(arr), []) // [1,2,3,4]

const users = [{id:1,name:'Tom'}, {id:2,name:'Jerry'}] // 找元素 users.find(u => u.id === 2) // {id:2, name:'Jerry'} users.find(u => u.id === 99) // undefined（不存在） // 找索引 users.findIndex(u => u.id === 2) // 1 users.findIndex(u => u.id === 99) // -1 // findLast（ES2023，从后往前找） [1,2,3,2,1].findLast(n => n === 2) // 2（找最后一个2）

const users = [{role:'admin'}, {role:'user'}] // some：有没有管理员？ users.some(u => u.role === 'admin') // true // every：是不是都是管理员？ users.every(u => u.role === 'admin') // false // 表单校验：所有字段都填了 const fields = [name, email, phone] fields.every(f => f.trim() !== '') // 全部非空才 true // 空数组特例 [].some(fn) // false（没元素满足） [].every(fn) // true（⚠️ 没元素不满足！空数组 every 返回 true）

const users = [{id:1,name:'Tom'}, {id:2,name:'Jerry'}] // 只是遍历打印 users.forEach(u => console.log(u.name)) // 批量操作 DOM document.querySelectorAll('.item').forEach(el => { el.style.color = 'red' }) // ❌ 错误用法：想用结果却用 forEach const names = users.forEach(u => u.name) // undefined！应该用 map

// 降一层（默认） [1, [2, [3]]].flat() // [1, 2, [3]] // ↑ 外层方括号拆掉，但里面的 [3] 还在 // 降两层 [1, [2, [3]]].flat(2) // [1, 2, 3] // 压到底（不知道有几层就 Infinity） [1, [2, [3, [4]]]].flat(Infinity) // [1, 2, 3, 4] // 附带能力：去除空位（稀疏数组补齐） [1, , 3].flat() // [1, 3]（中间的空 slot 被清掉）

// 📌 先看最基础的区别 // map：每个元素返回一个数组 → 得到"数组的数组" [1, 2, 3].map(n => [n, n * 10]) // [[1,10], [2,20], [3,30]] ← 二维数组，没拍平 // flatMap：map 完自动拆掉一层 → 得到一维数组 [1, 2, 3].flatMap(n => [n, n * 10]) // [1, 10, 2, 20, 3, 30] ← 一维！这就是 flatMap 的全部魔力 // ⚠️ 限制：只拍一层。返回嵌套数组时，里层还在 [1, 2].flatMap(n => [[n, n*10]]) // [[1,10], [2,20]] ← 还剩一层没拍掉（要 Infinity 用 flat）

━━━ 例1：提取每篇文章的标签（一对一变多对多）━━━ const articles = [ { title: 'Vue', tags: ['前端', '框架'] }, { title: 'Redis', tags: ['后端', '缓存'] }, { title: 'MySQL', tags: ['后端', '数据库'] } ] // ❌ 用 map：得到 [['前端','框架'], ['后端','缓存'], ['后端','数据库']] articles.map(a => a.tags) // ✅ 用 flatMap：自动拍平 → ['前端','框架','后端','缓存','后端','数据库'] const allTags = articles.flatMap(a => a.tags) // 配合 Set 统计不重复标签 [...new Set(allTags)] // ['前端','框架','后端','缓存','数据库'] ━━━ 例2：给每个数字生成"原值+翻倍"两组数据（一对多展开）━━━ [1, 2, 3].flatMap(n => [n, n * 2]) // [1,2, 2,4, 3,6] // 场景：时间轴上每个时段要拆成"开始/结束"两条记录 ━━━ 例3：flatMap 同时做"过滤 + 转换"（比 filter+map 链式更省一次遍历）━━━ // 需求：从 [1,2,3,4] 中保留偶数，并都 ×10 [1, 2, 3, 4].flatMap(n => n % 2 === 0 ? [n * 10] : [] // 不要的返回空数组，自动被拍掉 ) // [20, 40] // 妙处：返回 [] 就等于"过滤掉"，返回 [x] 就等于"保留"，返回 [x,y] 就"展开" ━━━ 例4：把句子拆成单词（一句话 → 多个词）━━━ ['hello world', 'foo bar'].flatMap(s => s.split(' ')) // ['hello','world','foo','bar'] // 对比 map：[['hello','world'], ['foo','bar']]，还要再 flat 一次 ━━━ 例5：把订单里的每个商品"摊开"成独立行（订单聚合 → 明细列表）━━━ const orders = [ { id: 1, items: [{name:'书',qty:2}, {name:'笔',qty:3}] }, { id: 2, items: [{name:'本',qty:1}] } ] orders.flatMap(o => o.items.map(it => ({ orderId: o.id, ...it }))) // [{orderId:1,name:'书',qty:2}, {orderId:1,name:'笔',qty:3}, {orderId:2,name:'本',qty:1}] // 一个订单一行 → 变成每个商品一行，还带上了 orderId

━━━ ✅ 方向一：树 → 扁平列表，flatMap 完美胜任 ━━━ const tree = [ { id: 1, name: '总部', children: [ { id: 2, name: '技术部', children: [ { id: 3, name: '前端组', children: [] } ]} ]} ] // 递归 + flatMap：把当前层 + 所有子层 摊到一个数组里 function treeToFlat(nodes) { return nodes.flatMap(node => [ { id: node.id, name: node.name }, ...treeToFlat(node.children || []) // 递归处理子节点，再展开 ]) } treeToFlat(tree) // [{id:1,name:'总部'}, {id:2,name:'技术部'}, {id:3,name:'前端组'}] // 原理：flatMap 把"自己 + 子树递归结果"自动拍平，比 reduce 写法更直观 ━━━ ❌ 方向二：扁平列表 → 树，flatMap 帮不上忙 ━━━ // 输入：[{id:1,pid:null}, {id:2,pid:1}, {id:3,pid:2}] // 目标：{id:1, children:[{id:2, children:[{id:3}]}]} // 这是"根据 pid 找爸爸再挂上去"，是聚合不是展开，flatMap 没用武之地 // 正确做法：用 Map 建索引（O(n)，前端建树的标准答案） function listToTree(list) { const map = {}, tree = [] list.forEach(item => map[item.id] = { ...item, children: [] }) list.forEach(item => { const node = map[item.id] if (item.pid) map[item.pid].children.push(node) // 挂到爸爸下面 else tree.push(node) // 没爸爸 → 顶层 }) return tree }

// 类数组转真数组 Array.from(document.querySelectorAll('div')) // NodeList → 真数组 Array.from(new Set([1,2,2])) // Set → 数组 // 第二参数：map 函数（边转边处理） Array.from('123', Number) // [1, 2, 3]（字符串转数字数组） Array.from({length:5}, (_, i) => i) // [0,1,2,3,4]（生成序列！） // Array.of：弥补 Array() 的坑 Array.of(3) // [3] Array(3) // [empty × 3]（⚠️ 这是长度3的空数组！） Array.of(1, 2, 3) // [1, 2, 3]

// 🔥 默认按字符串排序（大坑！） [10, 2, 1, 21].sort() // [1, 10, 2, 21] —— 不是数字序！ // 数字升序 [10, 2, 1].sort((a, b) => a - b) // [1, 2, 10] // 数字降序 [10, 2, 1].sort((a, b) => b - a) // [10, 2, 1] // 对象按字段排序 users.sort((a, b) => new Date(a.createTime) - new Date(b.createTime)) // 多字段排序（先按 status，相同再按 time） orders.sort((a, b) => { if (a.status !== b.status) return a.status - b.status return new Date(b.time) - new Date(a.time) }) // 中文按拼音排序 ['北京', '上海', '广州'].sort(new Intl.Collator('zh-CN').compare)

// slice：截取，不改原数组（和字符串 slice 一样） [1, 2, 3, 4].slice(1, 3) // [2, 3] [1, 2, 3, 4].slice(-2) // [3, 4] [1, 2, 3].slice() // 浅拷贝（slice 不带参数 = 浅拷贝） // splice：增删改，修改原数组 const arr = [1, 2, 3, 4, 5] arr.splice(1, 2) // 删除：从索引1删2个 → [2,3]，arr 变 [1,4,5] arr.splice(1, 0, 'a', 'b') // 插入：在索引1前插入 → arr 变 [1,'a','b',4,5] arr.splice(1, 1, 'X') // 替换：删1个插1个 → arr 变 [1,'X','b',4,5] // concat：拼接 [1, 2].concat([3, 4]) // [1,2,3,4] [1, 2].concat(3, [4]) // [1,2,3,4]（参数会被扁平化一层） // 现代写法：用扩展运算符 [...a, ...b]

// 数组复制（浅拷贝） const copy = [...arr] // 数组合并 const merged = [...arr1, ...arr2] // 数组去重 [...new Set([1, 2, 2, 3])] // [1, 2, 3] // 把数组展开成函数参数 Math.max(...[1, 5, 3]) // 等价 Math.max(1, 5, 3) → 5 // 把 NodeList 转 数组 [...document.querySelectorAll('div')] // 解构赋值配合 const [first, ...rest] = [1, 2, 3, 4] // first=1, rest=[2,3,4]

const user = { name: 'Tom', age: 18, city: '北京' } Object.keys(user) // ['name', 'age', 'city'] Object.values(user) // ['Tom', 18, '北京'] Object.entries(user) // [['name','Tom'], ['age',18], ['city','北京']] // 遍历对象（最常用） Object.entries(user).forEach(([key, value]) => { console.log(key, value) }) // 统计属性数量 Object.keys(user).length // 3 // 判断对象是否为空 Object.keys(user).length === 0 // false

const defaults = { api: '/api', timeout: 5000 } const userConfig = { timeout: 10000 } // 合并到新对象（浅拷贝） Object.assign({}, defaults, userConfig) // { api:'/api', timeout:10000 }（后者覆盖前者） // 合并到现有对象（修改 target） const obj = { a: 1 } Object.assign(obj, { b: 2 }, { c: 3 }) // obj 变成 {a:1, b:2, c:3} // 扩展运算符等价写法（推荐） { ...defaults, ...userConfig } // 合并多个对象 Object.assign({}, obj1, obj2, obj3) // 后者覆盖前者