【javascript】{} + [] 和 [] + {} 的區別

內容基本上來自於：《you dont know javascript》中卷 第4章 類型與文法

[] + {} // "[object Object]"
 	{} + [] // 0

先看第一個表達式，[ ] + { } , 由於[]會被強制轉換爲"", 而後+運算符 連接一個{ }, { }強制轉換爲字符串就是"[object Object]"。 最終結果就是後者。

在看第二個表達式, 表達式第一個就是{ },這時候編譯器只會把這個{ } 看成一個空代碼塊。【es6以前尚未塊級做用，只有函數做用域和全局做用域，能夠就理解爲全局做用域下面一個多餘的{ } 符號而已】，{ } + [ ] 就能夠看成是+ [ ], 而 + [ ]是強制將[ ]轉換爲number ,轉換的過程是 + [ ] --> +"" -->0 最終的結果就是0。

好，咱們舉幾個例子吧。

{}var a = 5;
	{} console.log(a);
	
	{var b = 6;}
	console.log(b)

	{var c = 7;}console.log(c);

這些語句都能在chrome控制檯正確的運行。

---

可能你的疑問來了，好比在控制檯裏面輸入{ name: 「kevin」 }，也是能正常運行的，而且打印了這個對象。由於這時候它是一個表達式語句，就和在控制檯輸入5的時候是同樣的，這時候chrome控制檯打印的是定義的這個值。

可是咱們這樣輸入，加一個分號 { name: 「kevin」 }; 你看控制檯發生了什麼變化，打印了"kevin", 由於這個語句的意思是，給字符串"kevin"打一個標籤！！ wtf ，的確是這樣的。 若是很差理解的話 咱們將字符串換成一個函數。

咱們先定義了一個函數function bar(){}, 而後給他打標籤
{ barTag: bar }; 就等於 barTag: bar就等於 barTag: bar; , 爲何{barTag: bar};有這個分號，在chrome控制檯裏面，不加分號他就會被解析成一個對象。若是在html文件的script標籤裏面，加或者不加是同樣的，都是打標籤。

可是標籤不是是字符串，就是說不能夠這樣 "barTag":bar

這裏的打標籤和for循環打標籤相似：

foo: for (var i = 0; i < 4; i++) {
      for (let j = 0; j < 4; j++) {
        if (i * j >=3 ) {
          console.log('stopping', i, j)
          break foo
        }
        console.log(i, j)
      }
    }

然鵝咱們也能夠給代碼塊打標籤：

function foo() {
        bar: {
          console.log('hello')
          break bar
          console.log('never runs')
        }
        console.log('world')
    }

function bar() {}
   {func: bar} // chrome 控制檯打印的是什麼
   {func: bar}; // 這個呢？

看上面兩個,一個打印的對象，一個是函數！第二個就是函數，func就是函數bar的標籤。

咱們也能夠強制讓{}+[]的結果變成了0, 加一個括號便可。({}+[]),只要不在一個語句的頭部檢測到{} 或者 ;{}這種形式，那麼它就不是一個代碼塊。（可能還有其餘形式）。

可是咱們執行console.log({}+[])和console.log([]+{}),結果是同樣的，由於{}沒有一個語句或者表達式的頭部。

上面的全部實驗是在chrome 控制檯下的結果。

你也能夠在html的script標籤裏面作一些實驗。