JS基础--处理数组的方法分类汇总

最新推荐文章于 2025-08-12 14:37:12 发布

原创最新推荐文章于 2025-08-12 14:37:12 发布 · 162 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #前端

前端架构师之路专栏收录该内容

10 篇文章

订阅专栏

总览速查表

类别	代表方法
查询	`at`, `includes`, `find`, `filter`, `every`, `some`
转换	`map`, `flatMap`, `reduce`
排序	`sort`, `reverse`
增删	`push/pop`, `unshift/shift`, `splice`, `slice`
扁平	`flat`, `concat`
工具	`Array.from`, `Array.of`, `keys/values/entries`

1️⃣ 读：查询 / 过滤 / 查找

方法	简介
`at`	取倒数第 N 个（ES2022）
`includes`	是否包含某元素（ES6）
`indexOf / lastIndexOf`	返回匹配索引，无则 `-1`
`find / findIndex`	按条件找首个元素 / 索引
`findLast / findLastIndex`	从右往左找（ES2023）
`filter`	返回所有满足条件的子数组

`at`

const arr = ['a', 'b', 'c'];
console.log(arr.at(0));   // 'a'   正索引
console.log(arr.at(-1));  // 'c'   负索引（倒数第1个）

`includes`

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true   是否存在元素2
console.log(arr.includes(4)); // false

`indexOf / lastIndexOf`

const arr = [2, 3, 3, 4];
console.log(arr.indexOf(3));    // 1   第一次出现索引
console.log(arr.lastIndexOf(3)); // 2 最后一次出现索引

`find / findIndex`

const users = [{id:1, name:'Tom'}, {id:2, name:'Ann'}];
const user = users.find(u => u.id === 2);   // {id:2,name:'Ann'}
const idx  = users.findIndex(u => u.id === 2); // 1

`findLast / findLastIndex` (ES2023)

const arr = [1, 2, 3, 2];
console.log(arr.findLast(v => v === 2)); // 2 （从右往左）

`filter`

const nums = [1, 2, 3, 4];
const odds = nums.filter(n => n % 2); // [1,3]

2️⃣ 改：映射 / 替换 / 填充

方法	简介
`map`	一一映射生成新数组
`flatMap`	先 map 再自动拍平一层（ES2019）
`fill`	用固定值填充
`copyWithin`	内部复制覆盖片段

`map`

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2); // [2,4,6]

`flatMap`

const arr = [1, 2];
// 先 map 再拍平一层
const res = arr.flatMap(n => [n, n ** 2]); // [1,1,2,4]

`fill`

const arr = new Array(3).fill(0); // [0,0,0]
arr.fill(9, 1, 2); // [0,9,0]  从索引1开始填到2之前

`copyWithin`

const arr = [1, 2, 3, 4, 5];
// 把索引3~4的值复制到索引0开始的位置
arr.copyWithin(0, 3, 4); // [4,2,3,4,5]

3️⃣ 排序 / 翻转

方法	简介
`sort`	就地排序（默认按字符串码点）
`reverse`	就地翻转

`sort`

const nums = [3, 11, 2];
nums.sort((a, b) => a - b); // [2,3,11] 升序
// 字符串字典序默认
['b','a','C'].sort(); // ['C','a','b']

`reverse`

const arr = [1, 2, 3];
arr.reverse(); // [3,2,1]  就地修改

4️⃣ 增删：头尾 / 任意位置

方法	简介
`push / pop`	尾部增 / 删
`unshift / shift`	头部增 / 删（性能差）
`splice`	万能增删改
`slice`	非破坏截取子数组

`push / pop`

const stack = [1];
stack.push(2); // [1,2]
const last = stack.pop(); // 2  返回被删元素
console.log(stack); // [1]

`unshift / shift`

const queue = [2, 3];
queue.unshift(1); // [1,2,3]
const first = queue.shift(); // 1

`splice`

const arr = [1, 2, 3, 4];
// 从索引1删2个元素并插入'a','b'
arr.splice(1, 2, 'a', 'b'); // arr -> [1,'a','b',4]

`slice`

const arr = [1, 2, 3, 4];
const part = arr.slice(1, 3); // [2,3]  原数组不变

5️⃣ 聚合：累加 / 判定 / 统计

方法	简介
`reduce / reduceRight`	左右累加器
`every`	全部满足条件？
`some`	存在满足条件？

`reduce / reduceRight`

const nums = [1, 2, 3];
const sum = nums.reduce((acc, cur) => acc + cur, 0); // 6
// reduceRight 从右向左

`every`

const allEven = [2, 4, 6].every(n => n % 2 === 0); // true

`some`

const hasOdd = [2, 3, 4].some(n => n % 2); // true

6️⃣ 扁平化 / 去重 / 组合

方法	简介
`flat`	拍平嵌套数组（ES2019）
`concat`	拼接新数组（非破坏）
`Array.from`	类数组/可迭代转数组
`Array.of`	用参数创建数组，避免 `new Array(3)` 的坑

`flat`

const nested = [1, [2, [3]]];
console.log(nested.flat(2)); // [1,2,3]  深度2

`concat`

const arr1 = [1];
const arr2 = [2, 3];
console.log(arr1.concat(arr2)); // [1,2,3]  不修改原数组

`Array.from`

// 类数组转数组
const divs = document.querySelectorAll('div');
const arr = Array.from(divs); // NodeList -> Array

`Array.of`

// 避免 new Array(3) 产生 [,,]
const arr = Array.of(3); // [3]

7️⃣ 迭代器 / 生成器接口（ES6+）

方法	简介
`keys / values / entries`	返回迭代器
`for...of`	遍历值（非索引）

`keys / values / entries`

const arr = ['a', 'b'];
console.log([...arr.entries()]); // [[0,'a'],[1,'b']]
console.log([...arr.keys()]);    // [0,1]
console.log([...arr.values()]);  // ['a','b']

8️⃣ 链式调用实战示例

// 需求：找出所有成年人姓名，按年龄降序，取前3个
const users = [
  { name: 'Tom', age: 17 },
  { name: 'Ann', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Joe', age: 30 }
];

const result = users
  .filter(u => u.age >= 18)     // 筛选成年人
  .sort((a, b) => b.age - a.age) // 降序
  .slice(0, 3)                   // 取前3
  .map(u => u.name);             // 提取姓名

console.log(result); // ['Joe', 'Ann', 'Bob']