JavaScript函数外变量更新后出现TypeError及数组元素undefined问题求助

核心问题 #

1. startRide函数导致数组全变为undefined：你在startRide的map回调里用了花括号，但没有显式返回值。箭头函数如果用花括号包裹代码块，必须手动写return，否则默认返回undefined，所以整个map执行后得到的是全undefined的数组，直接覆盖了原bikeShare。
2. endRide报错的根源：因为bikeShare已经变成全undefined的数组，在endRide的map回调里访问bike.vin时，bike是undefined，自然触发Cannot read properties of undefined (reading 'vin')错误。

修复代码 #

方案1：给map回调添加return #

let bikeShare = []
let stations = []

function startRide(vin) {
  bikeShare = bikeShare.map((bike) => {
    // 显式return三元表达式的结果
    return bike.vin === vin ? { ...bike, checkOut: true } : bike 
  })
  return {}
}

function endRide(vin) {
  console.log(bikeShare)
  bikeShare = bikeShare.map((bike) => {
    // 显式return，同时加可选链防止意外的undefined
    return bike?.vin === vin && bike.checkOut 
      ? { ...bike, checkOut: false, totalRides: bike.totalRides + 1  } 
      : bike 
  })
  return {}
}

function createBike(color = 'red') {
  const vin = bikeShare.length + Date.now();
  const payload = { vin, color, checkOut: false, totalRides: 0 }

  bikeShare.push(payload);

  return payload
}

const bike_1 = createBike('red')
const bike_2 = createBike('blue')
const bike_7 = createBike('green')

startRide(bike_1.vin)
endRide(bike_1.vin)

方案2：简化箭头函数（省略花括号自动返回） #

更简洁的写法是去掉map回调的花括号，箭头函数单行表达式会自动返回结果：

function startRide(vin) {
  bikeShare = bikeShare.map(bike => 
    bike.vin === vin ? { ...bike, checkOut: true } : bike 
  )
  return {}
}

function endRide(vin) {
  console.log(bikeShare)
  bikeShare = bikeShare.map(bike => 
    bike?.vin === vin && bike.checkOut 
      ? { ...bike, checkOut: false, totalRides: bike.totalRides + 1  } 
      : bike 
  )
  return {}
}

额外优化建议 #

• 在endRide里使用可选链bike?.vin，即使数组里出现undefined元素，也不会直接抛出错误，增加代码鲁棒性。
• 如果需要避免修改全局变量bikeShare，可以考虑用函数闭包封装状态，减少全局变量污染。

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