一说到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.
//过滤年龄大于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
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
2、forEach()
语法:array.forEach(function(currentValue, index, arr), thisValue)
参数用法同上
- 1.
- 2.
//循环输出每个参数
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);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
我们在代码中将10的值改成20后,加了一个return,但是运行结果显示还是打印了7次index的值,这就是forEach的一个缺点,只有循环结束才能停止。那如何解决呢?
3、some()
语法:array.some(function(currentValue,index,arr),thisValue)
参数用法同上
- 1.
- 2.
//把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);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
上面的代码中运行结果只会打印三次index的值,通过some就可以完美解决forEach()的不足,开发过程中就看大家的需要就行选择。
4、every()
语法:array.every(function(currentValue,index,arr), thisValue)
参数用法同上
- 1.
- 2.
//判断每个元素的值是否都大于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);
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
5、reduce()
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数说明:
total:必需。初始值, 或者计算结束后的返回值。
currentValue: 必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
//计算所有元素的和
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
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
6、合并数组
用法:var arr = [...数组1,...数组2]
结果:将数组2的元素值拼接到数组1元素值后面
- 1.
- 2.
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]
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
【编辑推荐】