{}+[]與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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...