map()、reduce()、filter()三者的区别

①如果需要数组 请使用 .map( )

map方法接受一个匿名函数为参数 这个匿名函数又有三个参数 (成员 索引 被操作数组本身)

第一个参数是当前数组中的第几个成员

第二个参数是当前数组成员在数组中的索引,就是第几个

第三个参数是调用map方法的那个数组本身

  <script>
    var _arr = [
      { age: 11, name: "aaa" },
      { age: 22, name: "bbb" },
      { age: 33, name: "ccc" },
    ];
    //输出数组中的年龄
    var _age = _arr.map(function (_d, inx, arr) {
      console.log(_d, inx, arr);
      return _d.age
    });
    console.log('_age: ', _age);
    //es6 写法  
    var _ageEs6 = _arr.map(v => v.age)
    console.log('_ageEs6: ', _ageEs6);
  </script>

②如果需要一个结果 请使用 .reduce( )

循环的是回调方法 数组的每个成员都进入回调 但区别在于每次回调方法返回的值 都会传递到下次回调中 相当于累加

它有两个参数 第一个是回调的方法 第二个是累计的初始值

创建一个变量  里面是一个匿名函数,参与计算,第二个参数是0,是计算的初始值   
在这里,  _n的承接计算的结果,初始值是0 0+11是11,11+22是33,33+33,结果是66, 这就是累加
  <script>
    var _arr = [
      { age: 11, name: "aaa" },
      { age: 22, name: "bbb" },
      { age: 33, name: "ccc" },
    ];
    var _ageYear = _arr.reduce(function (_n, _y) {
      console.log("-----: " + _n + " : " + _y.age);
      return _n + _y.age
    }, 0)
    console.log('_ageYear: ', _ageYear);
    //es6写法
    var _ageYearEs6 = _arr.reduce((_n, _y) => _n + _y.age, 0);
    console.log('_ageYearEs6: ', _ageYearEs6);
  </script>

③如果需要过滤出一个结果 请使用 .filter( )

filter是过滤用 返回也是一个数组

filter方法它接收的是一个匿名函数 参数就是数组对象中的每一个成员,进行比较

也就是说,只要filter方法的回调函数中的比较运算符结果为true,那么符合条件的对象就会被包在一个数组中返回

比较结果为false的就会被过滤掉

  <script>
    var _arr = [
      { age: 11, name: "aaa" },
      { age: 22, name: "bbb" },
      { age: 33, name: "ccc" },
    ];
    //过滤一个名为ccc的数据出来
    var _arrName = _arr.filter(function (e) {
      return e.name === 'ccc'
    })
    console.log('_arrName: ', _arrName);
    //es6 写法
    var _arrNameEs6 = _arr.filter(v => v.name === 'ccc')
    console.log('_arrNameEs6: ', _arrNameEs6);
  </script>