如何通过对象在JavaScript函数间传递多个变量

你的代码无法正常工作的核心原因是错误地访问函数对象的属性，而非函数调用后返回对象的属性：

• getFruits是一个函数，getFruits.fruitType试图读取函数本身的属性，但这些属性从未被定义过；
• 你调用getFruits()后没有保存返回的对象，导致无法获取其中的fruitType和fruitNumber。

以下是几种可行的修改方式，任选其一即可：

方式一：保存函数返回的对象，再传递属性 #

function processFruits() {
  // 保存getFruits返回的结果对象
  const fruitData = getFruits();
  // 从对象中取出属性传递给retrieveInfo
  retrieveInfo(fruitData.fruitType, fruitData.fruitNumber);
}

function getFruits() {
  let fruitType = 'bananas',
      fruitNumber = '5'; // 假设matches[0]返回'5'
  return { fruitType, fruitNumber };
}

function retrieveInfo(b, c) {
  console.log("The fruit is: " + b);
  console.log("The number of desired fruit is: " + c);
}

方式二：解构赋值直接提取变量 #

利用ES6解构语法简化代码，直接从返回对象中取出需要的变量：

function processFruits() {
  // 解构获取返回对象中的属性
  const { fruitType, fruitNumber } = getFruits();
  retrieveInfo(fruitType, fruitNumber);
}

// getFruits和retrieveInfo函数保持不变

方式三：直接传递整个对象给retrieveInfo #

如果允许修改retrieveInfo函数，可以直接传递整个对象，减少参数数量：

function processFruits() {
  // 直接把getFruits返回的对象传给retrieveInfo
  retrieveInfo(getFruits());
}

function getFruits() {
  let fruitType = 'bananas',
      fruitNumber = '5';
  return { fruitType, fruitNumber };
}

function retrieveInfo(fruitData) {
  console.log("The fruit is: " + fruitData.fruitType);
  console.log("The number of desired fruit is: " + fruitData.fruitNumber);
}

// 或者用解构简化retrieveInfo的参数
// function retrieveInfo({ fruitType, fruitNumber }) {
//   console.log("The fruit is: " + fruitType);
//   console.log("The number of desired fruit is: " + fruitNumber);
// }

你之前的“可行代码”依赖全局变量fruitType，这种写法容易引发变量污染和难以排查的bug，建议改用返回值的方式传递数据，就像上面的修正方案一样。

内容的提问来源于stack exchange，提问作者e-driver1