美文网首页
reduce的使用与案例

reduce的使用与案例

作者: web_jianshu | 来源:发表于2020-05-13 09:08 被阅读0次

    <!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>reduce</title>

      </head>

      <body>

        <script>

          //   reduce(callback,initiaValue)会传入两个变量,回调函数(callback)和初始值(initiaValue)。

          // 1.只传回调函数 prev只取数组的第一个元素 next从数组的第二个元素开始一直往下取

          //   var arr = ["a", "b", "c", "d", "e", "f"];

          //   function noPassValue() {

          //     return arr.reduce(function(prev, next) {

          //       console.log("prev:", prev);

          //       console.log("next:", next);

          //       // =>

          //       //   prev: a;

          //       //   next: b;

          //       //   prev: a;

          //       //   next: c;

          //       //   prev: a;

          //       //   next: d;

          //       //   prev: a;

          //       //   next: e;

          //       //   prev: a;

          //       //   next: f;

          //       return prev;

          //     });

          //   }

          //   console.log(noPassValue());

          // => a

          // 2.传入回调函数和初始值时 prev只取初始值 next从数组的第一个元素开始一直往下取

          //   var arr = ["a", "b", "c", "d", "e", "f"];

          //   function passValue() {

          //     return arr.reduce(function(prev, next) {

          //       console.log("prev:", prev);

          //       console.log("next:", next);

          //       // =>

          //       // prev: {}

          //       // next: a

          //       // prev: {a: 1}

          //       // next: b

          //       // prev: {a: 1, b: 1}

          //       // next: c

          //       // prev: {a: 1, b: 1, c: 1}

          //       // next: d

          //       // prev: {a: 1, b: 1, c: 1, d: 1}

          //       // next: e

          //       // prev: {a: 1, b: 1, c: 1, d: 1, e: 1}

          //       // next: f

          //       prev[next] = 1;

          //       return prev;

          //     }, {});

          //   }

          //   console.log(passValue());

          // => {a: 1, b: 1, c: 1, d: 1, e: 1, f: 1}

          // reduce的应用

          // 1.数组求和

          //   var arr = [1, 2, 3, 4];

          //   var sum = arr.reduce(function(total, currentValue) {

          //     return total + currentValue;

          //   });

          //   console.log(sum); // => 10

          //   var eachSum = 0;

          //   arr.forEach(function(currentValue) {

          //     eachSum += currentValue;

          //   });

          //   console.log(eachSum); // => 10

          //   2.合并二维数组 与 Object.entries(obj)互逆

          //   var twoArr = [

          //     ["mu", "zi"],

          //     ["dig", "big"],

          //     ["lucky", "jiji"]

          //   ];

          //   var oneArr = twoArr.reduce(function(total, currentValue) {

          //     console.log(total);

          //     // =>  ["mu", "zi"] ["mu", "zi", "dig", "big"]

          //     return total.concat(currentValue);

          //   });

          //   console.log(oneArr);

          //   // =>  ["mu", "zi", "dig", "big", "lucky", "jiji"]

          // 3.统计一个数组中有多少个重复的单词

          // 不用reduce时:

          //   var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];

          //   function getWordCnt() {

          //     var obj = {};

          //     for (var i = 0, l = arr.length; i < l; i++) {

          //       var item = arr[i];

          //       obj[item] = obj[item] + 1 || 1;

          //     }

          //     return obj;

          //   }

          //   console.log(getWordCnt()); // => {apple: 2, orange: 3, pear: 1}

          // 用reduce时:

          var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];

          function getWordCnt() {

            return arr.reduce(function(prev, next) {

              prev[next] = prev[next] + 1 || 1;

              return prev;

            }, {});

          }

          console.log(getWordCnt()); // => {apple: 2, orange: 3, pear: 1}

        </script>

      </body>

    </html>

    相关文章

      网友评论

          本文标题:reduce的使用与案例

          本文链接:https://www.haomeiwen.com/subject/zwdbnhtx.html