如何在Stackblitz控制台中显示JavaScript Set()的内容？

我一直用Stackblitz作为JS学习和测试的草稿平台，实时控制台更新的特性很方便，但遇到个问题：控制台对Set的输出不够直观。比如这段代码：

let numbers = [1, 1, 2, 2, 3, 3];
numbers = new Set(numbers);
console.log(numbers); // 预期输出: Set(3) {1, 2, 3}

在Chrome开发者工具里，console.log(numbers)会输出Set(3) {1, 2, 3}，但Stackblitz控制台只显示Set {}。有没有不用打开Chrome DevTools就能查看Set内容的办法？

解决方法 #

• 转换为数组输出：利用扩展运算符或Array.from()把Set转成数组，直接打印数组就能看到所有元素：

  console.log([...numbers]); // 输出 [1, 2, 3]
  // 或者
  console.log(Array.from(numbers)); // 输出 [1, 2, 3]
  

• 自定义格式化输出：如果想要更接近Chrome控制台的格式，可以自己拼接字符串：

  console.log(`Set(${numbers.size}) {${Array.from(numbers).join(', ')}}`);
  // 输出 Set(3) {1, 2, 3}
  

• 封装打印函数：如果经常需要打印Set，封装一个函数更高效：

  function printSet(set) {
    const elements = Array.from(set).join(', ');
    console.log(`Set(${set.size}) {${elements}}`);
  }
  
  printSet(numbers); // 输出 Set(3) {1, 2, 3}
  

内容的提问来源于stack exchange，提问作者js-newb