数组常用API + 在线筛选列表案例（完整可运行）
一、前言
数组 API 是 JavaScript 面试、业务开发最高频的知识点。很多同学只会背诵 API 含义，但实际开发中不会组合使用。
本篇摒弃枯燥纯理论，以「在线商品筛选列表」实战项目贯穿所有常用数组API，包含：筛选、遍历、映射、过滤、排序、查找、去重。
整篇代码复制即运行，浏览器打开即可看到效果，适合直接收藏、面试演示、博客收录。
二、核心常用数组API 极简总结（开发必用）
先梳理业务 90% 场景会用到的数组方法，不堆砌冷门API，学完直接落地开发：
forEach：遍历数组，无返回值，单纯循环执行逻辑
map：遍历并返回新数组，用于数据格式化、字段重组
filter：过滤数组，返回符合条件的新数组，筛选核心方法
find：查找数组中第一个符合条件的项，找不到返回 undefined
findIndex：查找符合条件项的索引，找不到返回 -1
some/every：some 判断是否存在符合条件项；every 判断全部是否符合条件
sort：数组排序，可实现升序、降序、自定义规则排序
new Set()：快速数组去重（基础数据类型）
三、实战项目：在线筛选列表（完整功能）
实现功能
基于原生数组API实现完整商品筛选功能，贴合真实业务场景：
关键词模糊搜索筛选（filter）
价格高低排序（sort）
商品数据格式化渲染（map）
判断是否存在高价商品（some）
查找指定商品（find）
完整可运行代码（HTML+JS 一体化）
直接复制保存为index.html，双击浏览器打开即可运行：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-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 class="container"> <div class="search-box"> <input type="text" id="key" placeholder="输入商品名称模糊搜索"> <select id="sortType"> <option value="default">默认排序</option> <option value="asc">价格升序</option> <option value="desc">价格降序</option> </select> <button onclick="renderList()">筛选查询</button> </div> <div class="tip" id="tipText"></div> <div class="list" id="listBox"></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 class="item"> <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 是字符串排序，数字排序必须手动写回调：
页面绑定规则：页面下拉选择框设置了
id="sortType"，JS 通过该唯一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. 数组去重（Set）
const arr = [1,2,2,3,3,4] const newArr = [...new Set(arr)] console.log(newArr)
// [1,2,3,4]
2. every 全员校验
判断所有商品价格是否都大于50：
const allCheap = goodsList.every(item => item.price > 50) console.log(allCheap)
六、面试/开发总结（必背亮点）
1. 遍历优先顺序：渲染用 map、筛选用 filter、判断用 some/every、查找用 find，拒绝无脑 for 循环；
2. 所有高阶API均不会修改原数组（sort 除外，会修改原数组），开发更安全；
3. 真实业务90%列表需求：筛选 + 排序 + 格式化渲染，就是本篇的完整逻辑，可直接复用。