reduce

reduce

1. 两个参数，第一个是回调函数，第二个是初始值

   1. 回调函数里有四个参数：

      1. pre累加器

      2. 当前数组元素

      3. 索引

      4. 数组

         [图片上传失败...(image-7b3874-1645235847602)]

常见用法

1. 数组所有值求和

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n117" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var arr = [1, 2, 3, 4, 5, 5]
      function Sum(arr) {
      return arr.reduce((pre,cur,index)=>pre+cur,0)
      }
      console.log(Sum(arr));</pre>

2. 数组中对象求和

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n124" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var arr = [
      {
      x:5
      },
      {
      x:5
      },
      {
      x:5
      },

      ]
      function ObjSum(arr) {
      return arr.reduce((pre,cur)=>pre+cur.x,0)
      }
      console.log(ObjSum(arr));</pre>

3. 将二维数组转化成一维数组

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n131" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var arr = [[1], [2], [3], [1]]
      function arrO(arr) {
      return arr.reduce((pre, cur) => [...pre,...cur],[])
      }
      console.log(arrO(arr));</pre>

4. 求数组中出现次数最多的元素：用in 关键字判断对象中是否有这个属性 记得属性加引号。

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n107" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var a = ['1111', '1111', '22', '2', '34', '33333', '33333']
      function ObyO(arr) {
      return arr.reduce((pre, cur) => {
      if (cur in pre) {
      pre[cur]++
      } else {
      pre[cur]=1
      }
      return pre
      },{})
      }
      console.log(ObyO(a));</pre>

5. 给数组里的对象分类

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="java" cid="n100" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var obj =[
      {name:'Alice',age:20},
      {name:'Yep',age:21},
      {name:'ls',age:22},
      {name:'zs',age:23},
      ]
      function gui(obj, fanlei) {
      return obj.reduce((pre, cur) => {
      var key = cur[fanlei]
      if (!pre[key]) {
      pre[key]=[]
      }
      pre[key].push(cur)
      return pre
      },{})
      }
      console.log(gui(obj,'age'));</pre>

6. 结构数组里的对象，并且合成一个数组

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n92" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;"> var obj = [
      {
      name: 'ls',
      books: ['asd', 'sad', 'asddasd'],
      age:20
      },
      {
      name: 'za',
      books: ['qasd', 'qsad', 'qasddasd'],
      age:20
      },
      {
      name: 'pa',
      books: ['pasd', 'pqsad', 'pqasddasd'],
      age:20
      },
      ]
      function abc(obj) {
      return obj.reduce((pre, cur, index) => {
      return [...pre,...cur.books]
      },[])
      }
      console.log(abc(obj));</pre>

7. 数组去重

   1. <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" cid="n84" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">var a = [1, 2, 1, 2, 3, 2, 1, 3, 4, 5, 6, 7, 5, 4, 6, 7]
      function Mysort(arr) {
      for (var i = 0; i < arr.length; i++){
      for (var j = 0; j < arr.length; j++){
      if (arr[j] > arr[j + 1]) {
      var temp = arr[j]
      arr[j] = arr[j + 1]
      arr[j+1]=temp
      }
      }
      }
      return arr
      }
      Mysort(a)

      function Myslice(arr) {
      return arr.reduce((pre, cur, index) => {
      if (pre.length == 0 || pre[pre.length - 1] !== cur) {
      pre.push(cur)
      }
      return pre
      },[])
      }
      console.log(Myslice(a))</pre>

8. promise：暂缓

9. 管道函数：暂缓