JavaScript 数组高阶用法汇总（含浏览器+微信小程序WebView支持）

JavaScript 数组高阶用法汇总

方法分类方法名核心作用返回值类型关键特点浏览器支持（最低版本）微信小程序WebView支持
核心遍历类 forEach 遍历数组执行操作，无返回值 undefined 无法中断遍历，适合简单循环操作 ✅ 全支持：
Chrome 4+、Firefox 2+、Safari 5+、
Edge 12+、IE 9+、Opera 9.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 遍历用户列表，打印用户名和索引
const users = [{name: '张三'}, {name: '李四'}, {name: '王五'}];
users.forEach((user, index) => console.log(`第${index+1}人：${user.name}`));
核心遍历类 some 判断数组是否存在满足条件的元素 boolean 找到第一个匹配元素即中断，性能高效 ✅ 全支持：
Chrome 4+、Firefox 1.5+、Safari 5+、
Edge 12+、IE 9+、Opera 9.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 检查商品列表中是否有低价商品（<500元）
const products = [{price: 399}, {price: 699}, {price: 299}];
const hasCheapGoods = products.some(item => item.price < 500); // true
核心遍历类 every 判断数组所有元素是否满足条件 boolean 遇到不满足条件元素即中断，严格校验 ✅ 全支持：
Chrome 4+、Firefox 1.5+、Safari 5+、
Edge 12+、IE 9+、Opera 9.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 校验所有学生成绩是否及格（≥60分）
const scores = [85, 72, 68, 90];
const allPass = scores.every(score => score >= 60); // true
核心遍历类 find 查找并返回第一个满足条件的元素 匹配元素/undefined 找到即中断，比filter更高效（无需遍历全部） ⚠️ 部分支持：
Chrome 45+、Firefox 25+、Safari 7.1+、
Edge 12+、Opera 32+
❌ 不支持：IE 全版本 		✅ 完全支持
📱 基础库 1.0.0+（所有版本）
// 查找ID为102的用户信息
const userList = [{id: 101, name: '张三'}, {id: 102, name: '李四'}];
const targetUser = userList.find(user => user.id === 102); // {id:102, name:'李四'}
核心遍历类 findIndex 查找并返回第一个满足条件元素的索引 索引/-1 无匹配返回-1，适合后续删除/替换操作 ⚠️ 部分支持：
Chrome 45+、Firefox 25+、Safari 7.1+、
Edge 12+、Opera 32+
❌ 不支持：IE 全版本 		✅ 完全支持
📱 基础库 1.0.0+（所有版本）
// 查找状态为"已失效"的优惠券索引，用于删除
const coupons = [{status: '有效'}, {status: '已失效'}, {status: '有效'}];
const invalidIndex = coupons.findIndex(item => item.status === '已失效'); // 1
coupons.splice(invalidIndex, 1); // 删除失效优惠券
转换映射类 map 对数组元素逐一转换，生成新数组 新数组（长度与原数组一致） 不修改原数组，一一对应转换，纯函数特性 ✅ 全支持：
Chrome 4+、Firefox 1.5+、Safari 5+、
Edge 12+、IE 9+、Opera 9.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 将商品价格数组转换为"¥XXX"格式的字符串数组
const prices = [399, 699, 999];
const priceLabels = prices.map(price => `¥${price.toFixed(2)}`); // 结果：["¥399.00", "¥699.00", "¥999.00"]
转换映射类 filter 筛选满足条件的元素，生成新数组 新数组（长度≤原数组） 不修改原数组，保留匹配元素，纯函数特性 ✅ 全支持：
Chrome 4+、Firefox 1.5+、Safari 5+、
Edge 12+、IE 9+、Opera 9.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 筛选出库存大于0的在售商品
const goodsList = [{name: 'T恤', stock: 20}, {name: '裤子', stock: 0}, {name: '鞋子', stock: 50}];
const onSaleGoods = goodsList.filter(goods => goods.stock > 0);
转换映射类 flat 将多维数组扁平化，降低维度 新数组 默认扁平化1层，支持Infinity全维度扁平化 ⚠️ 部分支持：
Chrome 69+、Firefox 62+、Safari 12+、
Edge 79+、Opera 56+
❌ 不支持：IE 全版本、Edge 12-78 		✅ 完全支持
📱 基础库 2.10.0+（2020年后版本）
// 多维数组扁平化（实际场景：处理嵌套的分类数据）
const nestedCategories = [1, [2, [3, 4], 5], 6];
const flat1 = nestedCategories.flat();
// 扁平化1层：[1,2,[3,4],5,6]
const flatAll = nestedCategories.flat(Infinity);
// 全扁平化：[1,2,3,4,5,6]
转换映射类 flatMap 先执行map转换，再执行flat(1)扁平化 新数组 减少一次遍历，性能优于map+flat组合 ⚠️ 部分支持：
Chrome 69+、Firefox 62+、Safari 12+、
Edge 79+、Opera 56+
❌ 不支持：IE 全版本、Edge 12-78 		✅ 完全支持
📱 基础库 2.10.0+（2020年后版本）
// 转换并扁平化：将用户订单列表拆分为单个商品
const orders = [{id: 1, goods: ['A', 'B']}, {id: 2, goods: ['C']}];
const allGoods = orders.flatMap(order => order.goods); // ["A", "B", "C"]
聚合计算类 reduce 累积处理数组元素，生成单个结果 任意类型（数字、对象、字符串等） 万能聚合工具，支持求和、计数、分组等多种场景 ✅ 全支持：
Chrome 4+、Firefox 3+、Safari 5+、
Edge 12+、IE 9+、Opera 10.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 场景1：计算订单总金额
const orderList = [{amount: 199}, {amount: 299}, {amount: 399}];
const totalAmount = orderList.reduce((sum, item) => sum + item.amount, 0); // 897
// 场景2：按状态分组统计订单数
const orderStatusList = [{status: '待付款'}, {status: '已完成'}, {status: '待付款'}];
const statusCount = orderStatusList.reduce((acc, item) => { acc[item.status] = (acc[item.status] || 0) + 1; return acc; }, {}); // {待付款: 2, 已完成: 1}
聚合计算类 reduceRight 从数组末尾开始累积处理，生成单个结果 任意类型 与reduce逻辑一致，仅遍历方向相反，适合逆序聚合 ✅ 全支持：
Chrome 4+、Firefox 3+、Safari 5+、
Edge 12+、IE 9+、Opera 10.5+ 		✅ 完全支持
📱 所有小程序基础库版本
// 逆序拼接字符串（实际场景：还原倒序存储的ID）
const reversedIds = ['3', '2', '1'];
const originalId = reversedIds.reduceRight((acc, cur) => acc + cur, ''); // "123"
排序与查找类 sort 按指定规则对数组元素排序 原数组（原地修改） 默认按Unicode排序，需传入比较函数实现数值排序 ✅ 全支持：
Chrome 1+、Firefox 1+、Safari 1+、
Edge 12+、IE 5.5+、Opera 4+ 		✅ 完全支持
📱 所有小程序基础库版本
// 场景1：数字数组升序排序
const numbers = [3, 1, 4, 1, 5];
numbers.sort((a, b) => a - b); // [1, 1, 3, 4, 5]
// 场景2：按商品价格降序排序
const goods = [{price: 399}, {price: 699}, {price: 299}];
goods.sort((a, b) => b.price - a.price); // 从高到低排序
排序与查找类 includes 判断数组是否包含指定元素 boolean 支持指定起始索引，语法简洁，比indexOf更易读 ⚠️ 部分支持：
Chrome 47+、Firefox 43+、Safari 9+、
Edge 14+、Opera 34+
❌ 不支持：IE 全版本、Edge 12-13 		✅ 完全支持
📱 基础库 1.9.0+（2018年后版本）
// 检查用户标签中是否包含"VIP"（从索引1开始查找）
const userTags = ['普通用户', 'VIP', '会员'];
const isVIP = userTags.includes('VIP', 1); // true
const hasAdmin = userTags.includes('管理员'); // false
排序与查找类 indexOf 从数组开头查找元素，返回索引 索引/-1 适合简单值查找，支持指定起始索引，兼容旧环境 ✅ 全支持：
Chrome 1+、Firefox 1+、Safari 3+、
Edge 12+、IE 9+、Opera 9+ 		✅ 完全支持
📱 所有小程序基础库版本
// 查找"苹果"在水果数组中的位置（从索引0开始）
const fruits = ['香蕉', '苹果', '橙子', '苹果'];
const firstAppleIndex = fruits.indexOf('苹果'); // 1
const secondAppleIndex = fruits.indexOf('苹果', 2); // 3
排序与查找类 lastIndexOf 从数组末尾查找元素，返回索引 索引/-1 与indexOf逻辑一致，查找方向相反，适合找最后一个匹配项 ✅ 全支持：
Chrome 1+、Firefox 1+、Safari 3+、
Edge 12+、IE 9+、Opera 9+ 		✅ 完全支持
📱 所有小程序基础库版本
// 查找最后一个"苹果"在水果数组中的位置
const fruits = ['香蕉', '苹果', '橙子', '苹果'];
const lastAppleIndex = fruits.lastIndexOf('苹果'); // 3
const noGrapeIndex = fruits.lastIndexOf('葡萄'); // -1
实用工具类 Array.from 从类数组/可迭代对象生成新数组 新数组 支持映射函数，可直接转换并处理数据（DOM集合、Set等） ⚠️ 部分支持：
Chrome 45+、Firefox 32+、Safari 9.1+、
Edge 12+、Opera 32+
❌ 不支持：IE 全版本 		✅ 完全支持
📱 基础库 1.9.0+（2018年后版本）
// 场景1：转换DOM集合为数组（小程序WebView中可用）
const divElements = document.querySelectorAll('div');
const divArray = Array.from(divElements);
// 场景2：转换字符串并处理（字母大写）
const str = 'abc';
const upperArr = Array.from(str, char => char.toUpperCase()); // ["A", "B", "C"]
实用工具类 Array.of 创建包含指定元素的新数组 新数组 解决new Array()的怪异行为（单个数字参数表示长度） ⚠️ 部分支持：
Chrome 45+、Firefox 25+、Safari 9+、
Edge 12+、Opera 32+
❌ 不支持：IE 全版本 		✅ 完全支持
📱 基础库 1.9.0+（2018年后版本）
// 正确创建包含单个数字元素的数组
const arr1 = Array.of(3); // [3]（符合预期）
const arr2 = new Array(3); // 长度为3的空数组（怪异行为）
// 创建多元素数组 const arr3 = Array.of(1, 2, 3); // [1, 2, 3]

📌 兼容性说明（含微信小程序WebView）

  • 标记 ✅ 全支持 的方法：无需兼容处理，可直接在所有现代浏览器及 IE9+ 使用
  • 标记 ⚠️ 部分支持 的方法：不支持 IE 或旧版 Edge，需兼容 IE 可使用 babel-polyfill 或替代方案
  • 标记 ❌ 不支持 的场景：若项目需兼容 IE，建议避免直接使用，或通过 polyfill 补全
  • 📱 微信小程序WebView 特殊说明：
    • 小程序 WebView 基于 Chromium 内核，兼容性远优于 IE，大部分 ES6+ 数组方法均支持
    • 基础库 1.0.0+（所有版本）：支持 forEach、map、filter、reduce 等核心方法
    • 基础库 1.9.0+（2018年后）：支持 includes、Array.from、Array.of
    • 基础库 2.10.0+（2020年后）：支持 flat、flatMap
    • 若需兼容极低版本基础库（<1.9.0）：避免使用 includes、Array.from，可用 indexOf !== -1 替代 includes

posted on 2025-11-20 10:34  逍遥云天  阅读(1)  评论(0)    收藏  举报

导航