Storybook环境下[...new Array(n)].map()执行结果异常原因咨询

该差异是Storybook默认的Babel转译规则修改了数组展开运算符的原生行为导致的。

具体原理 #

• 原生ES规范中，new Array(2)生成的是带空位的稀疏数组，用展开运算符...处理稀疏数组时，会自动把所有空位转为undefined，得到的新数组是[undefined, undefined]的稠密数组，map会遍历所有元素，输出['item0', 'item1']。
• Storybook为了默认兼容低版本浏览器，会将ES6+语法转译为兼容实现。当转译目标包含不支持数组迭代展开的旧浏览器时，Babel会把[...new Array(2)]转译为等价的兼容写法，这类写法大多会保留数组的空位属性，最终得到的仍然是稀疏数组，map方法执行时会跳过空位，就得到了全undefined的结果。

可选解决方案 #

• 替换写法为Array.from，行为在所有环境下都一致：

Array.from(new Array(2), (_, index) => `item${index}`)

• 调整Storybook的Babel/转译目标配置，明确指定目标为现代浏览器，关闭不必要的低版本语法转译，即可让展开运算符的表现和原生环境一致。
• 你当前使用的fill方案也是通用的兼容写法，可以稳定在所有环境运行。

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