前端数组

admin3周前 (05-13)it知识87

一、核心操作方法

  1. 增删元素

    • push():尾部添加元素,返回新长度 

    • pop():删除并返回最后一个元素 

    • unshift():头部添加元素,返回新长度 

    • shift():删除并返回第一个元素 

    • splice():通过删除/替换元素修改原数组,支持插入新元素 

  2. 合并与分割

    • concat():合并数组生成新数组,不改变原数组 

    • slice():返回指定索引区间的浅拷贝数组 


二、遍历与转换方法

  1. 遍历处理

    • map():遍历并返回新数组(如提取特定字段、格式化数据)

    • filter():筛选符合条件元素生成新数组 

    • forEach():简单遍历元素,无返回值 

    • find():返回首个符合条件的元素值 

  2. 聚合运算

    • reduce():累积计算数组元素(如求和、统计)

    • join():将元素拼接为字符串(可选分隔符)


三、其他实用方法

  • indexOf() / includes():查找元素位置或存在性 

  • sort():排序数组(需注意 Unicode 比较问题)

  • copyWithin():复制数组内元素覆盖指定位置 

  • Array.from():将类数组对象(如 arguments)转为数组 


四、类数组对象与转换

类数组对象(如 NodeList、函数 arguments)特点:

  • 拥有 length 属性和数字索引访问 

  • 无法直接使用数组方法

  • 转换方法:Array.from() 或 [...arrayLike](扩展运算符)


五、使用注意事项

  • 性能敏感场景‌:避免在大数据量时频繁使用 spliceunshift 等触发数组重排的方法 

  • 深浅拷贝‌:sliceconcat 等为浅拷贝,嵌套对象需使用深拷贝策略 

  • 链式调用‌:支持 map().filter().reduce() 等链式操作,提升代码简洁性 

// 示例:map 格式化数据
const tableData = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const idArr = tableData.map(v => v.id); // [1, 2]


标签: 分享IT知识

相关文章

职场人如何写季度总结

作为职场人,写季度总结是一个展示自己工作成果和总结经验教训的机会。以下是一些撰写季度总结的建议:明确总结的目的:季度总结的目的是为了向上级领导汇报本季度的工作进展、成果和教训,以及下季度的工作计划。因...

优美程序是怎样的

程序优美是一个主观的概念,每个人可能会有不同的看法。然而,以下是一些可能导致程序优美的因素:简洁性:优美的程序应该尽可能地简洁明了。这意味着应该使用尽可能少的数据结构和算法,以及尽可能简单的代码。可读...

享受工作:找到事业与生活的平衡点

工作是我们日常生活中不可或缺的一部分。我们花费大量的时间和精力在工作中,因此,如何享受工作并找到事业与生活的平衡点就显得尤为重要。在这篇文章中,我们将探讨如何享受工作,让事业和生活愉快并行。首先,了解...

关于夏天

在一个炎热的午后,阳光穿过树叶的缝隙,洒在公园的草地上。空气中弥漫着夏日的气息,那是炎热中夹杂着淡淡的花香,还有草地的清新味道。在这个充满活力的季节,夏天以其独特的方式展示着它的魅力。夏天是一个充满色...

夏天的台风

夏天,是一个充满活力和生命力的季节,但同时也伴随着台风的出现。每年的这个时期,台风如同一股强大的自然力量,给人们的生命和财产带来了一定的威胁。在台风的肆虐中,可以看到大自然的威力与无情。台风带来的强风...

个人学习计划

学习计划是一个帮助你提高学习效率和使用时间的有效工具。以下是一个可能的学习计划:目标设定。 在开始学习之前,明确你的学习目标和目的地,这有助于你制定实际可行的计划。分解任务。 将大...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。