typescript中 forEach、reduce、reduceRight、map、filter、some、every用法的求和方法

1、各个函数的作用：

• forEach：用于遍历数组元素，对每个元素执行回调函数。
• reduce：将数组元素累积成一个值，可以用来求和。
• reduceRight：与 reduce 类似，但从右向左累积，通常用于镜像或对齐操作。
• map：创建一个新数组，每个元素由原数组的元素经过函数处理得到。
• filter：过滤数组中的元素，只保留符合条件的项。
• some：检查数组中是否至少有一个元素满足条件。
• every：检查所有元素都满足条件。

2、详细说明：

1. forEach

• 用途：遍历数组，对每个元素执行回调函数。
• 求和实现：虽然 forEach 本身并不是直接用于求和，但可以结合它和 reduce 或其他方法来使用。例如，可以在 forEach 的回调中累加值，然后调用 reduce 来计算总和。

2. reduce

• 用途：递减地将数组元素累积成一个值，常用于求和。
• 实现：直接使用 reduce 方法，将每个数加到累加器上，最终返回总和。例如：

const sum = numbers.reduce((acc, num) => acc + num, 0);

• 注意事项：如果数组为空，reduce 会抛出TypeError，因为没有初始值。

1. reduceRight

• 用途：从右向左累积，可以用于镜像求和。
• 实现：

const sumRight = numbers.reduceRight((acc, num) => acc + num);

1. map

• 用途：创建映射后的数组，可以用于进一步的操作。
• 求和实现：可以使用 map 将每个数转换为字符串，然后调用 reduce 来求总和，虽然这在本例中没有直接意义，但有时可 能需要结合其他操作。

2. filter

• 用途：过滤数组中的元素。
• 求和实现：可以首先筛选出需要的元素，然后使用 reduce 来计算这些元素的总和。例如：

const sumFilter = numbers.filter(num => num > 0).reduce((acc, num) => acc + num, 0);

1. some

• 用途：检查是否至少有一个元素满足条件。
• 求和实现：虽然 some 本身不直接用于求和，但可以使用它来判断是否存在值，从而决定后续操作。例如，可以先使用 some 检查数组中是否有正数，然后再使用 reduce 求这些数的总和。

2. every

• 用途：检查所有元素是否都满足条件。
• 求和实现：同样，every 可以用于确定是否需要进行进一步操作，比如求和。例如，可以先使用 every 检查所有数是否为 正，然后再使用 reduce 求总和。

3、事例运行：

<template>
  <div class="about">
    <h1>This is an about page {{ msg }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

defineProps({
  msg: String
})

onMounted(() => {
  console.log('AboutView mounted')
})

onMounted(() => {
  calcSum()
})

function calcSum() {
  console.log('1. 使用 `reduce` 实现求和：')
  let numbers = [1, 2, 3, 4]
  const sum = numbers.reduce((acc, num) => acc + num, 0)
  console.log(sum) // 输出：10

  console.log('2. 从右向左使用 `reduceRight` 求和：')
  numbers = [1, 2, 3, 4]
  const sumRight = numbers.reduceRight((acc, num) => acc + num)
  console.log(sumRight) // 输出：10

  // 这与直接使用 `reduce` 的结果相同，但这里展示了如何从数组末尾开始累加。

  console.log('3. 使用 `filter` 和 `reduce` 结合求和：')

  numbers = [1, -2, 3, 4]
  // 过滤出正数并求和
  const sumPositiveNumbers = numbers.filter((num) => num > 0).reduce((acc, num) => acc + num, 0)
  console.log(sumPositiveNumbers) // 输出：7

  console.log('4. 使用 `map` 和 `reduce` 结合求和：')
  numbers = [1, 2, 3]
  // 将每个数乘以其索引位置的值并求和
  const sumMappedNumbers = numbers
    .map((num, index) => num * index)
    .reduce((acc, num) => acc + num, 0)
  console.log(sumMappedNumbers) // 输出：15

  console.log('5. 使用 `some` 来决定是否进行求和：')
  numbers = [1, 2, 3]
  // 检查是否有负数，存在则不进行求和
  const hasNegative = numbers.some((num) => num < 0)
  if (hasNegative) {
    console.log('数组中存在负数，无法继续计算总和')
  } else {
    const sum = numbers.reduce((acc, num) => acc + num, 0)
    console.log(`所有数的和为：${sum}`)
  }

  console.log('6. 使用 `every` 来决定是否进行求和：')
  numbers = [1, 2, 3]
  // 检查是否所有数都大于0，存在则进行求和
  const allPositive = numbers.every((num) => num > 0)
  if (allPositive) {
    const sum = numbers.reduce((acc, num) => acc + num, 0)
    console.log(`所有数的和为：${sum}`)
  } else {
    console.log('数组中存在非正数，无法继续计算总和')
  }

  console.log('7. 综合使用多种方法求和：')
  numbers = [1, 2, -3, 4]
  // 使用 `filter` 过滤出正数并使用 `reduceRight` 求和
  const filteredNumbers = numbers.filter((num) => num > 0)
  const sumRightFiltered = filteredNumbers.reduceRight((acc, num) => acc + num)
  console.log(sumRightFiltered) // 输出：7
}
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

4、运行效果：