如何在JavaScript（ES6）中将数组转为以竖线分隔的字符串

嘿，这个需求其实在JS里处理起来非常直观，ES6里有原生的数组方法可以轻松搞定，不用写复杂的循环逻辑。下面给你详细讲几种实现方式，其中最推荐的是第一种：

1. 最简洁高效：使用数组的join()方法 #

这是处理这类拼接需求的标准方案，Array.prototype.join()方法就是专门用来将数组元素连接成字符串的，你只需要把竖线|作为分隔符参数传入即可。

示例代码：

const myArray = ["one", "two", "three"];
const pipeSeparatedStr = myArray.join('|');
console.log(pipeSeparatedStr); // 输出："one|two|three"

关于join()的细节补充： #

• 如果数组中有null、undefined或者空值，join()会自动将它们转为空字符串。比如：

  const mixedArray = ["one", null, undefined, "three"];
  console.log(mixedArray.join('|')); // 输出："one|||three"
  

  如果你想跳过这些无效值，可以先配合filter()过滤数组：

  const cleanedStr = mixedArray.filter(item => item != null).join('|');
  console.log(cleanedStr); // 输出："one|three"
  

• 数组中的非字符串类型（比如数字、布尔值）会被自动转为字符串：

  const numArray = [1, true, 3];
  console.log(numArray.join('|')); // 输出："1|true|3"
  

2. 拓展方案：使用reduce()手动拼接（不推荐，仅作了解） #

虽然join()已经足够好用，但如果你想手动实现拼接逻辑，也可以用Array.prototype.reduce()。不过这种写法更繁琐，性能也不如原生的join()，所以一般不推荐：

const myArray = ["one", "two", "three"];
const pipeSeparatedStr = myArray.reduce((accumulator, currentValue) => {
  return accumulator ? `${accumulator}|${currentValue}` : currentValue;
}, '');
console.log(pipeSeparatedStr); // 输出："one|two|three"

总结一下：优先使用join('|')，它是专门为这类场景设计的方法，代码简洁、性能最优，还能处理大部分边界情况。

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