{}+[]與console.log({}+[])結果不同?從JavaScript的大括弧談起

来源:http://www.cnblogs.com/MarcoHan/archive/2016/03/07/5250876.html
-Advertisement-
Play Games

看到這樣一個問題:為什麼直接在控制台運行{} + []和用console.log({} + [])輸出,兩者結果不一樣? 於是乎打開chrome的控制台運行了一下: 為什麼結果會這樣呢?不得已學習一下JS中的{}吧 複合語句 1 if() { 2 //... 3 }else { 4 //... 5


看到這樣一個問題:為什麼直接在控制台運行{} + []和用console.log({} + [])輸出,兩者結果不一樣?

於是乎打開chrome的控制台運行了一下:

為什麼結果會這樣呢?不得已學習一下JS中的{}吧

複合語句

 1 if() {
 2     //...
 3 }else {
 4     //...
 5 }
 6 for() {
 7     //...
 8 }
 9 while() {
10     //...
11 }
12 with(obj) {
13     //...
14 }

聲明對象直接量

1 var obj = {
2     name: 'Marco',
3     age:  22,
4     sex: male      
5 };

聲明函數或函數直接量

1 function fn1() {
2      //...  
3 }
4 var fn2 = function() {
5     //...
6 }

沒有塊級作用域

1 for( var i = 0; i < 10; i++) {
2     doSomething(i);  
3 }
4 
5 alert(i); //10

javascript只有函數作用域,以下做法會聲明全局變數:

  1. 直接為window添加屬性或者賦值  //window.a = 1;                  
  2. 在function內不使用var聲明變數而直接使用
  3. 在function外使用聲明變數(無論是否適用var聲明)
 1 function(num1 , num2) {
 2     var sum = num1 + num2;
 3     return sum;  
 4 }
 5 
 6 var result = add(10,20);   //30
 7 alert(sum);   //錯誤
 8 
 9 
10 function(num1 , num2) {
11     sum = num1 + num2;
12     return sum;  
13 }
14 
15 var result = add(10,20);   //30
16 alert(sum);   //30

建議在初始化變數之前一定要先聲明,這樣可以避免不聲明而直接初始化變數造成的錯誤。

當在某個環境中使用一個標識符時,必須先通過搜索來確定該標識符代表什麼。搜索過程從作用域鏈的前端開始,向上逐級查詢與給定名字匹配的標識符。若在該環境中找到了該標識符,則搜索停止,變數就緒。若在該局部環境沒有找到該變數,則繼續沿作用域鏈向上搜索,一直追溯到全局環境的變數對象。若在全局環境中沒有找到該標識符,則說明該變數尚未聲明。

1 var num = 1;
2 
3 function getNum() {
4     var num = 10;
5     return num;
6 }
7 
8 alert(getNum());    //10
變數查詢是有代價的。很明顯,訪問局部變數要比訪問全局變數更快,因為不用向上搜索作用域鏈。來看看jquery這麼做的:
(function(window, undefined) {
     var jQuery = function() {}
     // ...
     window.jQuery = window.$ = jQuery;
 })(window);

這樣寫的優勢:

1、window和undefined都是為了減少變數查找所經過的scope作用域。當window通過傳遞給閉包內部之後,在閉包內部使用它的時候,可以把它當成一個局部變數,顯然比原先在window scope下查找的時候要快一些。(原來的window處於作用域鏈的最頂端,查找速度慢)

2、在jquery壓縮版本jquery.min.js中可以將局部變數window替換成單個字母,減小文件大小,提高載入速度

3、undefined也是JavaScript中的全局屬性。將undefined作為參數傳遞給閉包,因為沒給它傳遞值,它的值就是undefined,這樣閉包內部在使用它的時候就可以把它當做局部變數使用,從而提高查找速度。undefined並不是JavaScript的保留字或者關鍵字。

4、undefined在某些低版本的瀏覽器(例如IE8、IE7)中值是可以被修改的(在ECMAScript3中,undefined是可讀/寫的變數,可以給它賦任意值,這個錯誤在ECMAScript5中做了修正),將undefined作為參數並且不給它傳值可以防止因undefined的值被修改而產生的錯誤。

結構化異常處理的語法符號 

1 try { 
2     //... 
3 }catch( ex ){ 
4     //... 
5 }finally{ 
6     //... 
7 } 

語句優先

當{}既可以被理解為複合語句塊也可以被理解為對象直接量或函數聲明的時候,JavaScript將會將其理解成為複合語句塊

1 {a:10}  //返回1,而不是對象   : 為標簽
2 
3 var x = { a:10 } // {a:10}作為右值出現,不能是語句塊,只能理解為對象直接量

 

至此,{}的基本知識就說完了。那麼最開始的問題也很好解釋了:

{}+[] :根據語句優先原則  {}被理解為複合語句塊,因此相當於 {}; +[]   。[]為空,結果為0

console.log({}+[]) : js把()中的語句當做一個表達式,因此{}不能被理解為語句塊,而被理解為對象直接量,因此結果為對象

其實 console.log({}+[])和[]+{}的結果相同,原理相同,{}作為右值出現被理解為對象直接量

{}+[] 和[]+{}結果不相同,是不是很神奇。

 

來來來,做幾個練習題壓壓驚:

1 {a: 1} + 2     // 2
2 2 + {a: 1}     // 2[object Object]
3 + {a: 1}        // NaN
4 {foo:[1,2,3]}[0];  // [0]

 

以上

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 講述了javascript主要由ECMAScript、DOM、BOM組成
  • 問題1: 使用連續賦值後面的變數會成為全局對象的一個屬性,並且這個屬性可以通過delete刪除。 原因:賦值語句是從右往左執行的,我們將10賦值給了c,但是c此時還聲明,接著把c的返回值賦值給了b,但是b也還沒有聲明,最後賦值給了a此時a有聲明,所以a就是局部變數。 var a = b = c =
  • (第一篇博文) 今天在一個交流群里見他們無聊,然後找到之前收藏的一些c語言題目放出去想讓他們做,結果反倒是自己不會做,於是花了很多時間去想。 原題:張三說李四在說謊,李四說王五在說謊,王五說張三和李四都在說謊。現在問:這三人中到底誰說的是真話,誰說的是假話? 其實問題本身並不難,只是一開始想多了,陷
  • 瞭解RegExp類型: ECMAScript通過RegExp類型來支持正則表達式。 var expression=/pattern/flags; 正則表達式的模式(pattern)部分: 可以是任何簡單或複雜的正則表達式,可以包含字元類,限定符,分組,向前查找,反向引用。 關於正則表達式中各種特殊字
  • 本文同步至微信公眾號http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401950045&idx=1&sn=cec056802bb52f909554691d0427f4f0#rd 對後續文章感興趣的可以掃碼關註哈 對於一個非技術人員比如說pm,
  • 效果預覽:http://hovertree.com/code/run/css/x8l6si70.html 請實用Chrome瀏覽器查看效果,手機上也可以. 代碼如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont
  • Node.js寫文件的三種方式: 1、通過管道流寫文件 採用管道傳輸二進位流,可以實現自動管理流,可寫流不必當心可讀流流的過快而崩潰,適合大小文件傳輸(推薦) 2 var readStream = fs.createReadStream(decodeURIComponent(root + filep
  • 原文出處: 攜程設計委員會 現在手機的占比越來越高,各種酷炫頁面層出不窮,這些特效都離不開css動畫。說到css動畫,主流的情況也就無非這兩大類:位移和形變。而我們在寫一個動畫特效的過程中,如何去提升它的性能呢?當然首先我們需要去瞭解一下基本的概念,比如瀏覽器渲染的工作原理等,這些我也在讀了幾位大牛
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...