![](https://i-blog.csdnimg.cn/blog_migrate/52e03d402c667401b4b6af6356ad6787.jpeg)
一说到JavaScript的数组,大家基本都能马上想起pop()、push()、shift()、unshift()、indexof()等等,今天微点阅读小编就给大家分享几个开发中常用的js数组方法即他们的用法。
需要的朋友可以参考下面文章的具体内容
1、filter()
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数说明:
currentValue
:当前元素对象(必选)
index
:当前元素的索引值(可选)
arr
:当前元素属于的数组对象(可选)
thisValue
:对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue
,"this
" 的值为 "undefined
"(可选)
1 2 3 4 5 6 7 8 9 10 11 | //过滤年龄大于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)
参数用法同上
1 2 3 4 5 6 7 8 9 10 11 | //循环输出每个参数 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); }) |
再看下面一段代码:
1 2 3 4 5 6 7 8 9 10 11 | //把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)
参数用法同上
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //把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)
参数用法同上
1 2 3 4 5 6 7 8 9 10 11 12 13 | //判断每个元素的值是否都大于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
:可选。传递给函数的初始值
1 2 3 4 5 6 7 8 9 10 11 12 13 | //计算所有元素的和 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元素值后面
1 2 3 4 5 6 7 8 9 10 | 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数组方法的文章就介绍到这了,更多
转自:微点阅读 https://www.weidianyuedu.com