前端数组

admin9个月前 (05-13)it知识539

一、核心操作方法

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

相关文章

个人学习计划

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

炎热的夏天

夏天是一个充满活力和热情的季节,炎热的的气息让人感到无力和疲惫。但是,这个季节也有着许多美好的回忆和乐趣,让我们一起来看看夏天的美好与炎热吧。首先,夏天的天气非常炎热,太阳高照,蓝天白云,气温高达30...

马斯洛理论

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

故事分解结构

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

如果百度不收录,如何提高网站人气

假设你是一个新兴的瑜伽品牌,你创建了一个网站来宣传你的瑜伽课程和品牌。然而,你发现百度搜索引擎并没有收录你的网站,这导致你的网站流量和人气较低。以下是你可以采取的一些策略来提高网站人气:优化网站结构:...

定量化语言

定量化语言是指在编程中,使用数值型数据类型来存储和处理数据,以便进行数值计算和数据分析。这种语言通常支持各种数学运算符和函数,以及各种数据结构和算法,可以帮助程序员更高效地处理数据。以下是一些关于定量...

发表评论

访客

看不清,换一张

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