前端八股JS---数组方法

目录超简速查表一图记全部一、遍历 / 循环类1. forEach2. map3. filter4. reduce二、查找 / 判断类5. find6. findIndex7. includes8. some9. every三、增删改会改变原数组10. push11. pop12. unshift13. shift14. splice四、不改变原数组的常用15. slice16. concat17. join五、排序 / 反转改原数组18. sort19. reverse六、ES6 常用20. flat21. flatMap最容易混淆的两个点必看1️⃣ slice vs splice记一次就够2️⃣ map vs forEach一个高频易错提醒sort() 默认会按字符串排序超简速查表一图记全部想做什么用哪个方法是否返回新数组是否改变原数组遍历不返回值forEach❌ 无返回值❌ 通常不改加工每一项map✅❌筛选filter✅❌累加 / 汇总reduce✅看用法❌找第一个符合条件的元素find❌返回元素❌找第一个符合条件的下标findIndex❌返回下标❌判断有无某个值includes❌返回布尔❌是否至少一个满足some❌返回布尔❌是否全部满足every❌返回布尔❌末尾加push❌返回长度✅末尾删pop❌返回元素✅开头加unshift❌返回长度✅开头删shift❌返回元素✅任意位置删/插/替换splice✅返回删的✅截取一段slice✅❌拼接数组concat✅❌数组 → 字符串join✅返回字符串❌排序sort✅返回原数组✅反转reverse✅返回原数组✅拍平嵌套flat✅❌map 拍平一层flatMap✅❌方法分类总览分类方法特点遍历/转换map、forEach遍历数组查找find、findIndex、includes、indexOf查找元素/索引过滤filter筛选符合条件的项判断some、every返回布尔值归并reduce最强大、面试最爱扁平化flat拍平多维数组操作splice、concat、slice增删改查扩展扩展运算符(...)复制、合并一、遍历 / 循环类1. forEach遍历作用单纯循环没有返回值arr.forEach(item { console.log(item) }) // 场景只做遍历、执行操作如打印、DOM操作2. map映射作用遍历数组返回一个新数组长度不变const arr [1, 2, 3] const newArr arr.map(item item * 2) // [2, 4, 6] // 场景数据格式转换、列表渲染 const users [{ name: 张三 }, { name: 李四 }] const names users.map(user user.name) // [张三, 李四]3. filter过滤作用筛选符合条件的项返回新数组const arr [1, 2, 3, 4] const newArr arr.filter(item item 2) // [3, 4] // 场景搜索、筛选列表 const activeUsers users.filter(user user.isActive)4. reduce归并/累加器- 面试最爱作用求和、数组扁平化、去重、分组、统计次数// 语法 arr.reduce((累加器, 当前项, 索引, 原数组) { return 新累加器 }, 初始值)二、查找 / 判断类5. find查找作用找到第一个符合条件的元素返回该项找不到返回 undefinedconst arr [1, 2, 3] const res arr.find(item item 1) // 26. findIndex查找索引作用找到第一个符合条件的下标找不到返回 -1const arr [1, 2, 3] arr.findIndex(item item 2) // 1 arr.findIndex(item item 10) // -17. includes包含作用判断数组是否包含某值返回布尔const arr [1, 2, 3] arr.includes(2) // true arr.includes(10) // false8. some判断是否有满足作用只要有一个满足就返回 trueconst arr [1, 2, 3] arr.some(item item 2) // true arr.some(item item 10) // false9. every判断全部满足作用所有项都满足才返回 trueconst arr [1, 2, 3] arr.every(item item 0) // true arr.every(item item 2) // false三、增删改会改变原数组10. push末尾添加arr.push(4)11. pop删除最后一个arr.pop()12. unshift开头添加arr.unshift(0)13. shift删除第一个arr.shift()14. splice删除/插入/替换作用修改原数组const arr [1, 2, 3, 4] // 删除从下标1开始删除2个 arr.splice(1, 2) // [2, 3]原数组变成 [1, 4] // 插入从下标1开始删除0个插入新元素 arr.splice(1, 0, 5) // 原数组变成 [1, 5, 4] // 替换从下标1开始删除1个插入新元素 arr.splice(1, 1, 6) // 原数组变成 [1, 6, 4]15. 扩展运算符 ...作用复制、合并数组// 复制 const newArr [...oldArr] // 合并 const combined [...arr1, ...arr2] // 求最大值 const max Math.max(...[1, 2, 3]) // 3四、不改变原数组的常用15. slice截取一段[1,2,3,4].slice(1,3) // [2,3]16. concat拼接数组[1,2].concat([3,4]) // [1,2,3,4]17. join数组转字符串[1,2,3].join(-) // 1-2-3五、排序 / 反转改原数组18. sort排序[3,1,2].sort((a,b)a-b) // [1,2,3]19. reverse反转[1,2,3].reverse() // [3,2,1]六、ES6 常用20. flat扁平化作用拍平多维数组const arr [1, [2, [3]]] arr.flat(1) // [1, 2, [3]]只扁平一层 arr.flat(Infinity) // [1, 2, 3]完全扁平21. flatMapmap flat[1,2].flatMap(x[x,x1]) // [1,2,2,3]七、reduce 高频面试用法重点1. 数组求和最基础const arr [1, 2, 3, 4] const sum arr.reduce((acc, cur) acc cur, 0) console.log(sum) // 10 // 执行过程 // 第1次acc0, cur1 → 返回1 // 第2次acc1, cur2 → 返回3 // 第3次acc3, cur3 → 返回6 // 第4次acc6, cur4 → 返回102. 数组去重const arr [1, 2, 2, 3, 3, 3] const uniqueArr arr.reduce((acc, cur) { if (!acc.includes(cur)) { acc.push(cur) } return acc }, []) console.log(uniqueArr) // [1, 2, 3]3. 数组扁平化// 扁平一层 const arr [1, [2, 3], 4] const flatOne arr.reduce((acc, cur) acc.concat(cur), []) // [1, 2, 3, 4] // 完全扁平递归 function flatten(arr) { return arr.reduce((acc, cur) { return acc.concat(Array.isArray(cur) ? flatten(cur) : cur) }, []) } const deepArr [1, [2, [3, [4]], 5]] console.log(flatten(deepArr)) // [1, 2, 3, 4, 5]4. 数组分组高频面试压轴const list [ { name: 张三, type: a }, { name: 李四, type: b }, { name: 王五, type: a }, ] const group list.reduce((acc, cur) { const key cur.type if (!acc[key]) acc[key] [] acc[key].push(cur) return acc }, {}) /* 结果 { a: [{name:张三,type:a}, {name:王五,type:a}], b: [{name:李四,type:b}] } */5. 统计次数const fruits [苹果, 香蕉, 苹果, 橙子, 香蕉, 苹果] const count fruits.reduce((acc, cur) { acc[cur] (acc[cur] || 0) 1 return acc }, {}) console.log(count) // { 苹果: 3, 香蕉: 2, 橙子: 1 }6. 对象数组去重const users [ { id: 1, name: 张三 }, { id: 2, name: 李四 }, { id: 1, name: 王五 }, // id重复 ] const uniqueUsers users.reduce((acc, cur) { if (!acc.find(item item.id cur.id)) { acc.push(cur) } return acc }, []) // [{ id: 1, name: 张三 }, { id: 2, name: 李四 }]最容易混淆的两个点必看1️⃣slicevssplice记一次就够slice不改变原数组切蛋糕不动原蛋糕[1,2,3].slice(1,2)→[2]splice改变原数组删除/插入/替换[1,2,3].splice(1,1)→ 原数组变[1,3]✅ 记忆口诀slice 不改变li 像“离”不离开原数组splice 改变pli 像“plow 犁地”会破坏原结构2️⃣mapvsforEach[1,2].map(x x*2) // ✅ [2,4] 返回新数组 [1,2].forEach(x x*2) // ❌ undefined别用来拿结果✅ 需要拿到新数组→map只想执行副作用打印、更新DOM →forEach一个高频易错提醒sort()默认会按字符串排序[1,2,11].sort() // [1,11,2] ❌ [1,2,11].sort((a,b)a-b) // [1,2,11] ✅✅ 数字排序永远传比较函数(a,b)a-b问题Qmap 和 forEach 的区别答map返回新数组可以链式调用forEach返回 undefined不能链式map用于数据转换forEach用于执行副作用操作如打印、DOM操作Qfind 和 filter 的区别答find返回第一个符合条件的元素找到就停止filter返回所有符合条件的数组find没找到返回undefinedfilter没找到返回[]Qreduce 能做什么答求和、去重、扁平化、分组、统计次数、对象数组去重等是最强大的数组方法。