Setオブジェクトの結果がリファレンスと相違してしまう

Question

JavaScriptのオブジェクトであるSetオブジェクトを勉強しようと思い、「Set - JavaScript | MDN」に載っている例を検証してみたのですが、console.log()の出力結果が相違してしまいます。

「Set - JavaScript | MDN」での例

var mySet = new Set();

mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add('some text'); // Set [ 1, 5, 'some text' ]
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay

mySet.has(1); // true
mySet.has(3); // 3 は集合にないため、false
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has('Some Text'.toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5); // 集合から 5 を削除
mySet.has(5);    // 5 が削除されているため false 

mySet.size; // 要素を 1 つ削除しているため 4
console.log(mySet);// Set [ 1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2} ]

---

以下の実行環境で検証しました。

• CodePen: Build, Test, and Discover Front-end Code.
• Web Maker
• JSFiddle - Code Playground

すると、[object Set] {}という出力がされてしまいました。

目的

• この問題の原因が知りたい
• リファレンス通りの出力が期待できる実行環境が知りたい

実行環境

Google Chrome バージョン: 84.0.4147.135（Official Build） （64 ビット）
Microsoft Windows10 バージョン1903(OSビルド 18362,1016)

---

よろしくおねがいします。

Comments

[kei344]

https://jsfiddle.net/30dqc45m/ ブラウザで確認されていますか？その場合どのOSでどのブラウザか、バージョンを含めて提示することをお勧めします。

[dameo]

Windows 10Home 64bit Chrome バージョン: 84.0.4147.135（Official Build） （64 ビット）を使っています。
CodePen: Build, Test, and Discover Front-end Code.
Web Maker
JSFiddle - Code Playground
全ての環境でChrome開発者ツールのコンソール出力は一致してるように見えました。

確認手順を教えて下さい。

[defeatist]

Chrome開発者ツールでは実行していません。
純粋にそれらのサイトの実行環境で例をコピペして実行しました。

[dameo]

具体的に操作手順を記述してください。

[defeatist]

ありがとうございます

Answer 1

この問題の原因が知りたい
リファレンス通りの出力が期待できる実行環境が知りたい

原因
ご自身で記載されている通り、実行環境の違いによります。

• console.log() の__オブジェクトの出力、展開時の表示__は実行環境で異なる。
• プレイグラウンド系サービスは、ローカルで稼働するブラウザとは異なり、toString() された結果が表示されることが多い。

以下のように、交換用情報として利用できる JSON に変換すると環境に関係なく等しい結果になるはずです。

console.log(JSON.stringify([...mySet.entries()]));
// => [[1,1],["some text","some text"],[{"a":1,"b":2},{"a":1,"b":2}],[{"a":1,"b":2},{"a":1,"b":2}]]

期待できる実行環境

MDN の M(Mozilla) が意味する通り、Firefoxと考えるのが普通です。
Windows10 でしたら IE11, Edge の他に Firefox, Chrome をインストールしておくと、同一マシン上で比較確認できる体制を構築できます。

また、Web系開発する場合、各ブラウザのレンダリングエンジン等、違いを把握しておきましょう。
参考）qiita：Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた

Comments

[defeatist]

ありがとうございます

Answer 2

WebMakerのconsole.logに、Setオブジェクトの内容を展開して表示する機能がない(CodePenは試していないので分からないが)。

代わりに、あなたがforEachなどで表示してやればいい。

mySet.forEach(function (x) {
  console.log(x);
})

WebMakerの新しいバージョン(Webアプリ版)だと、結果は以下のようになる。

1
"some text"
Object {a: 1, b: 2}
Object {a: 1, b: 2}

Comments

[defeatist]

ありがとうございます

Answer 3

リファレンス通りの出力が期待できる実行環境が知りたい

普通に、ブラウザの開発者ツールのコンソールで。

この問題の原因が知りたい

コピペしてないのであれば、タイプミス。
もしくはそのサイトに何らかの制約があることの見落としか、サイトの使い方の間違い。