前端数组
一、核心操作方法
增删元素
push()
:尾部添加元素,返回新长度pop()
:删除并返回最后一个元素unshift()
:头部添加元素,返回新长度shift()
:删除并返回第一个元素splice()
:通过删除/替换元素修改原数组,支持插入新元素合并与分割
concat()
:合并数组生成新数组,不改变原数组slice()
:返回指定索引区间的浅拷贝数组
二、遍历与转换方法
遍历处理
map()
:遍历并返回新数组(如提取特定字段、格式化数据)filter()
:筛选符合条件元素生成新数组forEach()
:简单遍历元素,无返回值find()
:返回首个符合条件的元素值聚合运算
reduce()
:累积计算数组元素(如求和、统计)join()
:将元素拼接为字符串(可选分隔符)
三、其他实用方法
indexOf()
/includes()
:查找元素位置或存在性sort()
:排序数组(需注意 Unicode 比较问题)copyWithin()
:复制数组内元素覆盖指定位置Array.from()
:将类数组对象(如arguments
)转为数组
四、类数组对象与转换
类数组对象(如 NodeList
、函数 arguments
)特点:
拥有
length
属性和数字索引访问无法直接使用数组方法
转换方法:
Array.from()
或[...arrayLike]
(扩展运算符)
五、使用注意事项
性能敏感场景:避免在大数据量时频繁使用
splice
、unshift
等触发数组重排的方法深浅拷贝:
slice
、concat
等为浅拷贝,嵌套对象需使用深拷贝策略链式调用:支持
map().filter().reduce()
等链式操作,提升代码简洁性
// 示例:map 格式化数据 const tableData = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; const idArr = tableData.map(v => v.id); // [1, 2]