前端数组操作
JavaScript数组是前端开发中最常用的数据结构之一，下面我将详细介绍数组的创建、操作和常用方法。
一、数组创建方式
字面量创建（最常用方式）：
var arr1 = []; // 空数组var arr2 = [1, 2, 3]; // 带初始值
构造函数创建：
var arr3 = new Array(); // 空数组var arr4 = new Array(4); // 长度为4的空数组var arr5 = new Array(15, 16, 17); // 带初始值
ES6新增的Array.of()：
let arr6 = Array.of(1, 2); // [1, 2]let arr7 = Array.of(3); // [3]
二、数组基本操作方法
增删元素方法
push() - 末尾添加元素，返回新长度
const arr = [1, 2, 3];arr.push(4, 5); // [1, 2, 3, 4, 5]
pop() - 删除并返回最后一个元素
const last = arr.pop(); // 5, arr变为[1, 2, 3, 4]
unshift() - 开头添加元素，返回新长度
shift() - 删除并返回第一个元素 splice() - 指定位置增删元素 其他常用方法 concat() - 合并数组，不改变原数组 join() - 数组转字符串 slice() - 截取子数组 reverse() - 反转数组 map() - 映射新数组 filter() - 过滤数组 forEach() - 遍历数组 find()/findIndex() - 查找元素/索引 格式化后端数据 实现栈和队列 栈：push()/pop() 队列：push()/shift() 数据转换arr.unshift(0); // [0, 1, 2, 3, 4]
const first = arr.shift(); // 0, arr变为[1, 2, 3, 4]
// 从索引1开始删除2个元素，并插入'a','b'arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b', 4]
const newArr = arr.concat([5, 6]); // [1, 'a', 'b', 4, 5, 6]
const str = arr.join('-'); // "1-a-b-4"const subArr = newArr.slice(1, 3); // ['a', 'b']
newArr.reverse(); // [6, 5, 4, 'b', 'a', 1]
三、高阶数组方法
const ids = tableData.map(v => v.id); // 提取id数组
const nums = [1, 2, 3, 4].filter(n => n > 2); // [3, 4]
nums.forEach(n => console.log(n));
const found = nums.find(n => n === 3); //3
四、数组使用场景
const formatted = rawData.map(item => ({ ...item, yearMonth: item.date.split('-').slice(0, 2).join('-')})) const typeMap = {aaa: "审核通过", bbb: "审核不通过"}; const formattedType = rawType.map(v => typeMap[v] || v);