1. JavaScript数组基础概念JavaScript数组是开发中最常用的数据结构之一它允许我们存储和操作有序的元素集合。与许多其他编程语言不同JS数组具有以下特点动态大小数组长度可以随时改变无需预先声明固定大小类型灵活同一个数组可以包含不同类型的元素数字、字符串、对象等零基索引数组索引从0开始最后一个元素的索引是length-1对象特性数组实际上是特殊类型的对象具有自己的方法和属性重要提示虽然JS数组可以存储混合类型但最佳实践是保持数组元素类型一致这能提高代码可读性和性能。2. 数组创建与初始化2.1 创建数组的多种方式// 1. 数组字面量推荐 const fruits [Apple, Banana]; // 2. Array构造函数 const numbers new Array(1, 2, 3); // 3. Array.of()方法处理单个数字参数时更安全 const single Array.of(5); // [5]而new Array(5)会创建长度为5的空数组 // 4. 从字符串拆分 const chars a,b,c.split(,); // [a, b, c]2.2 数组长度与索引特性数组的length属性既反映当前元素数量也可用于调整数组大小const arr [1, 2, 3]; console.log(arr.length); // 3 // 修改length可以截断或扩展数组 arr.length 2; // 现在arr是[1, 2] arr.length 5; // [1, 2, empty × 3] // 直接设置大于当前length的索引会自动扩展数组 arr[10] x; // [1, 2, empty × 8, x]3. 核心数组操作方法3.1 元素添加与移除方法作用返回值是否修改原数组push()末尾添加元素新length是pop()移除末尾元素被移除元素是unshift()开头添加元素新length是shift()移除开头元素被移除元素是const stack [1, 2]; stack.push(3); // [1, 2, 3] stack.pop(); // 返回3stack变为[1, 2] const queue [a, b]; queue.unshift(x); // [x, a, b] queue.shift(); // 返回xqueue变为[a, b]3.2 数组拼接与切片// concat() - 合并数组不修改原数组 const a [1, 2], b [3, 4]; const c a.concat(b); // [1, 2, 3, 4] // slice() - 提取子数组不修改原数组 const nums [10, 20, 30, 40]; nums.slice(1, 3); // [20, 30]包含开始索引不包含结束索引 // splice() - 多功能修改修改原数组 const letters [a, b, c, d]; letters.splice(1, 2, x, y); // 从索引1开始删除2个元素并插入x,y // letters变为[a, x, y, d]4. 数组遍历与转换4.1 遍历方法对比方法用途是否中断返回值forEach简单遍历不可中断undefinedmap元素转换不可中断新数组filter元素过滤不可中断新数组reduce累积计算不可中断累积值some条件测试可中断booleanevery全部满足可中断boolean// forEach示例 [1, 2, 3].forEach((item, index) { console.log(索引${index}: ${item}); }); // map示例数据转换 const doubled [1, 2, 3].map(x x * 2); // [2, 4, 6] // reduce示例累积计算 const sum [1, 2, 3].reduce((acc, cur) acc cur, 0); // 64.2 查找与测试方法// 查找元素 const users [ {id: 1, name: Alice}, {id: 2, name: Bob} ]; // find - 查找第一个匹配项 const bob users.find(user user.name Bob); // findIndex - 查找第一个匹配项的索引 const bobIndex users.findIndex(user user.name Bob); // includes - 检查是否包含某值 [1, 2, 3].includes(2); // true // some - 检查是否有元素满足条件 [1, 2, 3].some(x x 2); // true // every - 检查所有元素是否满足条件 [1, 2, 3].every(x x 0); // true5. 高级数组技巧5.1 数组扁平化// flat() - 扁平化嵌套数组 const nested [1, [2, [3]]]; nested.flat(); // [1, 2, [3]]默认只扁平化一层 nested.flat(2); // [1, 2, 3] // flatMap() - 映射后扁平化 const phrases [hello world, good morning]; const words phrases.flatMap(phrase phrase.split( )); // [hello, world, good, morning]5.2 不可变操作ES2023新增const original [1, 2, 3]; // toReversed - 反转但不修改原数组 const reversed original.toReversed(); // [3, 2, 1] // toSorted - 排序但不修改原数组 const sorted original.toSorted((a, b) b - a); // [3, 2, 1] // with - 替换指定索引元素但不修改原数组 const updated original.with(1, 99); // [1, 99, 3]5.3 性能优化技巧批量操作尽量减少单个操作使用splice一次处理多个元素避免中间数组链式操作时考虑使用reduce代替多个map/filter类型化数组处理大量数字时考虑使用Int32Array等类型化数组预分配空间已知大小时可先设置length减少动态扩容开销// 性能较差的写法 let arr []; for (let i 0; i 10000; i) { arr.push(i); // 多次扩容 } // 更好的写法 let arr new Array(10000); for (let i 0; i 10000; i) { arr[i] i; // 预分配空间 }6. 常见问题与解决方案6.1 数组去重的多种方法const dupArr [1, 2, 2, 3, 4, 4]; // 方法1Set最简单 const unique1 [...new Set(dupArr)]; // 方法2filter indexOf const unique2 dupArr.filter((item, index) dupArr.indexOf(item) index ); // 方法3reduce const unique3 dupArr.reduce((acc, cur) acc.includes(cur) ? acc : [...acc, cur], [] );6.2 多维数组处理// 创建二维数组避免引用问题 const matrix Array(3).fill().map(() Array(3).fill(0)); // 矩阵转置 function transpose(matrix) { return matrix[0].map((_, col) matrix.map(row row[col]) ); } // 扁平化二维数组 const twoD [[1, 2], [3, 4]]; const flat twoD.flat(); // [1, 2, 3, 4]6.3 数组与字符串转换// 数组转字符串 const fruits [Apple, Banana]; fruits.join(, ); // Apple, Banana // 字符串转数组 const str hello; str.split(); // [h, e, l, l, o] Array.from(str); // 同样效果更现代的方法 // 类数组对象转换 function argsToArray() { return Array.from(arguments); // 将arguments转为真实数组 }在实际项目中数组操作往往会结合业务场景更加复杂。掌握这些核心方法后建议多练习实际案例理解各种方法的时间复杂度和适用场景这样才能在真实开发中做出最优选择。