Vue.js中如何将两函数计算结果存入数组及相关实现疑问

嘿，我来帮你梳理清楚这个问题的解决思路～

关于revenue的定义 #

毫无疑问，revenue应该定义为数组。你的核心需求是存储每个月的营收结果，数组是最适合的结构——它能按顺序保存一系列月度数据，方便后续的展示、统计或者进一步处理。如果定义成函数的话，每次调用只能返回单个计算值，没法累积存储多个月份的结果，完全不符合你“存入另一个数组”的需求。

为什么直接相加数组会得到逗号？ #

你遇到的this.functionA + this.functionB返回逗号的问题，本质是JavaScript对数组的默认处理：当你用+操作符连接两个数组时，JS会自动把数组转换成字符串（数组的默认toString()方法会用逗号分隔元素），所以两个数组“相加”其实是字符串拼接，自然就出现了逗号。

正确的做法是遍历两个数组，把对应位置的元素逐个相加，而不是直接把整个数组当作一个整体去运算。

具体实现思路&示例代码 #

结合你的按钮交互需求，这里给你一个清晰的实现方向：

1. 把numa定义为数组，每个元素对应一个月的基础数据；
2. 让functionA和functionB分别处理numa，返回对应的月度结果数组（比如A类收入、B类收入）；
3. 点击按钮时，触发计算逻辑：遍历两个结果数组，对应位置元素相加，把最终的月度营收存入revenue数组。

举个简单的代码示例：

// 模拟月度基础数据数组
numa = [1200, 1800, 2100, 1500];

// 计算A类月度收入
function functionA() {
  return this.numa.map(num => num * 0.6); // 假设A类收入是基础数据的60%
}

// 计算B类月度收入
function functionB() {
  return this.numa.map(num => num * 0.3); // 假设B类收入是基础数据的30%
}

// 存储月度总营收的数组
revenue = [];

// 按钮点击触发的计算函数
function handleCalculate() {
  const monthlyA = this.functionA();
  const monthlyB = this.functionB();
  
  // 对应月份的收入相加，生成总营收数组
  this.revenue = monthlyA.map((aVal, index) => aVal + monthlyB[index]);
  
  // 这里可以添加更新视图的逻辑，比如把revenue渲染到页面上
  console.log("月度营收结果：", this.revenue);
}

关键要点总结 #

• revenue必须是数组，才能存储多个月度的计算结果；
• 数组不能直接用+号相加，要通过map或者循环逐个处理对应位置的元素；
• 按钮交互的核心是触发计算逻辑，更新revenue数组并同步到视图。

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