React Native应用数组元素间平均值计算问题求助

需求说明 #

需要实现的计算逻辑：

• 数组第一个元素为初始值，不计入计算，对应平均值为0
• 第二个元素：计算第一个与第二个元素的差值，除以1
• 第三个元素：计算前三个元素中所有相邻差值的总和，除以2
• 以此类推，第n个元素（n≥2）对应所有前n个元素的相邻差值总和除以(n-1)

举个例子：数组元素为3、5、6、9时

• 第一个元素（3）：平均值0
• 第二个元素（5）：(5-3)/1 = 2
• 第三个元素（6）：[(5-3)+(6-5)]/2 = (2+1)/2 = 1.5
• 第四个元素（9）：[(5-3)+(6-5)+(9-6)]/3 = (2+1+3)/3 = 2

用户提供的代码 #

渲染代码 #

return (
    <View style={Styles.sectionContainer}>
        {readings.map(
            ({
                id,
                date,
                volume,
            }) => {
                return (
                    <View key={id} style={Styles.card}>
                        <Text
                            style={[
                                Styles.sectionHeading,
                                Styles.darkAppText,
                                { fontWeight: "bold" },
                            ]}
                        >
                            average: {average}
                        </Text>
                    </View>
                );
            }
        )}
    </View>
);
}

尝试的计算代码 #

if (id == 1) {
  average = 0;
} else if (id > 1) {
  for (i = 1; i < readings.length; i++) {
    average = (readings[i].volume readings[i - 1].volume) / i;
  }
}

问题分析 #

1. 计算逻辑错误：代码未累积相邻差值的总和，每次仅计算当前一对元素的差值，不符合需求
2. 变量覆盖问题：在map函数内部循环整个readings数组，每次循环都会覆盖average的值，最终所有元素都显示最后一次循环的结果
3. 语法错误：计算式中缺少减号，readings[i].volume readings[i - 1].volume应为readings[i].volume - readings[i - 1].volume

解决方案 #

步骤1：预处理计算所有平均值 #

提前计算好每个元素对应的平均值，避免在map中重复循环：

const calculateAverages = (readings) => {
  const averages = [];
  let totalDiff = 0;
  for (let i = 0; i < readings.length; i++) {
    if (i === 0) {
      // 第一个元素平均值为0
      averages.push(0);
    } else {
      // 累加当前相邻元素的差值
      totalDiff += readings[i].volume - readings[i - 1].volume;
      // 计算平均值：总差值除以当前索引（对应差值的数量）
      averages.push(totalDiff / i);
    }
  }
  return averages;
};

步骤2：在组件中使用计算结果 #

在组件内调用函数得到平均值数组，然后在map中对应取出每个元素的平均值：

// 假设readings是你的数据源数组
const averages = calculateAverages(readings);

return (
    <View style={Styles.sectionContainer}>
        {readings.map(({ id, date, volume }, index) => {
            const average = averages[index];
            return (
                <View key={id} style={Styles.card}>
                    <Text
                        style={[
                            Styles.sectionHeading,
                            Styles.darkAppText,
                            { fontWeight: "bold" },
                        ]}
                    >
                        average: {average.toFixed(2)} {/* 可选：保留两位小数优化显示 */}
                    </Text>
                </View>
            );
        })}
    </View>
);

说明 #

• 预处理计算只执行一次，性能更优
• 每个元素对应正确的累积差值平均值，不会出现变量覆盖问题
• 添加toFixed(2)可以让显示的平均值更整洁（可选）

内容的提问来源于stack exchange，提问作者martin