JavaScript中forEach回调函数报Uncaught ReferenceError的原因及修复

报错原因 #

countFruits函数内部使用了allFruits变量，但这个变量既不是函数参数，也没在函数作用域内定义，当前作用域能访问到的全局数组变量是fruits而非allFruits，JS引擎找不到该变量，因此抛出Uncaught ReferenceError。

修复方案 #

方案1：让countFruits接收数组参数（推荐，降低耦合） #

将需要处理的数组作为参数传入countFruits，让函数不依赖全局变量，通用性更强：

const fruits = ["Banana", "Mango", "Apple"];
fruits.forEach(listFruits);

function listFruits(fruit) {
  console.log(fruit);
}

// 新增数组参数，让函数可处理任意数组
function countFruits(arr, callback) {
  arr.forEach(callback);
  // 打印数组整体长度
  console.log("数组总长度：", arr.length);
}

// 调用时传入目标数组和回调函数
countFruits(fruits, listFruits);

方案2：直接使用全局fruits变量（不推荐，耦合性高） #

如果必须依赖全局变量，将countFruits里的allFruits替换为全局的fruits即可：

const fruits = ["Banana", "Mango", "Apple"];
fruits.forEach(listFruits);

function listFruits(allFruits) {
  console.log(allFruits);
}

function countFruits(callback) {
  callback(fruits); // 替换为全局变量fruits
  console.log(fruits.length);
}

countFruits(listFruits);

额外需求适配 #

如果你的目标是打印每个数组元素的长度，直接修改回调函数listFruits即可：

function listFruits(fruit) {
  console.log(`${fruit} 的长度：${fruit.length}`);
}

// 直接遍历数组调用回调
fruits.forEach(listFruits);

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