千家信息网

常用的JavaScript数组方法有哪些

发表于:2025-01-19 作者:千家信息网编辑
千家信息网最后更新 2025年01月19日,小编给大家分享一下常用的JavaScript数组方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、filter()语法:array.filter(function(curr
千家信息网最后更新 2025年01月19日常用的JavaScript数组方法有哪些

小编给大家分享一下常用的JavaScript数组方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

1、filter()

语法:

array.filter(function(currentValue,index,arr), thisValue)

参数说明:
currentValue:当前元素对象(必选)
index:当前元素的索引值(可选)
arr:当前元素属于的数组对象(可选)
thisValue:对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue ,"this" 的值为 "undefined"(可选)

//过滤年龄大于10的元素 var ages = [5, 32, 7, 10, 33, 12, 40]; var res = ages.filter(function (currentValue) {   return currentValue > 10; }) console.log(res.toString()); //输出结果:32,33,12,40  //箭头函数写法 var res1 = ages.filter(item => item > 10) console.log(res.toString());

输出结果

32,33,12,40

2、forEach()

语法:

array.forEach(function(currentValue, index, arr), thisValue)

参数用法同上

//循环输出每个参数 var ages = [5, 32, 7, 10, 33, 12, 40]; ages.forEach(function (currentValue, index) {   console.log("参数:" + currentValue + "索引:" + index); })   //箭头函数写法 ages.forEach((item, index) => {   console.log("参数:" + item + "索引:" + index); })

再看下面一段代码:

//把10修改成20 var ages = [5, 32, 7, 10, 33, 12, 40]; ages.forEach(function (currentValue, index) {   if (currentValue === 10) {     ages[index] = 20     return   }   console.log(index); })  console.log(ages);

我们在代码中将10的值改成20后,加了一个return,但是运行结果显示还是打印了7次index的值,这就是forEach的一个缺点,只有循环结束才能停止。那如何解决呢?

3、some()

语法:

array.some(function(currentValue,index,arr),thisValue)
参数用法同上

//把10修改成20 var ages = [5, 32, 7, 10, 33, 12, 40]; ages.some(function (currentValue, index) {   if (currentValue === 10) {     ages[index] = 20     return true   }   console.log(index); })  console.log(ages);  //把10修改成20 箭头函数 var ages = [5, 32, 7, 10, 33, 12, 40]; ages.some((item, index) => {   if (item === 10) {     ages[index] = 20     return true   }   console.log(index); })  console.log(ages);

上面的代码中运行结果只会打印三次index的值,通过some就可以完美解决forEach()的不足,开发过程中就看大家的需要就行选择。

4、every()

语法:

array.every(function(currentValue,index,arr), thisValue)
参数用法同上

//判断每个元素的值是否都大于4 var ages = [5, 32, 7, 10, 33, 12, 40];   var res = ages.some(function (currentValue) {   return currentValue > 4 }) console.log(res); //输出:true  //箭头函数 var res = ages.some(item => item > 4) console.log(res);

5、reduce()

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数说明:

total:必需。初始值, 或者计算结束后的返回值。
currentValue: 必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值

//计算所有元素的和 var numbers = [15.5, 2.3, 1.1, 4.7]; var res = numbers.reduce(function (total, currentValue) {   return total += currentValue }, 0)  console.log(res); //23.6  //计算大于4的元素的和 var result = numbers.filter(item => item > 4).reduce((total, item) => total += item, 0) console.log(result); //20.2

6、合并数组

用法:var arr = [...数组1,...数组2]
结果:将数组2的元素值拼接到数组1元素值后面

var arr = [1, 2, 3] var arr2 = [4, 5, 6]  var res = [...arr, ...arr2] console.log(res); //输出结果:[1, 2, 3, 4, 5, 6]  var res = [...arr2, ...arr] console.log(res); //输出结果: [4, 5, 6, 1, 2, 3]

看完了这篇文章,相信你对"常用的JavaScript数组方法有哪些"有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

0