JavaScript 数组方法全解析：从基础到高阶应用

📚 基础操作方法

1. push() / pop()

// 添加元素到数组末尾
let fruits = ['苹果'];
fruits.push('香蕉'); // ['苹果', '香蕉']

// 移除最后一个元素
const last = fruits.pop(); // '香蕉'，数组变回 ['苹果']

场景：实现栈结构（后进先出）

2. shift() / unshift()

javascript
// 移除第一个元素
const first = fruits.shift(); // '苹果'

// 添加元素到开头
fruits.unshift('芒果'); // ['芒果']

场景：队列操作（先进先出）

3. splice()

javascript
const arr = [1, 2, 3, 4];
// 从索引1开始删除1个元素，并插入'a'
arr.splice(1, 1, 'a'); // [1, 'a', 3, 4]

特性：

• 修改原数组
• 可同时实现删除/插入
  场景：动态修改数组内容

---

🚀 高阶函数（不修改原数组）

4. map()

javascript
const prices = [10, 20, 30];
const discounted = prices.map(price => price * 0.8); // [8, 16, 24]

场景：数据格式转换（如你的合同金额格式化）

5. filter()

javascript
const numbers = [12, 5, 8, 130];
const bigNumbers = numbers.filter(n => n > 10); // [12, 130]

场景：表格数据筛选（类似你代码中的权限过滤）

6. reduce()

javascript
const total = [1, 2, 3].reduce((sum, num) => sum + num, 0); // 6

进阶用法：

javascript
// 按属性分组（类似合同数据分类）
const contracts = [
  { type: '采购', amount: 100 },
  { type: '施工', amount: 200 }
];

const group = contracts.reduce((acc, cur) => {
  acc[cur.type] = (acc[cur.type] || 0) + cur.amount;
  return acc;
}, {});
// { 采购: 100, 施工: 200 }

---

🔍 搜索与排序

7. find() / findIndex()

javascript
const users = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' }
];

const user = users.find(u => u.id === 2); // {id:2, name:'李四'}
const index = users.findIndex(u => u.id === 2); // 1

场景：表格行数据定位（类似你的 handleRowClick）

8. sort()

javascript
// 数字排序
[3, 1, 4].sort((a, b) => a - b); // [1, 3, 4]

// 对象排序（按合同金额）
listData.value.sort((a, b) => a.contractTotalMoney - b.contractTotalMoney);

注意：会修改原数组

---

🛠️ 其他实用方法

9. slice()

javascript
const arr = [1, 2, 3, 4];
const subArr = arr.slice(1, 3); // [2, 3] 

特性：创建数组副本的常用方式

10. concat()

javascript
const newArr = [1, 2].concat([3, 4]); // [1,2,3,4]

场景：数组合并（替代扩展运算符）

11. flat()

javascript
[1, [2, [3]]].flat(2); // [1, 2, 3]

场景：处理嵌套的API响应数据

---

💡 使用建议

1. 链式调用：合理组合方法

   javascript
   contracts
     .filter(c => c.amount > 100)
     .map(c => ({ ...c, amount: c.amount * 1.1 }))
     .sort((a, b) => b.amount - a.amount)
   

2. 性能优化：

   • 避免在循环中嵌套高阶函数
   • 大数据量时优先使用 for 循环

3. Vue 响应式：

   javascript
   // 确保触发视图更新
   listData.value = [...listData.value]; 
   

---

总结

方法类型	代表方法	使用场景
数据转换	map、flatMap	金额格式化、数据清洗
数据筛选	filter、find	权限过滤、搜索功能
数据聚合	reduce、some、every	统计合计、表单校验
数组操作	splice、slice	动态增删数据项
结构处理	flat、concat	处理嵌套数据、合并数据集