js |高阶函数 filter map reduce|箭头函数的使用
程序员文章站
2022-05-10 19:51:56
...
高阶函数 filter map reduce
1.filter()
filter()中回调函数的返回值必须为一个boolean值
当返回值为true时：函数内部会自动将这次回调n加入到新的数组中
当返回值为false时:函数内部会过滤掉这次的n
1.1 filter()代码展示-----获取数据小于100的数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
const nums=[10,20,111,222,444,40,50];
let newNums = nums.filter(function (n) {
return n<100;
});
console.log(newNums)
</script>
</html>1.2filter()效果展示-----获取数据小于100的数字
1.3filter() 源码展示–typescript
filter<S extends T>(callbackfn: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
/**
* Returns the elements of an array that meet the condition specified in a callback function.
* @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array.
* @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
*/
filter(callbackfn: (value: T, index: number, array: T[]) => any, thisArg?: any): T[];
/**
* Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
*/2.map()
2.1 map()代码展示-----获取数据小于100的数字将其结果乘以2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
const nums=[10,20,111,222,444,40,50];
let newNums = nums.filter(function (n) {
return n<100;
});
console.log(newNums);
let newNums2 = newNums.map(function (n) {
return n*2;
});
console.log(newNums2)
</script>
</html>1.2map()效果展示-----获取数据小于100的数字将其结果乘以2
2.3map()—源码展示–typescript
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
/**
* Returns the elements of an array that meet the condition specified in a callback function.
* @param callbackfn A function that accepts up to three arguments. The filter method calls the callbackfn function one time for each element in the array.
* @param thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
*/3.reduce
reduce作用：对数组进行递归所有全部内容进行汇总
3.1reduce()代码展示—获取数据小于100的数字进行相加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
const nums=[10,20,111,222,444,40,50];
let newNums = nums.filter(function (n) {
return n<100;
});
console.log(newNums);
let totalNums3 = newNums.reduce(function (preValue,value) {
return preValue+value;
// 第一次结果： preValue 0 value 10
// 第二次结果: preValue 10 value 20
// 第三次结果: preValue 30 value 40
// 第四次结果: preValue 70 value 50
// return 120
},0)
console.log(totalNums3)
</script>
</html>3.2reduce()效果展示—获取数据小于100的数字进行相加
3.3reduce()源码展示–typescript
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
/**
* Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
*/
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
/**
* Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
* @param callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array.
* @param initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
*/4.对以上使用箭头函数进行以上全部效果-----对原数组获取小于100的元素，然后乘以2再将结果汇总相加
4.1箭头函数代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
const nums=[10,20,111,222,444,40,50];
let total = nums.filter(n=>n<100).map(n=>n*2).reduce((preValue,value)=>preValue+value);
console.log(total);
</script>
</html>