1. 数组基础概念与核心特性数组是编程中最基础且重要的数据结构之一几乎所有编程语言都提供了数组的实现。在JavaScript中数组是特殊的对象类型具有以下核心特征动态大小数组长度可以随时增减混合类型允许存储不同类型的数据元素零基索引第一个元素索引为0长度属性length属性反映元素数量重要提示JavaScript数组不是传统意义上的连续内存结构其底层实现更接近哈希表这是与其他语言数组的重要区别。2. 数组创建与初始化2.1 创建数组的三种方式// 字面量方式 const arr1 [1, two, true]; // 构造函数方式 const arr2 new Array(1, 2, 3); // Array.of方法解决构造函数单个参数时的歧义 const arr3 Array.of(5); // [5]而不是长度为5的空数组2.2 特殊数组创建技巧// 创建指定长度的空数组 const emptyArr new Array(5); // [empty × 5] // 快速填充数组 const filledArr Array(5).fill(0); // [0, 0, 0, 0, 0] // 生成数字序列 const sequence [...Array(5).keys()]; // [0, 1, 2, 3, 4]3. 数组操作的核心方法3.1 元素访问与修改const fruits [Apple, Banana]; // 访问元素 fruits[0]; // Apple // 修改元素 fruits[1] Orange; // 越界访问 fruits[5]; // undefined // 安全访问ES2022新增 fruits.at(-1); // 访问最后一个元素3.2 数组遍历的多种方式// 传统for循环 for (let i 0; i fruits.length; i) { console.log(fruits[i]); } // for...of循环 for (const fruit of fruits) { console.log(fruit); } // forEach方法 fruits.forEach((fruit, index) { console.log(index, fruit); });4. 数组高阶操作方法4.1 转换类方法// map数组元素转换 const numbers [1, 2, 3]; const doubled numbers.map(x x * 2); // [2, 4, 6] // filter元素筛选 const evens numbers.filter(x x % 2 0); // [2] // reduce数组聚合 const sum numbers.reduce((acc, cur) acc cur, 0); // 64.2 查找与测试方法// 查找元素 const index fruits.indexOf(Apple); // 0 const hasBanana fruits.includes(Banana); // true // 条件测试 const allPositive numbers.every(x x 0); // true const hasEven numbers.some(x x % 2 0); // true5. 数组操作进阶技巧5.1 数组解构与展开// 解构赋值 const [first, second] fruits; // 数组合并 const newFruits [...fruits, Mango]; // 数组复制浅拷贝 const fruitsCopy [...fruits];5.2 多维数组处理const matrix [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; // 访问二维数组元素 matrix[1][2]; // 6 // 扁平化数组 const flat matrix.flat(); // [1, 2, 3, 4, 5, 6, 7, 8, 9]6. 性能优化与注意事项6.1 常见性能陷阱连续操作优化避免在循环中直接修改数组长度大数组处理考虑使用TypedArray处理数值型大数据内存管理注意数组引用关系及时释放不再使用的大数组6.2 实用性能技巧// 高效清空数组 arr.length 0; // 高效删除元素无顺序要求时 function unorderedRemove(arr, index) { arr[index] arr[arr.length - 1]; arr.pop(); } // 预分配大数组空间 const bigArr new Array(1000000);7. 数组算法实战7.1 经典排序算法实现// 快速排序 function quickSort(arr) { if (arr.length 1) return arr; const pivot arr[0]; const left []; const right []; for (let i 1; i arr.length; i) { arr[i] pivot ? left.push(arr[i]) : right.push(arr[i]); } return [...quickSort(left), pivot, ...quickSort(right)]; }7.2 常见面试题解法// 两数之和 function twoSum(nums, target) { const map new Map(); for (let i 0; i nums.length; i) { const complement target - nums[i]; if (map.has(complement)) { return [map.get(complement), i]; } map.set(nums[i], i); } return []; } // 数组去重 const unique [...new Set(arr)];8. 特殊数组类型处理8.1 类数组对象转换// 将arguments转换为数组 function example() { const args Array.from(arguments); // 或使用展开运算符 const args2 [...arguments]; } // NodeList转换 const divs Array.from(document.querySelectorAll(div));8.2 TypedArray使用场景// 创建类型化数组 const buffer new ArrayBuffer(16); const int32View new Int32Array(buffer); // 性能敏感场景 const floatArray new Float64Array(1000); for (let i 0; i floatArray.length; i) { floatArray[i] Math.random(); }9. 现代JavaScript数组特性9.1 ES6新增方法// 查找元素 const found array.find(item item.id 3); // 扁平化处理 const nested [1, [2, [3]]]; nested.flat(2); // [1, 2, 3] // 安全添加元素 const newArr array.with(2, new value);9.2 不可变数组操作// 不改变原数组的反转 const reversed array.toReversed(); // 不改变原数组的排序 const sorted array.toSorted(); // 不改变原数组的拼接 const spliced array.toSpliced(1, 2);10. 实际开发经验分享10.1 常见错误规避稀疏数组避免直接设置length导致的空洞数组引用复制注意数组浅拷贝带来的副作用异步遍历forEach不适用于异步操作应使用for...of10.2 性能对比实测// 测试10万次操作耗时 const bigArray Array(100000).fill().map(() Math.random()); console.time(for); for (let i 0; i bigArray.length; i) {} console.timeEnd(for); // 最快 console.time(forEach); bigArray.forEach(() {}); console.timeEnd(forEach); // 次之 console.time(map); bigArray.map(() {}); console.timeEnd(map); // 最慢在实际项目中数组操作的选择应该根据具体场景平衡可读性和性能。对于小型数组方法链式调用更具表达力对于大型数据则应该优先考虑基础循环的性能优势。
