为何使用Set需搭配扩展运算符？直接调用join为何失效？

核心疑问解答 #

• 为什么使用Set对象时需要搭配扩展运算符？
  Set是ES6新增的集合类型，它不属于数组，没有数组特有的方法（比如join、map这类）。扩展运算符[...set]的作用是把Set这个可迭代对象转换成普通数组，这样就能调用数组的各种方法来处理数据了。

• 能否不使用扩展运算符就将其输出到控制台？
  当然可以。你可以直接用console.log(set)打印Set本身；也可以用Array.from(set)把Set转成数组后再输出；还能通过for...of循环遍历Set的每一项逐个输出。

代码问题分析 #

无法运行的代码原因 #

function duplicateSet(str) {
    const arr = str.split(" ");
    const set = new Set(arr);
    const newString = set.join(" "); // 此处触发报错
    return newString;
}
console.log(duplicateSet("This is is a test test string"));

这段代码报错的核心原因是：Set对象没有join()方法。join()是数组的原型方法，只有数组才能调用。直接在Set上调用join会抛出TypeError，提示“set.join is not a function”。

可以运行的代码原因 #

function duplicateSet(str) {
    const arr = str.split(" ");
    const set = new Set(arr);
    const newString = [...set].join(" "); // 此处正常执行
    return newString;
}
console.log(duplicateSet("This is is a test test string"));

这里的[...set]利用扩展运算符，把Set这个可迭代对象转换成了一个新的数组。转换后的数组拥有join()方法，因此能正常执行，把数组元素拼接成字符串返回。

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