CodePen筛选首字母为c的餐厅报c.includes is not a function错误如何解决

核心报错原因 #

includes是仅字符串、数组类型支持的原生方法，抛出该错误说明你调用该方法的变量c实际类型不属于以上两种，最常见场景为：

• 变量c为未赋值的undefined、null
• 你直接对DOM元素对象调用了该方法，未提前获取其文本/值属性

你提及的forEach代码逻辑说明 #

你写的result.forEach(restaurant => { cList += ${restaurant.name}; })这一行不需要额外嵌入回调，只要满足两个前置条件即可正常运行：

• 变量result是已经完成首字母筛选的餐厅数组，而非全量未筛选数据
• 你在前置筛选逻辑中调用includes的目标变量为字符串类型，首字母筛选的正确写法参考：

// 先做筛选逻辑
const filteredRestaurants = 全量餐厅数组.filter(item => {
  // 确保取到的餐厅名称为字符串，统一转小写避免大小写匹配问题
  const restaurantName = item.name.toLowerCase()
  // 两种判断方式选其一即可
  // 方式1：仅匹配首字母为c
  return restaurantName.charAt(0) === 'c'
  // 方式2：匹配名称所有位置包含c
  // return restaurantName.includes('c')
})
// 再做渲染逻辑
let cList = ''
filteredRestaurants.forEach(restaurant => {
  cList += `<code>${restaurant.name}</code>`
})

额外排查点 #

• 如果你是从输入框、页面文本节点获取c的值，必须调用.value（输入框）或.textContent（普通文本节点）获取字符串内容后，再调用includes方法
• 若餐厅数据为异步请求获取，必须将筛选、渲染逻辑放在请求成功的回调中执行，避免数据未返回时变量为空报错

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