如何仅遍历一次数组构建带嵌套大括号的目标字符串？

我有两个变量name和values：name是字符串Bob，values是字符串数组。需要根据values的长度构建特定格式的字符串——每个元素后跟随左大括号，且每个左大括号都有对应的右大括号。例如当values为["a", "b", "c"]时，目标字符串应为a: { b: { c: { Bob } } }。

目前我通过两次遍历数组实现：

`${values.map(v => ` ${v}: { `).join("")} ${name} ${values.map(() => `}`).join("")}`

请问有没有办法只遍历一次数组完成这个需求？

解决方案：使用reduceRight单次遍历实现 #

可以利用数组的reduceRight方法，从数组末尾开始向前遍历，一次迭代就能构建出完整的嵌套结构：

const name = "Bob";
const values = ["a", "b", "c"];

const result = values.reduceRight((acc, val) => `${val}: { ${acc} }`, name);
console.log(result); // 输出：a: { b: { c: { Bob } } }

原理说明 #

reduceRight会从数组的最后一个元素开始处理，以name作为初始累积值：

1. 第一次处理元素c，得到c: { Bob }
2. 第二次处理元素b，将其与上一步的结果组合，得到b: { c: { Bob } }
3. 第三次处理元素a，最终得到目标字符串a: { b: { c: { Bob } } }

整个过程只遍历数组一次，相比两次map调用更高效，代码也更简洁。

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