JS常用数组方法

JavaScript 的数组方法非常强大，掌握它们能让你的开发效率事半功倍。以下是常用的数组方法总结，分为 修改原数组/返回新数组、遍历/查找、ES6+新增方法 等分类：

---

一、会修改原数组的方法

方法	作用	示例	返回值
push	在数组末尾添加元素	arr.push(5)	新数组长度
pop	删除数组最后一个元素	arr.pop()	被删除的元素
unshift	在数组开头添加元素	arr.unshift(1)	新数组长度
shift	删除数组第一个元素	arr.shift()	被删除的元素
splice	删除/替换数组元素	arr.splice(1,2,'a')	被删除元素的数组
reverse	反转数组顺序	arr.reverse()	反转后的原数组
sort	排序数组（默认字符顺序）	arr.sort((a,b) => a - b)	排序后的原数组
fill	填充数组元素	arr.fill(0, 1, 3)	修改后的原数组

---

二、不修改原数组的方法

方法	作用	示例	返回值
concat	合并多个数组	arr1.concat(arr2)	新数组
slice	截取数组片段	arr.slice(1,3)	新数组片段
join	转成字符串	arr.join('-')	字符串
map	映射新数组	arr.map(x => x * 2)	新数组
filter	过滤符合条件元素	arr.filter(x => x > 5)	新数组
reduce	累积计算结果	arr.reduce((sum, x) => sum + x, 0)	累积结果

---

三、遍历与检测方法

方法	作用	示例
forEach	遍历数组（没有返回值）	arr.forEach(x => console.log(x))
some	是否有一个满足条件	arr.some(x => x % 2 === 0)
every	是否全部满足条件	arr.every(x => x > 0)
find	查找第一个符合条件的元素	arr.find(x => x.age > 18)
findIndex	查找第一个符合条件的索引	arr.findIndex(x => x === 5)
indexOf	查找元素的索引位置（严格相等）	arr.indexOf(3)
includes	是否包含某元素（ES7）	arr.includes('apple')

---

四、ES6+ 新增实用方法

方法	作用	示例
flat	数组扁平化	arr.flat(2)
flatMap	先映射再扁平化	arr.flatMap(x => [x, x*2])
Array.from	将类数组转为数组	Array.from('123') → [1,2,3]
fill	填充数组（替换元素）	new Array(3).fill(0)

---

⭐ 高频使用场景说明

1. 数据转换 → map

   const prices = [10, 20, 30];
   const withTax = prices.map(price => price * 1.1);
   

2. 条件过滤 → filter

   const adults = users.filter(user => user.age >= 18);
   

3. 数值计算 → reduce

   const total = cartItems.reduce((sum, item) => sum + item.price, 0);
   

4. 快速判断存在性 → some/includes

   if (tags.some(tag => tag === 'urgent')) {
     // 紧急任务处理
   }
   

5. 数组扁平化 → flat

   const nested = [1, [2, [3]]];
   const flatArr = nested.flat(Infinity); // [1, 2, 3]
   

---

📌 注意事项

1. 直接修改原数组的方法（如 push/pop）在 React/Vue 中可能导致状态更新问题，建议使用返回新数组的方法。
2. 箭头函数简写：arr.map(x => x * 2) 优于 arr.map(function(x) { return x*2 })
3. 性能优化：避免在循环中频繁使用 splice，时间复杂度较高。