Js之 filter、map、reduce的使用

已知数组

const nums = [10, 20, 111, 222, 333, 40, 50];

1.filter()方法

1.语法: array.filter(function(item,index,arr){}, thisValue)
2. 参数item为必填参数
3. filter():必须返回一个boolean值
4. 当函数返回true时,函数内部会自动将这次回调的元素加入到新的数组中
5. 当函数返回false时,函数内部会自动过滤掉这次回调的元素
6. 如果没有符合条件的元素则返回空数组

let newRes = nums.filter(function (item, index, arr) {
  console.log("当前元素", item);
  console.log("元素的索引", index);
  console.log("当前数组", arr);
  return item < 100;
 });
console.log("newRes", newRes); // [10,20,40,50]

2.map()方法

1. 语法:array.map(function(item,index,arr){}, thisValue)
2. 参数item为必填参数
3. 返回一个新数组，数组中的元素与原始数组有相对应的关系

let newItems = nums.map(function (item, index, arr) {
  console.log("当前元素", item);
  console.log("元素的索引", index);
  console.log("当前数组", arr);
  return item * 2;
});
console.log(newItems); // [20, 40, 222, 444, 666, 80, 100]

3.reduce()方法

1. 语法:array.reduce(function(total, item, index, arr){}, initialValue)
2. 参数total、item为必填参数
3. 作用:对数组中的所有内容进行汇总
4. 对于空数组是不会执行回调函数的

const ages = [32, 33, 16, 40];
let resNum = ages.reduce(function (total, item, index, arr) {
   console.log('返回值',total);
   console.log("当前元素", item);
   console.log("元素的索引", index);
   console.log("当前数组", arr);
   return total + item;
 }, 0);
 console.log("resNum", resNum); // 121

4.简写：

let resTol = nums.filter(function (item) {
  return item < 100;
}).map(function(item){
  return item*2
}).reduce(function(total,item){
  return total+item
});
console.log("resTol", resTol);//  240

总结:
1.filter() 不会对空数组进行检测,filter() 不会改变原始数组
2.map() 不会对空数组进行检测,map() 不会改变原始数组