JavaScript 中数组的常用处理方法

一、创建数组

javascript 复制代码

// 字面量
const arr1 = [1, 2, 3];
const arr2 = [];

// 构造函数
const arr3 = new Array(3); // 长度为3的空数组
const arr4 = new Array(1, 2, 3);

// Array.of() - 解决构造函数歧义
Array.of(3); // [3]，而不是长度为3的空数组

// Array.from() - 从类数组或可迭代对象创建
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

二、基本操作方法

1. 增删元素

javascript 复制代码

const arr = [1, 2, 3];

// 尾部操作
arr.push(4);        // [1,2,3,4] 返回新长度
arr.pop();          // [1,2,3] 返回删除的元素

// 头部操作
arr.unshift(0);     // [0,1,2,3] 返回新长度
arr.shift();        // [1,2,3] 返回删除的元素

// 任意位置增删
arr.splice(1, 0, 'a', 'b');  // [1,'a','b',2,3]
arr.splice(2, 1);            // [1,'a',2,3]
arr.splice(1, 2, 'x');       // [1,'x',3]

2. 连接与分割

javascript 复制代码

// concat - 合并数组（不改变原数组）
const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = arr1.concat(arr2, [5, 6]);

// slice - 切片（不改变原数组）
const arr = [1, 2, 3, 4, 5];
arr.slice(1, 3);    // [2, 3]
arr.slice(-2);      // [4, 5]

3. 查找元素

javascript 复制代码

const arr = [1, 2, 3, 4, 5, 2];

// 按值查找
arr.indexOf(2);        // 1
arr.lastIndexOf(2);    // 5
arr.includes(3);       // true

// 按条件查找
arr.find(item => item > 3);        // 4
arr.findIndex(item => item > 3);   // 3

三、遍历方法

1. 基本遍历

javascript 复制代码

const arr = ['a', 'b', 'c'];

// forEach - 遍历执行回调
arr.forEach((item, index, array) => {
  console.log(item, index);
});

// for...of - 遍历值
for (const item of arr) {
  console.log(item);
}

// for...in - 遍历索引（不推荐用于数组）
for (const index in arr) {
  console.log(arr[index]);
}

2. 转换方法

javascript 复制代码

const arr = [1, 2, 3];

// map - 映射新数组
const doubled = arr.map(x => x * 2); // [2, 4, 6]

// flat - 扁平化
const nested = [1, [2, [3]]];
nested.flat();        // [1, 2, [3]]
nested.flat(2);       // [1, 2, 3]
nested.flat(Infinity); // 完全扁平化

// flatMap - 映射后扁平化
const arr2 = [1, 2, 3];
arr2.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

四、查找与判断

1. 条件判断

javascript 复制代码

const arr = [1, 2, 3, 4];

// every - 所有元素满足条件
arr.every(x => x > 0);  // true

// some - 至少一个元素满足条件
arr.some(x => x > 3);   // true

// includes - 包含某个值
arr.includes(2);        // true

2. 过滤

javascript 复制代码

const arr = [1, 2, 3, 4, 5];

// filter - 过滤符合条件的元素
const evens = arr.filter(x => x % 2 === 0); // [2, 4]

五、聚合计算

1. 归约操作

javascript 复制代码

const arr = [1, 2, 3, 4];

// reduce - 从左到右归约
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 10
const max = arr.reduce((a, b) => Math.max(a, b));   // 4

// reduceRight - 从右到左归约
const reversed = arr.reduceRight((acc, cur) => [...acc, cur], []);

2. 其他计算

javascript 复制代码

const arr = [1, 2, 3, 4];

arr.length;               // 4
arr.join('-');            // "1-2-3-4"
arr.toString();           // "1,2,3,4"

// 简单统计
Math.max(...arr);         // 4
Math.min(...arr);         // 1

六、排序与反转

1. 排序

javascript 复制代码

const arr = [3, 1, 4, 1, 5];

// sort - 原地排序
arr.sort();                     // [1, 1, 3, 4, 5]
arr.sort((a, b) => b - a);      // 降序 [5, 4, 3, 1, 1]

// 复杂排序
const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 }
];
users.sort((a, b) => a.age - b.age);

2. 反转

javascript 复制代码

const arr = [1, 2, 3];
arr.reverse();  // [3, 2, 1]

七、其他实用方法

1. 填充与复制

javascript 复制代码

// fill - 填充数组
const arr1 = new Array(3).fill(0);  // [0, 0, 0]

// copyWithin - 内部复制
const arr2 = [1, 2, 3, 4, 5];
arr2.copyWithin(0, 3);  // [4, 5, 3, 4, 5]

2. 数组解构

javascript 复制代码

const arr = [1, 2, 3];

// 基本解构
const [first, second] = arr;  // first=1, second=2

// 跳过元素
const [a, , c] = arr;         // a=1, c=3

// 剩余运算符
const [x, ...rest] = arr;     // x=1, rest=[2, 3]

// 默认值
const [p = 10, q = 20] = [];  // p=10, q=20

八、ES6+ 新特性

1. 扩展运算符

javascript 复制代码

// 合并数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]

// 复制数组（浅拷贝）
const copy = [...arr1];  // [1, 2]

// 函数参数
Math.max(...[1, 2, 3]);  // 3

2. 迭代器和生成器

javascript 复制代码

const arr = [1, 2, 3];
const iterator = arr.keys();    // 索引迭代器
const entries = arr.entries();  // [index, value] 迭代器

九、性能优化技巧

1. 避免常见陷阱

javascript 复制代码

// 1. 避免在循环中修改数组长度
for (let i = 0; i < arr.length; i++) {
  // 不要在循环内 push/pop
}

// 2. 使用 for 循环处理大数据量
// for 循环最快，forEach 次之，map/filter 最慢

// 3. 预分配大数组长度
const bigArray = new Array(1000000);

2. 链式调用

javascript 复制代码

const result = [1, 2, 3, 4, 5]
  .filter(x => x % 2 === 0)
  .map(x => x * 2)
  .reduce((sum, x) => sum + x, 0);  // 12

十、实用函数示例

javascript 复制代码

// 数组去重
const unique = [...new Set([1, 2, 2, 3])];  // [1, 2, 3]

// 数组分组
const groupBy = (arr, key) => 
  arr.reduce((acc, obj) => {
    const group = obj[key];
    acc[group] = acc[group] || [];
    acc[group].push(obj);
    return acc;
  }, {});

// 数组分块
const chunk = (arr, size) => 
  Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, i * size + size)
  );

总结要点

区分原地操作 ：push/pop/shift/unshift/splice/sort/reverse 修改原数组
非原地操作 ：map/filter/slice/concat 返回新数组
性能选择 ：大数据量用 for 循环，小数据量用高阶函数
ES6+ 优先 ：使用扩展运算符、Array.from()、flat() 等新特性
链式调用：合理组合方法，提高代码可读性