老生常谈JavaScript 数组方法

 更新时间:2025年03月04日 10:18:34   作者:Drunken_moon  
本文详细介绍了JavaScript数组方法的分类和具体用法,涵盖了数组的添加/删除、查找/访问、遍历、排序/反转、转换以及一些其他实用方法,每种方法都提供了简要的解释和示例代码,帮助读者更好地理解和应用这些方法,感兴趣的朋友一起看看吧

1. 数组方法的分类

JavaScript 数组方法可以大致分为以下几类:

  • 添加/删除元素:push(),pop(),shift(),unshift(),splice()
  • 查找/访问元素:indexOf(),lastIndexOf(),find(),findIndex()
  • 遍历数组:forEach(),map(),filter(),reduce()
  • 排序/反转:sort(),reverse()
  • 数组转换:join(),toString(),slice(),concat()
  • 其他实用方法:includes(),fill(),flat(),flatMap()

2. 添加和删除元素

2.1 🌟push():向数组末尾添加元素

push() 方法用于向数组末尾添加一个或多个元素,并返回新数组的长度。

let arr = [1, 2, 3];
arr.push(4, 5); // 向数组末尾添加 4 和 5
console.log(arr); // [1, 2, 3, 4, 5]

2.2 🌟pop():移除数组末尾的元素

pop() 方法用于移除数组末尾的元素,并返回被移除的元素。

let arr = [1, 2, 3, 4];
let removed = arr.pop(); // 移除数组末尾的 4
console.log(arr); // [1, 2, 3]
console.log(removed); // 4

2.3 shift():移除数组第一个元素

shift() 方法用于移除数组第一个元素,并返回被移除的元素。

let arr = [1, 2, 3, 4];
let removed = arr.shift(); // 移除数组第一个元素 1
console.log(arr); // [2, 3, 4]
console.log(removed); // 1

2.4 unshift():向数组开头添加元素

unshift() 方法用于向数组开头添加一个或多个元素,并返回新数组的长度。

let arr = [2, 3, 4];
arr.unshift(1, 0); // 向数组开头添加 1 和 0
console.log(arr); // [0, 1, 2, 3, 4]

2.5 🌟splice():从数组中添加或删除元素

splice() 方法功能强大,可以用于添加、删除或替换数组中的元素。

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, "a", "b"); // 从索引 2 开始,删除 1 个元素,插入 "a" 和 "b"
console.log(arr); // [1, 2, "a", "b", 4, 5]

3. 查找和访问元素

3.1 🌟indexOf():查找元素的索引

indexOf() 方法返回指定元素在数组中的第一个索引,如果不存在则返回 -1。

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3); // 查找 3 的索引
console.log(index); // 2

3.2 lastIndexOf():查找元素的最后一个索引

lastIndexOf() 方法返回指定元素在数组中的最后一个索引,如果不存在则返回 -1。

let arr = [1, 2, 3, 2, 4];
let index = arr.lastIndexOf(2); // 查找 2 的最后一个索引
console.log(index); // 3

3.3 🌟find():查找满足条件的第一个元素

find() 方法返回数组中满足条件的第一个元素。

let arr = [1, 2, 3, 4, 5];
let result = arr.find(item => item > 3); // 查找第一个大于 3 的元素
console.log(result); // 4

3.4 🌟findIndex():查找满足条件的第一个元素的索引

findIndex() 方法返回数组中满足条件的第一个元素的索引。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(item => item > 3); // 查找第一个大于 3 的元素的索引
console.log(index); // 3

4. 遍历数组

4.1 🌟forEach():遍历数组并执行回调函数

forEach() 方法对数组中的每个元素执行一次回调函数。

let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
  console.log(item);
});
// 输出:
// 1
// 2
// 3
// 4
// 5

4.2 🌟map():创建一个新数组,每个元素经过回调函数处理

map() 方法对数组中的每个元素执行回调函数,并返回一个新数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(item => item * 2); // 每个元素乘以 2
console.log(newArr); // [2, 4, 6, 8, 10]

4.3 🌟filter():创建一个新数组,包含满足条件的元素

filter() 方法返回一个新数组,包含所有满足条件的元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(item => item > 3); // 筛选大于 3 的元素
console.log(newArr); // [4, 5]

4.4 🌟reduce():将数组中的值累积处理,返回一个单一的结果

reduce() 方法对数组中的每个元素执行回调函数,并将结果累积到一个单一的输出值。

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0); // 计算数组元素的总和
console.log(sum); // 15

5. 排序和反转

5.1 🌟sort():对数组元素进行排序

sort() 方法对数组中的元素进行排序,默认按字符串顺序排序。

let arr = [3, 1, 4, 2];
arr.sort(); // 默认按字符串顺序排序
console.log(arr); // [1, 2, 3, 4]
// 如果需要按数字顺序排序,需要传入比较函数:
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3, 4]

5.2 reverse():反转数组中元素的顺序

