领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

JS中filter,map,reduce函数的使用

nixiaole 2024-11-14 18:37:51 知识剖析 14 ℃

// 1 filter 过滤

// filter中的函数有一个要求,必须返回一个boolean值,

// 当返回是true时,函数内部会自动将这次回调的n加入到新的数组中

// 当返回是false时, 函数内部会过滤掉这次的n。

// 例:取数组中小于100的数。

const nums = [10,20,30,40,100,120,200];

let newNums = nums.filter(function(n){

return n < 100;

});

console.log(newNums);

// 2 map 将数据进行变化,可以省去循环的过程

let newNum2 = newNums.map(function(n){

return n*2;

});

// 3 reduce函数的使用

// 对数组中的内容进行汇总

// 可以传两个参数,function(preValue,n){} = 第一个参数, 0 = 第二个参数

// 现在newNums有四个值[10,20,30,40]

// 进行四次循环,

// 第一次循环 preValue=0,n=10

// 第二次循环 如果返回100,那preValue就=100, n=20

// 第三次循环 如果返回100,那preValue就=100, n=30

// 第四次循环 如果返回100,那preValue就=100, n=40

// preValue就是得到上一次函数的返回值

newNums.reduce(function(preValue,n){

return 100

},0);

//例

// 第一次循环 preValue=0,n=10

// 第二次循环 preValue=10,n=20

// 第三次循环 preValue=30,n=30

// 第四次循环 preValue=60,n=40,最后再相加=100

let total = newNums.reduce(function(preValue,n){

return preValue+n;

},0); // 1000

// 我们将上面三个函数写在一起,最后=100

let total = nums.filter(function(n){

return n < 100

}).map(function(n){

return n * 2

}).reduce(function(preValue,n){

return preValue+n;

},0);

// 最后简写

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n) => pre + n);

Tags:

最近发表
标签列表