JavaScript 中数组的常用处理方法

一、创建数组

// 字面量constarr1=[1,2,3];constarr2=[];// 构造函数constarr3=newArray(3);// 长度为3的空数组constarr4=newArray(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. 增删元素

constarr=[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. 连接与分割

// concat - 合并数组（不改变原数组）constarr1=[1,2];constarr2=[3,4];constmerged=arr1.concat(arr2,[5,6]);// slice - 切片（不改变原数组）constarr=[1,2,3,4,5];arr.slice(1,3);// [2, 3]arr.slice(-2);// [4, 5]

3. 查找元素

constarr=[1,2,3,4,5,2];// 按值查找arr.indexOf(2);// 1arr.lastIndexOf(2);// 5arr.includes(3);// true// 按条件查找arr.find(item=>item>3);// 4arr.findIndex(item=>item>3);// 3

三、遍历方法

1. 基本遍历

constarr=['a','b','c'];// forEach - 遍历执行回调arr.forEach((item,index,array)=>{console.log(item,index);});// for...of - 遍历值for(constitemofarr){console.log(item);}// for...in - 遍历索引（不推荐用于数组）for(constindexinarr){console.log(arr[index]);}

2. 转换方法

constarr=[1,2,3];// map - 映射新数组constdoubled=arr.map(x=>x*2);// [2, 4, 6]// flat - 扁平化constnested=[1,[2,[3]]];nested.flat();// [1, 2, [3]]nested.flat(2);// [1, 2, 3]nested.flat(Infinity);// 完全扁平化// flatMap - 映射后扁平化constarr2=[1,2,3];arr2.flatMap(x=>[x,x*2]);// [1, 2, 2, 4, 3, 6]

四、查找与判断

1. 条件判断

constarr=[1,2,3,4];// every - 所有元素满足条件arr.every(x=>x>0);// true// some - 至少一个元素满足条件arr.some(x=>x>3);// true// includes - 包含某个值arr.includes(2);// true

2. 过滤

constarr=[1,2,3,4,5];// filter - 过滤符合条件的元素constevens=arr.filter(x=>x%2===0);// [2, 4]

五、聚合计算

1. 归约操作

constarr=[1,2,3,4];// reduce - 从左到右归约constsum=arr.reduce((acc,cur)=>acc+cur,0);// 10constmax=arr.reduce((a,b)=>Math.max(a,b));// 4// reduceRight - 从右到左归约constreversed=arr.reduceRight((acc,cur)=>[...acc,cur],[]);

2. 其他计算

constarr=[1,2,3,4];arr.length;// 4arr.join('-');// "1-2-3-4"arr.toString();// "1,2,3,4"// 简单统计Math.max(...arr);// 4Math.min(...arr);// 1

六、排序与反转

1. 排序

constarr=[3,1,4,1,5];// sort - 原地排序arr.sort();// [1, 1, 3, 4, 5]arr.sort((a,b)=>b-a);// 降序 [5, 4, 3, 1, 1]// 复杂排序constusers=[{name:'John',age:25},{name:'Jane',age:30}];users.sort((a,b)=>a.age-b.age);

2. 反转

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

七、其他实用方法

1. 填充与复制

// fill - 填充数组constarr1=newArray(3).fill(0);// [0, 0, 0]// copyWithin - 内部复制constarr2=[1,2,3,4,5];arr2.copyWithin(0,3);// [4, 5, 3, 4, 5]

2. 数组解构

constarr=[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. 扩展运算符

// 合并数组constarr1=[1,2];constarr2=[3,4];constcombined=[...arr1,...arr2];// [1, 2, 3, 4]// 复制数组（浅拷贝）constcopy=[...arr1];// [1, 2]// 函数参数Math.max(...[1,2,3]);// 3

2. 迭代器和生成器

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

九、性能优化技巧

1. 避免常见陷阱

// 1. 避免在循环中修改数组长度for(leti=0;i<arr.length;i++){// 不要在循环内 push/pop}// 2. 使用 for 循环处理大数据量// for 循环最快，forEach 次之，map/filter 最慢// 3. 预分配大数组长度constbigArray=newArray(1000000);

2. 链式调用

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

十、实用函数示例

// 数组去重constunique=[...newSet([1,2,2,3])];// [1, 2, 3]// 数组分组constgroupBy=(arr,key)=>arr.reduce((acc,obj)=>{constgroup=obj[key];acc[group]=acc[group]||[];acc[group].push(obj);returnacc;},{});// 数组分块constchunk=(arr,size)=>Array.from({length:Math.ceil(arr.length/size)},(_,i)=>arr.slice(i*size,i*size+size));

总结要点

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