reverse() 方法反转数组中元素的顺序。

let arr = [1, 2, 3, 4, 5];
arr.reverse(); // 反转数组
console.log(arr); // [5, 4, 3, 2, 1]

6. 数组转换

6.1 join():将数组元素连接成一个字符串

join() 方法将数组中的元素连接成一个字符串,默认用逗号分隔。

let arr = [1, 2, 3, 4, 5];
let str = arr.join(", "); // 用逗号和空格分隔
console.log(str); // "1, 2, 3, 4, 5"

6.2 toString():将数组转换为字符串

toString() 方法将数组转换为字符串,默认用逗号分隔。

let arr = [1, 2, 3, 4, 5];
let str = arr.toString(); // 转换为字符串
console.log(str); // "1,2,3,4,5"

6.3 slice():返回数组的一个浅拷贝

slice() 方法返回数组的一个浅拷贝,不修改原数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4); // 从索引 1 到 4(不包括 4)
console.log(newArr); // [2, 3, 4]

6.4 concat():合并两个或多个数组

concat() 方法用于合并两个或多个数组,返回一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2); // 合并数组
console.log(newArr); // [1, 2, 3, 4, 5, 6]

7. 其他实用方法

7.1 🌟includes():检查数组是否包含某个值

includes() 方法用于检查数组是否包含某个值,返回布尔值。

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3); // 检查是否包含 3
console.log(hasThree); // true

7.2 fill():用一个固定值填充数组的指定部分

fill() 方法用一个固定值填充数组的指定部分。

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4); // 从索引 1 到 4 填充 0
console.log(arr); // [1, 0, 0, 0, 5]

7.3 flat():将多维数组扁平化为一维数组

flat() 方法将多维数组扁平化为一维数组。

let arr = [1, [2, [3, 4]]];
let newArr = arr.flat(2); // 深度为 2 的扁平化
console.log(newArr); // [1, 2, 3, 4]

7.4 flatMap():扁平化数组并映射

flatMap() 方法先对数组中的每个元素执行回调函数,然后将结果扁平化为一维数组。

let arr = [1, 2, 3];
let newArr = arr.flatMap(item => [item, item * 2]); // 每个元素映射为两个值
console.log(newArr); // [1, 2, 2, 4, 3, 6]

到此这篇关于老生常谈JavaScript 数组方法的文章就介绍到这了,更多相关JavaScript 数组方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序设置滚动条过程详解

    微信小程序设置滚动条过程详解

    这篇文章主要介绍了微信小程序设置滚动条过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • 显示/隐藏侧边栏

    显示/隐藏侧边栏

    显示/隐藏侧边栏...
    2006-10-10
  • 利用js获取下拉框中所选的值

    利用js获取下拉框中所选的值

    本文介绍利用js取到下拉框中选择的值。并附上实例代码,需要的朋友可以参考下
    2016-12-12
  • JavaScript页面实时显示当前时间实例代码

    JavaScript页面实时显示当前时间实例代码

    最近因为项目需要,有个需求是让实时显示当前时间,然后想想这不简单吗,自己就动手敲代码,但是发现一个问题,通过getMonth()得到月份,总是会比当前月份少1,深深觉得实践出真知啊…之前觉得Date对象挺简单的,有很多细节都没有注意。下面这篇文章就给大家详细介绍下。
    2016-10-10
  • 详解JavaScript (!!) 中的双感叹号是干什么用的

    详解JavaScript (!!) 中的双感叹号是干什么用的

    JavaScript 不是静态语言,而是动态语言,这意味着变量可以引用或保存任何类型的值,此外,该类型可以随时更改,这篇文章主要介绍了JavaScript (!!) 中的双感叹号作用,需要的朋友可以参考下
    2022-09-09
  • 基于layui轮播图满屏是高度自适应的解决方法

    基于layui轮播图满屏是高度自适应的解决方法

    今天小编就为大家分享一篇基于layui轮播图满屏是高度自适应的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中html画布的使用与页面存储技术详解

    JavaScript中html画布的使用与页面存储技术详解

    这篇文章主要介绍了JavaScript中html画布的使用与页面存储技术,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • js过滤HTML标签完整实例

    js过滤HTML标签完整实例

    这篇文章主要介绍了js过滤HTML标签实现方法,以完整实例形式分析了JavaScript使用正则表达式过滤HTML标签的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 微信小程序购物商城系统开发系列-目录结构介绍

    微信小程序购物商城系统开发系列-目录结构介绍

    这篇文章主要介绍了微信小程序购物商城系统开发系列-目录结构介绍,有兴趣的可以了解一下。
    2016-11-11
  • 利用原生JS自动生成文章标题树的实例

    利用原生JS自动生成文章标题树的实例

    网上关于生成文章标题树的示例很多,这篇文章介绍的是利用原生JS实现自动生成文章标题树,实现过程很简单,有需要的可以参考借鉴。
    2016-08-08

最新评论