JavaScript中如何判断对象是否可迭代 避免解构match返回值报错

object null is not iterable (cannot read property Symbol(Symbol.iterator)) 报错的核心诱因是：String.prototype.match() 方法在正则匹配失败时会返回 null，而 null 不属于可迭代对象，无法被数组解构语法处理。正则匹配成功时返回的是实现了可迭代协议的数组，所以可以正常解构。

JavaScript 中可迭代对象的判定标准为：对象实现了类型为函数的 Symbol.iterator 属性。通用判断函数如下：

function isIterable(target) {
  // 先排除null、undefined，避免访问Symbol属性时报错
  if (target === null || target === undefined) return false
  return typeof target[Symbol.iterator] === 'function'
}

当前场景下使用示例：

const matchRes = "string".match(/([^/]+)\/(.*)/)
if (isIterable(matchRes)) {
  const [, segment1, segment2] = matchRes
  // 后续业务逻辑
}

针对正则匹配捕获的场景，不需要通用可迭代判断，直接兜底+值校验的写法更简洁：

2.1 解构前加兜底避免报错 #

使用空值合并运算符 ?? 给匹配失败的情况兜底空数组，解构时不会抛出异常：

const [, segment1, segment2] = "string".match(/([^/]+)\/(.*)/) ?? []

匹配失败时，segment1 和 segment2 的值会默认变为 undefined，不会触发报错。

2.2 校验segment1、segment2均为有效值 #

如果需要确认两个捕获组都匹配到了非空值，直接做判空处理即可：

// != null 可同时排除 null 和 undefined 两种空值，等价于 segment1 !== null && segment1 !== undefined
if (segment1 != null && segment2 != null) {
  // 两个捕获组都有有效值，执行后续业务逻辑
  console.log(segment1, segment2)
}

如果需要更高严谨性，还可以加上匹配结果长度校验，避免捕获组缺失的异常情况：

const matchRes = "string".match(/([^/]+)\/(.*)/) ?? []
// 当前正则有2个捕获组，加上全量匹配的第一个元素，匹配成功时数组长度为3
if (matchRes.length === 3 && matchRes[1] != null && matchRes[2] != null) {
  const [, segment1, segment2] = matchRes
  // 后续业务逻辑
}

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