js数组的迭代于归并

最新推荐文章于 2024-06-17 19:10:31 发布

ChargerBot

最新推荐文章于 2024-06-17 19:10:31 发布

阅读量81

点赞数

分类专栏：前端基础

原文链接：https://www.cnblogs.com/fsg6/p/13360593.html?utm_source=tuicool

版权

前端基础专栏收录该内容

22 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript数组中的五种迭代方法（forEach、filter、map、every、some）及强大的reduce方法。通过实例展示了如何使用这些方法简化数组操作，包括筛选、转换、判断条件以及数组归并等常见应用场景。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    /**
     * 数组迭代
     * 总结：
     *  5种迭代：forEach、filter、map、every、some
     *  参数都为回调函数，且改回调函数的参数相同，都为项，索引和数组本身
     *  除了forEach可以没有返回值，其他的都要return
     *  filter和map返回的是处理后的数组，every和some返回的是布尔值
     * 
     *  reduce - 数组归并方法（好东西，肥肠强大）
     *  reduce 接收两个参数，第一个是要执行的函数（包含4个参数prev,cur,index,arr），第二个是函数迭代的初始值(可选)
     * */
    let arr = [11, 'a', 'sd', '6', 88, 3, 12]
    // 1. forEach - 执行操作
    let newArr1 = arr.forEach((item, index, array) => {
      console.log(`第${index}项的值为${item}`)
    });

    console.log('===========')

    // 2. filter - 返回满足条件的所有项 - 返回数组
    let newArr2 = arr.filter((item, index, array) => {
      return (typeof item === "string")
    })
    console.log(newArr2)

    console.log('===========')

    // 3.map - 对数组中的每一项运行给定函数，返回经过函数处理后的数组。
    let newArr3 = arr.map((item, index, array) => {
      return item + 1
    })
    console.log(newArr3)

    console.log('===========')

    // 4.every - 每项都满足条件才返回true
    let result1 = arr.every((item) => {
      return item > 11
    })
    console.log(result1)

    console.log('===========')

    // 5.some - 有一项满足就返回true
    let result2 = arr.some((item) => {
      return item > 11
    })
    console.log(result2)

    console.log('====================== \n以下是reduce归并方法 \n======================')

    // 6. reduce

    // 例1，不带初始值参数的reduce - 代码迭代了3次
    let arr1 = [1, 2, 3, 4]
    let sum1 = arr1.reduce((prev, cur, index, array) => {
      console.log(prev, cur, index, '---')
      return prev + cur
    })
    console.log('sum1为：', sum1)

    // 分析：我们可以看到，在这里reduce的作用就是对这个数组进行求和，迭代了3次，函数迭代的初始值是1，也就是默认值（数组的第一项），prev的值是每次计算后的值
    // 那加上初始值呢？ - 从5开始计算，代码迭代了4次

    let sum2 = arr1.reduce((prev, cur, index, array) => {
      console.log(prev, cur, index, '---')
      return prev + cur
    }, 5)
    console.log('sum2为：', sum2)

    console.log('===========')

    // reduce的初级应用
    // 一般用来求和 和 求乘积了
    let arr2 = [1, 2, 3, 4, 5, 6]
    console.log('和：', arr2.reduce((a, b) => a + b))
    console.log('积：', arr2.reduce((a, b) => a * b))

    console.log('===========')

    // reduce的高级应用
    // 1. 计算数组中每个元素出现的次数
    let arr3 = ['aaa', 'bbb', 'ccc', 'ddd', 'aaa', 'aaa', 'bbb']
    let arrResult = arr3.reduce((pre, cur) => {
      console.log(pre, cur)
      if (cur in pre) {
        pre[cur]++
      } else {
        pre[cur] = 1
      }
      return pre
    }, {})

    console.log('高级应用1-统计：', arrResult)

    // 2. 去除数组中重复的元素
    let arrResult2 = arr3.reduce((pre, cur) => {
      if (!pre.includes(cur)) {
        pre.push(cur)
      }
      return pre
    }, [])
    console.log('高级应用2-去重：', arrResult2)

    console.log('===========')

    // 对对象的属性求和
    let persons = [
      {
        name: 'xixi',
        age: 18
      },
      {
        name: 'haha',
        age: 19
      },
      {
        name: 'hehe',
        age: 20
      },
    ]

    let pResult = persons.reduce((a, b) => {
      a = a + b.age
      return a
    }, 0)

    console.log('高级应用3-对象属性求和：', pResult)

    console.log('等...')


  </script>
</body>

</html>