前端数组

admin4个月前 (05-13)it知识225

一、核心操作方法

  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知识

相关文章

职场人如何写季度总结

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

灵动:生活中的艺术与智慧

在这个充满变化的世界里,灵动是一种独特的魅力,它让我们的生活更加丰富多彩,充满了可能性和创意。灵动不仅是一种艺术,更是一种智慧,它存在于我们的思维、情感和行动中。首先,灵动是一种艺术。在我们的生活中,...

技术与艺术的融合:创造无比魅力的结合

在人类文明的发展史上,技术与艺术如同一对形影不离的伙伴,共同推动了人类社会的进步。随着科技的飞速发展,技术与艺术的融合愈发紧密,为我们揭示了一个全新的视角,让我们重新审视这两股强大的力量。在当今数字化...

马斯洛理论

生理需求是最低层次的需求,包括人类维持自身生存的最基本要求,包括饥、渴、衣、住、性、健康方面的需求。安全需求包括两个层次,一是归属的需要,即人都有一种归属于一个群体的感情,希望成为群体中的一员,并相互...

故事分解结构

故事分解结构是一种用于分析、设计和编写故事的方法,它可以将故事分解为不同的层次,从而更好地理解故事的内在逻辑和结构。下面是故事分解结构的详细解释:节拍(beat):是故事的最小单位,包含动作和反应两个...

沟通的模型

7C模型:这是一种在商业沟通中常见的模型,旨在确保信息在传递过程中清晰、简明、准确、一致、可信、可理解和有说服力。沟通的五个W和一个H:何人(Who)何事(What)何地(Where)何时(When)...

发表评论

访客

看不清,换一张

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