如何用JS的map方法生成aa到zz的数组？我的代码为何返回[NaN]？

我有如下代码：

const chars = 'abcdefghijklmnopqrstuvwxyz';

我想要生成一个包含['aa','ab','ac'…'zz']的字符串数组，想用map方法实现，于是写了这段代码：

const baseStrings = [chars].map(x=>chars[x]).map(y=>y+chars[y]);
console.log(baseStrings);

但运行结果是：

[NaN]

请问我哪里出错了？

错误原因 #

• 你用[chars]创建了仅包含整个字符串的单元素数组，map遍历它时，x就是完整的chars字符串。用字符串作为索引访问字符时，JS会尝试将其转为数字，失败后得到NaN，所以第一个map返回[NaN]。
• 第二个map里y是NaN，chars[y]同样返回NaN，NaN + NaN的结果就是NaN，最终输出[NaN]。

正确实现方式 #

要生成目标数组，得先把字符串拆成单个字符的数组，再做两层遍历组合：

方式一：map + flat

const chars = 'abcdefghijklmnopqrstuvwxyz';
const charArr = chars.split('');
const baseStrings = charArr.map(char1 => charArr.map(char2 => char1 + char2)).flat();
console.log(baseStrings);

1. split('')将字符串转为单个字符组成的数组['a','b',…,'z']。
2. 外层map遍历每个首字符char1，内层map遍历每个尾字符char2，拼接成双字母字符串。
3. flat()把嵌套的二维数组扁平化，得到一维的目标数组。

方式二：flatMap简化

const chars = 'abcdefghijklmnopqrstuvwxyz';
const charArr = chars.split('');
const baseStrings = charArr.flatMap(char1 => charArr.map(char2 => char1 + char2));
console.log(baseStrings);

flatMap可以直接将内层map返回的数组扁平化，省去单独调用flat()的步骤，代码更简洁。

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