一,JS中filter()方法的使用
filter用于对数组进行过滤。
它创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素:filter()
把传入的函数依次作用于每个元素,然后根据返回值是true
还是false
决定保留还是丢弃该元素。
注意:filter()不会对空数组进行检测、不会改变原始数组
1. 用法:Array.filter(function(currentValue, indedx, arr), thisValue),其中,函数 function 为必须,数组中的每个元素都会执行这个函数。且如果返回值为 true,则该元素被保留;
函数的第一个参数 currentValue 也为必须,代表当前元素的值。
2.实例
返回数组nums中所有大于0的元素
let arr = [-1, 2, -3, 4, -5, 6, -7, 8, 9-, 10];
let res = arr.filter((num) => {
return num > 0;
});
console.log(res); // [2, 4, 6, 8, 10]
//去除空格
var arr = ['0',1,2,3,4,"",5,1,4,'0',""];
var arr_filter = arr.filter(function(x){
return x;/* 筛选空格 */
})
console.log(arr_filter)
//利用filter,可以巧妙地去除Array的重复元素:
var arr_repeat = ['A','B','A','B','B','C','A','D'];
var arr_filter = arr_repeat.filter(function(element,index,self){
return self.indexOf(element) == index;
})
console.log(arr_filter);//返回['A','B','C','D']
//去除重复元素依靠的是indexOf总是返回第一个元素的位置,后续的重复元素位置与indexOf返回的位置不相//等,因此被filter滤掉了
另外filter()
接收的回调函数,其实可以有多个参数。通常仅使用第一个参数,表示Array
的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身;
二,JS数组reduce()方法
reduce()方法是处理数组的方法,它接收一个函数和一个初始值,然后将数组中的每个元素和初始值当作参数传入这个函数中 进行处理,最后返回和初始值相同类型的值。
1.用法:
例如,将某个值减去数组中的每个元素:
var items = [5, 10, 15];
var reducer = function minus(minusSum, item) {
return minusSum - item;
}
var total = items.reduce(reducer, 61);
console.log(total); // 31
把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字。输入:['adam', 'LISA', 'barT']
,输出:['Adam', 'Lisa', 'Bart']
function normalize(arr){
if(!arr){
alert('the arr is empty!');
return;
}
return arr.map(function(s){
var temparr = [];
for(var j=0; j<s.length; j++){
var str = s.substr(j, 1);
if(j===0){
str = str.toUpperCase();
}else{
str = str.toLowerCase();
}
temparr.push(str);
}
s = temparr.reduce(function(x, y){
return x + y;
});
return s;
});
}
reduce()是一个很强大的方法,我们还可以用它来处理更复杂的业务逻辑。
例如,求购物车中商品的总价,购物车数据如下:
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
]
//然后运用reduce()方法可以轻松的获得所有商品的总价格:
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, 0);
console.log(count); // 85
如果用户有10元的优惠券的话,我们只需要将 -10作为初始值传入reduce()方法中就可以了。
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
console.log(count); // 75
我们给例子增加一点难度,商城在搞促销,对商品有一定的折扣,我们应该如何求得商品的总价格呢?利用reduce方法也可以很容易解决的。
var goodList = [
{
good: 'paper',
price: 12
},
{
good: 'book',
price: 58
},
{
good: 'CD',
price: 15
}
];
var dis = {
paper: 0.5,
book: 0.8,
CD: 0.2
}
var count = goodList.reduce(function(prev, cur) {
return cur.price + prev;
}, -10);
var qcount = goodList.reduce(function(prev, cur) {
return cur.price * dis[cur.good] + prev;
}, 0);
console.log(count, qcount); // 75 55.4
再举一个例子,如何求得一串字符串中每个字母出现的次数?如果我们不用reduce()方法也可以实现的,代码如下:
var arrString = 'fghffgaga';
var strArr = arrString.split('');
var rel = {};
var count = 1;
for (var i = 0; i < strArr.length; i++) {
for (var j = i + 1; j < strArr.length; j++) {
if (strArr[i] == strArr[j]) {
count++;
strArr.splice(j, 1);
j = j - 1;
}
}
var qcount = count;
count = 1;
rel[strArr[i]] = qcount;
}
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}
利用reduce()方法的代码如下:
var arrString = 'fghffgaga';
var rel = arrString.split('').reduce(function(res, cur) {
res[cur] ? res[cur] ++ : res[cur] = 1
return res;
}, {})
console.log(rel); // {f: 3, g: 3, h: 1, a: 2}