一、数组基础：从创建到访问
数组就像是一个装东西的盒子，可以存放各种类型的数据。在JavaScript中，创建数组最简单的方式就是使用方括号：
// 技术栈：JavaScript
// 1. 创建空数组
let emptyArr = [];
// 2. 创建带有初始值的数组
let fruits = ['苹果', '香蕉', '橙子'];
// 3. 使用Array构造函数
let numbers = new Array(1, 2, 3);
访问数组元素就像是从盒子里拿东西，通过索引（从0开始）就能拿到对应的值：
// 访问第一个元素
console.log(fruits[0]); // 输出："苹果"
// 修改第二个元素
fruits[1] = '芒果';
console.log(fruits); // 输出：["苹果", "芒果", "橙子"]
数组的长度可以通过length属性获取，这个属性也可以用来清空数组：
// 获取数组长度
console.log(fruits.length); // 输出：3
// 清空数组
fruits.length = 0;
console.log(fruits); // 输出：[]
二、数组遍历：多种方式任你选
遍历数组就像是挨个检查盒子里的物品，JavaScript提供了多种方式来实现：
// 1. 最基础的for循环
for(let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 2. for...of循环（ES6新增）
for(let fruit of fruits) {
console.log(fruit);
}
// 3. forEach方法
fruits.forEach(function(fruit, index) {
console.log(index + ': ' + fruit);
});
forEach方法是最常用的遍历方式，它接收一个回调函数，这个函数会对数组的每个元素执行一次。回调函数可以接收三个参数：当前元素、当前索引和数组本身。
三、数组操作：增删改查全掌握
1. 添加元素
// 在末尾添加元素
fruits.push('葡萄');
console.log(fruits); // 输出：["苹果", "芒果", "橙子", "葡萄"]
// 在开头添加元素
fruits.unshift('草莓');
console.log(fruits); // 输出：["草莓", "苹果", "芒果", "橙子", "葡萄"]
2. 删除元素
// 删除最后一个元素
fruits.pop();
console.log(fruits); // 输出：["草莓", "苹果", "芒果", "橙子"]
// 删除第一个元素
fruits.shift();
console.log(fruits); // 输出：["苹果", "芒果", "橙子"]
3. 查找元素
// 查找元素索引
console.log(fruits.indexOf('芒果')); // 输出：1
// 检查是否包含某元素
console.log(fruits.includes('橙子')); // 输出：true
四、高阶数组方法：让数据处理更高效
1. map方法：转换数组
// 将水果数组转换为大写
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // 输出：["APPLE", "MANGO", "ORANGE"]
2. filter方法：过滤数组
// 筛选长度大于4的水果
let longFruits = fruits.filter(fruit => fruit.length > 4);
console.log(longFruits); // 输出：["apple", "mango", "orange"]
3. reduce方法：汇总数组
// 计算所有水果名字的总长度
let totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);
console.log(totalLength); // 输出：14 (apple5 + mango5 + orange6)
五、实用技巧：解决常见问题
1. 数组去重
let duplicateArr = [1, 2, 2, 3, 4, 4, 5];
// 方法1：使用Set
let uniqueArr1 = [...new Set(duplicateArr)];
console.log(uniqueArr1); // 输出：[1, 2, 3, 4, 5]
// 方法2：使用filter
let uniqueArr2 = duplicateArr.filter((item, index) => duplicateArr.indexOf(item) === index);
console.log(uniqueArr2); // 输出：[1, 2, 3, 4, 5]
2. 数组排序
let randomNumbers = [3, 1, 4, 1, 5, 9, 2, 6];
// 升序排序
let ascNumbers = [...randomNumbers].sort((a, b) => a - b);
console.log(ascNumbers); // 输出：[1, 1, 2, 3, 4, 5, 6, 9]
// 降序排序
let descNumbers = [...randomNumbers].sort((a, b) => b - a);
console.log(descNumbers); // 输出：[9, 6, 5, 4, 3, 2, 1, 1]
六、应用场景与技术选型
数组方法在日常开发中无处不在，比如：
- 表单数据处理：使用map转换表单数据格式
- 列表筛选：使用filter实现搜索功能
- 数据统计：使用reduce计算总和、平均值等
- 状态管理：在React/Vue中处理数组形式的状态
技术优缺点：
- 优点：方法丰富、链式调用、函数式编程风格
- 缺点：部分方法会创建新数组（内存消耗）、IE兼容性问题
注意事项：
- 某些方法会修改原数组（如push/pop），有些则不会（如map/filter）
- 处理大型数组时要注意性能问题
- 在循环中修改数组长度可能导致意外行为
七、总结与最佳实践
JavaScript数组方法为我们提供了强大的数据处理能力。掌握这些方法可以：
- 大幅减少代码量
- 提高代码可读性
- 提升开发效率
最佳实践建议：
- 优先使用ES6+的新方法
- 合理使用方法链
- 注意方法的返回值（是否修改原数组）
- 大型数据处理考虑性能优化
评论