一、前言数组 API 是 JavaScript 面试、业务开发最高频的知识点。很多同学只会背诵 API 含义但实际开发中不会组合使用。本篇摒弃枯燥纯理论以「在线商品筛选列表」实战项目贯穿所有常用数组API包含筛选、遍历、映射、过滤、排序、查找、去重。整篇代码复制即运行浏览器打开即可看到效果适合直接收藏、面试演示、博客收录。二、核心常用数组API 极简总结开发必用先梳理业务 90% 场景会用到的数组方法不堆砌冷门API学完直接落地开发forEach遍历数组无返回值单纯循环执行逻辑map遍历并返回新数组用于数据格式化、字段重组filter过滤数组返回符合条件的新数组筛选核心方法find查找数组中第一个符合条件的项找不到返回 undefinedfindIndex查找符合条件项的索引找不到返回 -1some/everysome 判断是否存在符合条件项every 判断全部是否符合条件sort数组排序可实现升序、降序、自定义规则排序new Set()快速数组去重基础数据类型三、实战项目在线筛选列表完整功能实现功能基于原生数组API实现完整商品筛选功能贴合真实业务场景关键词模糊搜索筛选filter价格高低排序sort商品数据格式化渲染map判断是否存在高价商品some查找指定商品find完整可运行代码HTMLJS 一体化直接复制保存为index.html双击浏览器打开即可运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 title数组API - 在线筛选列表案例/title style * {margin: 0; padding: 0; box-sizing: border-box;} .container {width: 800px; margin: 50px auto; padding: 0 20px;} .search-box {margin-bottom: 20px;} input, select {padding: 8px 12px; width: 300px; margin-right: 10px;} button {padding: 8px 16px; cursor: pointer;} .list {margin-top: 20px;} .item {padding: 12px; border: 1px solid #eee; margin-bottom: 10px; border-radius: 6px;} .tip {color: #666; margin: 10px 0;} /style /head body div classcontainer div classsearch-box input typetext idkey placeholder输入商品名称模糊搜索 select idsortType option valuedefault默认排序/option option valueasc价格升序/option option valuedesc价格降序/option /select button onclickrenderList()筛选查询/button /div div classtip idtipText/div div classlist idlistBox/div /div script // 1. 模拟后端原始商品数据 const goodsList [ { id: 1, name: JavaScript高级教程, price: 79, hot: true }, { id: 2, name: Vue3实战指南, price: 59, hot: false }, { id: 3, name: React从零入门, price: 89, hot: true }, { id: 4, name: Node.js后端开发, price: 69, hot: false }, { id: 5, name: TypeScript进阶, price: 99, hot: true } ]; // 核心渲染函数整合所有数组API function renderList() { // 获取页面筛选条件 const keyWord document.getElementById(key).value.trim() const sortType document.getElementById(sortType).value // 2. filter 模糊筛选匹配商品名称 let filterList goodsList.filter(item { return item.name.includes(keyWord) }) // 3. sort 价格排序 if (sortType asc) { // 价格升序 filterList.sort((a, b) a.price - b.price) } else if (sortType desc) { // 价格降序 filterList.sort((a, b) b.price - a.price) } // 4. some 判断是否有90元以上高价商品 const hasExpensive filterList.some(item item.price 90) // 5. find 查找第一个高价商品 const expensiveGoods filterList.find(item item.price 90) // 提示文案 let tip 当前筛选共 ${filterList.length} 件商品 | tip hasExpensive ? 存在高价商品${expensiveGoods?.name} : 无高价商品 document.getElementById(tipText).innerText tip // 6. map 批量渲染页面 const htmlStr filterList.map(item { return div classitem h3${item.name} ${item.hot ? 热销 : }/h3 p价格¥${item.price}/p /div }).join() // 插入页面 document.getElementById(listBox).innerHTML htmlStr } // 初始加载渲染全部数据 renderList() /script /body /html运行结果四、代码逐行核心API解析重点吃透1. filter 筛选业务最常用filter会遍历数组保留回调返回 true 的元素返回新数组不修改原数组。本例中通过includes实现模糊搜索完美适配搜索框场景let filterList goodsList.filter(item { return item.name.includes(keyWord) })2. sort 自定义排序很多新手会疑惑sortType、asc 到底是怎么绑定排序功能的这里拆解页面与JS的绑定核心逻辑彻底搞懂联动原理。数组默认 sort 是字符串排序数字排序必须手动写回调页面绑定规则页面下拉选择框设置了idsortTypeJS 通过该唯一ID精准获取用户选中的选项值实现页面与逻辑联动自定义字面量规则asc、desc是我们自定义的字符串字面量非系统关键字专门绑定排序逻辑可随意替换为up、down等自定义字符只需HTML的value值和JS判断字符串保持一致即可a.price - b.price匹配asc实现价格升序从小到大b.price - a.price匹配desc实现价格降序从大到小3. map 数据渲染格式化map 是前端列表渲染的核心API也是工作中渲染列表首选写法完全替代传统 for 循环。和 forEach 最大区别map 会返回一个新数组我们可以利用这个新数组批量生成 HTML 片段最后拼接渲染页面。1. map 整体执行逻辑会自动遍历filterList筛选后的每一条商品数据遍历过程中每一项用item接收每遍历一次必须 return 一段内容最终所有返回的内容会组成一个「新数组」。2. 模板字符串嵌套语法解析最难懂的部分代码中${item.name}、${item.price}、${item.hot ? 热销 : }是模板字符串插值语法可以在HTML文本中直接嵌入JS变量和简单判断。其中三元判断item.hot ? 热销 : 逻辑如果当前商品item.hot true插值结果为文字热销如果当前商品item.hot false插值结果为空字符串页面不显示任何内容3. .join() 的核心作用map 遍历结束后得到的是一个「由多段HTML字符串组成的数组」数组元素之间默认会自带逗号分隔符直接渲染会出现乱码、多余逗号。join()的作用将数组里所有HTML片段无缝拼接成一整段纯净的HTML字符串去除所有逗号保证页面渲染正常、无错乱。4. 整体流程一句话总结map 遍历所有筛选后的商品数据 → 动态生成每一个商品的卡片HTML结构 → join 拼接成完整代码 → 统一渲染到页面列表容器中。4. some / find 条件判断与查找some只要有一个满足条件直接返回 true遍历终止性能高find找到第一个满足条件的项直接返回该项找不到返回 undefined非常适合做「是否存在某数据」「精准查找单条数据」场景。五、拓展补充2个高频配套用法1. 数组去重Setconst arr [1,2,2,3,3,4] const newArr [...new Set(arr)] console.log(newArr)// [1,2,3,4]2. every 全员校验判断所有商品价格是否都大于50const allCheap goodsList.every(item gt; item.price gt; 50) console.log(allCheap)六、面试/开发总结必背亮点1. 遍历优先顺序渲染用 map、筛选用 filter、判断用 some/every、查找用 find拒绝无脑 for 循环2. 所有高阶API均不会修改原数组sort 除外会修改原数组开发更安全3. 真实业务90%列表需求筛选 排序 格式化渲染就是本篇的完整逻辑可直接复用。