Array(N).keys().map在苹果Safari/iPhone中无法使用的原因及替代方案

报错原因 #

Array(M).keys()返回的是Array Iterator迭代器对象，不是数组。迭代器本身并没有map方法——Chrome、Edge等较新版本的浏览器支持了ES2023引入的Iterator Helper特性，给迭代器新增了map、filter等方法，但Safari（包括iOS平台上的Chrome，因为iOS所有第三方浏览器都复用Safari的WebKit内核）尚未支持该特性，所以会抛出TypeError: ...map is not a function的错误。你之前误以为迭代器持有数组原型，其实两者是完全不同的对象类型，数组的map是Array.prototype上的方法，和迭代器无关。

等效实现方法 #

以下几种写法兼容性拉满，能在所有现代浏览器（包括Safari）正常运行：

方法1：迭代器转数组后再map #

先把迭代器转换为数组，再调用数组的map方法：

Array.from(Array(M).keys()).map(num => num + N)

方法2：用Array.from的第二个参数简化 #

Array.from支持第二个参数作为映射函数，无需额外调用map，更高效：

Array.from({ length: M }, (_, index) => index + N)

方法3：扩展运算符转数组再map #

用扩展运算符把迭代器转为数组，再执行map：

[...Array(M).keys()].map(num => num + N)

方法4：传统循环（兼容极老环境） #

如果需要兼容非常老旧的浏览器，可以用最基础的循环方式：

const numList = [];
for (let i = 0; i < M; i++) {
  numList.push(i + N);
}

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