<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          一行能裝逼的JavaScript代碼

          時間:?2017-11-16閱讀:?2754標簽:?js技巧

          一行神奇的JS代碼,當時我就震驚了,這不就是傳說中的ZB神奇么… … 哈哈。寫本篇文章的緣由是之前看到了一段js代碼,如下:

          (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]


          然后讓大家運行,出來的結果讓人有點出乎意料,"sb"。太風騷了有木有!如果有人詆毀前端瞧不起JS的話,那就可以把這段代碼發給他了~不過話說回來了,這到底是什么原理呢?為什么一堆符號運算結果竟然能是兩個字符,而且恰巧還是個sb!

           

          其實靠的是js的類型轉化的一些基本原理,本篇就來揭密”sb”是如何煉成的。相信你如果能把這個理清楚了,以后遇到類型轉化之類的題目,就可以瞬間秒殺了。

           

           一、JS運算符的優先級

          首先要運用到的第一個知識就是js運算符的優先級,因為這么長一段運算看的人眼花,我們必須得先根據優先級分成n小段,然后再各個擊破。優先級的排列如下表,優先級從高到低:


          根據此規則,我們把這一串運算分為以下16個子表達式:



          運算符用紅色標出,有一點可能大家會意識不到,其實中括號[]也是一個運算符,用來通過索引訪問數組項,另外也可以訪問字符串的子字符,有點類似charAt方法,如:’abcd'[1] // 返回’b’。而且中括號的優先級還是最高的哦。

           

          二、JS的類型轉化

          預處理結束,接下來需要運用的就是javascript的類型轉化知識了。我們先說說什么情況下需要進行類型轉化。當操作符兩邊的操作數類型不一致或者不是基本類型(也叫原始類型)時,需要進行類型轉化。先按運算符來分一下類:

          減號-,乘號*,肯定是進行數學運算,所以操作數需轉化為number類型。

          加號+,可能是字符串拼接,也可能是數學運算,所以可能會轉化為number或string

          一元運算,如+[],只有一個操作數的,轉化為number類型


          下面來看一下轉化規則。

           

          1. 對于非原始類型的,通過ToPrimitive() 將值轉換成原始類型:

          ToPrimitive(input, PreferredType?)

          可選參數PreferredType是Number或者是String。返回值為任何原始值。如果PreferredType是Number,執行順序如下:

          如果input為primitive,返回

          否則,input為Object。調用 obj.valueOf()。如果結果是primitive,返回。

          否則,調用obj.toString(). 如果結果是primitive,返回

          否則,拋出TypeError

          如果 PreferredType是String,步驟2跟3互換,如果PreferredType沒有,Date實例被設置成String,其他都是Number


          2. 通過ToNumber()把值轉換成Number,直接看ECMA 9.3的表格

          規則如下:

          參數

          結果

          Undefined

          NaN

          Null

          +0

          Boolean

          true被轉換為1,false轉換為+0

          Number

          無需轉換

          String

          由字符串解析為數字。



          3. 通過ToString()把值轉化成字符串, 直接看ECMA 9.8的表格

          規則如下:

          參數

          結果

          Undefined

          "undefined"

          Null

          "null"

          Boolean

          "true"或者"false"

          Number

          數字轉換為字符串

          String

          無需轉換


          規則就這么多,接下來實踐一下,根據我們上面劃分出的子表達式,一步一步將這個神奇的代碼給執行出來。開工~

           

          三、步步執行

          先看最簡單的子表達式16:+[]

           

          只有一個操作數[],肯定是轉化為number了,根據上面的規則2,[]是個數組,object類型,即對象。所以得先調用toPrimitive轉化為原始類型,并且PreferredType為number,這個參數表示更“傾向于”轉化的類型,這里肯定是number了。然后首先調用數組的valueOf方法,數組調用valueOf會返回自身,如下:

          [].valueOf()
          []


          這個時候,我們得到一個空串“”,還沒有結束,看上面的規則2描述,繼續調用toNumber,轉化為number類型,如下:

          Number("") 
          0


          大功告成!子表達式16轉化完畢,+[],最終得到0。來看子表達式15:[~+””]

          空串””前面有兩個一元操作符,但是操作數還是只有一個,所以,最終要轉化為的類型是number。看規則2吧,空串調用toNumber得到0。接下來是~,這是個什么東東呢?它是位運算符,作用可以記為把數字取負然后減一,所以~0就是-1 。

          別忘了,這個子表達式外頭還包著中括號,所以最終的值為[-1],即一個數組,里面只有一個元素-1.
          接下來看子表達式13就簡單了,把15、16求出來的填進去,就變成了這樣:–[-1][0],取數組的第0個元素,然后自減,結果為-2,是不so easy!
          繼續往上走,子表達式14: [~+[]]
          其實把15、和16的原理用上就非常明顯了,答案[-1]

          繼續來求子表達式9,此刻它已變成:-2*[-1],有稍許不一樣,不過沒關系,我們還是按照規則來,運算符是乘號*,當然是做數學運算,那后面的[-1]就得轉化為number,與16的求法類似,過程如下:

          1)調用toPrimitive,發現是object類型

          2)調用valueOf,返回自身[-1]

          3)因為不是原始類型,繼續調用toString,返回”-1″

          4)”-1″是原始類型了,然后調用toNumber,返回-1

          5)與-2相乘,返回2

          子表達式10:~~!+[],不多說了,答案1. 就是從右往左依次一元計算。
          有了9和10,我們來到了子表達式4,此刻它已經長這樣了:2+1, 好,我不多說了。

          繼續看表達式7:!(~+[]),~+[]=-1,這個根據上面已經知道了,那!-1是什么呢?這里要說一下這個感嘆號,它是邏輯取非的意思,會把表達式轉化為布爾類型,轉化規則和js的Truthy和Falsy原則是一樣的,后面跟數字的,除0以外都為false,后面跟字符串的,除空串以外都為false。這里的!-1當然就是false了。

          接下來這個表達式3:false+{}有點關鍵。一個布爾加一個對象,那這個{}應該先轉化為原始類型,流程如下:

          1)調用toPrimitive,發現是object類型
          2)調用valueOf,返回自身{},
          3)不是原始類型,調用toString,返回”[object Object]”
          4)false與”[object Object]”相加,false先轉化為字符串”false”
          5)相加得結果”false[object Object]”

           

          知道了表達式3和4,我們就可以來看表達式1了,此時它是這樣的:”false[object Object]”[3],因為這個[]可以取字符串的子字符,像charAt一樣,所以得到了結果”s”

           

          四、最后

          經過上面艱難的流程,我們拿到了字符”s”,也就是那張圖的左半邊,剩下的那個”b”,相同的原理可以搞出來,我這里就不一一演示了,留給你練練吧~
          回顧一下這個過程其實也不復雜,只是有一些需要重復勞動的,只要你掌握了運算的優先級,能把大串分解成一個個小串,然后運用類型轉化的知識挨個處理就搞定了。怎么樣,看到這里你還覺得神奇嗎?
          如果有人瞧不起JS,請把這段代碼發給他,如果他想知道答案,請把本文發給他~


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/120

          三個實用的javascript小技巧

          如果你想從后向前獲取一個數組的元素,可以這樣寫:如果你想在某個條件邏輯值為true時,執行某個函數,就像這樣:如果你必須給一個變量賦默認值,可以簡單的這樣寫:

          JS技巧技法總結

          閉包原理、數組展平、前端語音(在項目中需要對ajax請求返回的消息進行語音播報,str 為返回的data)、Proxy 數據綁定和監聽、計數器

          JS禁止打開控制臺

          主要為了通過禁止打開控制臺,防止別人進行代碼調試。禁止右鍵查看源碼和F12;通過頁面寬度變化監測控制臺;利用控制臺特性改寫對象toString;利用控制臺特性進行監聽dom屬性

          javascript如何判斷值是否為整數?

          javascript如何判斷一個值是否為整數?下面本篇文章就來給大家介紹一下使用javascript判斷一個值是否為整數的方法。

          (a ==1 && a== 2 && a==3) 有可能是 true 嗎?

          1. 利用松散相等運算符 == 的原理,自定義 toString 和 valueOf 返回對應值2. 利用半寬度韓文等特殊字符,玩“障眼法”,本質上其實并沒有做到題設3. 劫持 JS 對象的 getter,不過這種方式對于嚴格相等 === 同樣有效

          js中~~和 | 的妙用

          ~~它代表雙非按位取反運算符,如果你想使用比Math.floor()更快的方法,那就是它了。需要注意,對于正數,它向下取整;對于負數,向上取整;非數字取值為0,它具體的表現形式為:

          js技巧_js中一些常見的陷阱

          這里我們針對JavaScript初學者給出一些技巧和列出一些陷阱。如果你已經是一個磚家,也可以讀一讀。你是否嘗試過對數組元素進行排序?

          5個小技巧讓你寫出更好的 JavaScript 條件語句

          使用 Array.includes 來處理多重條件,少寫嵌套,盡早返回,使用函數默認參數和解構,相較于 switch,Map / Object 也許是更好的選擇,使用 Array.every 和 Array.some 來處理全部/部分滿足條件,讓我們一起寫出可讀性更高的代碼吧

          js語言中常見錯誤總匯

          事實證明很多這些 null 或 undefined 的錯誤是普遍存在的。 一個類似于 Typescript 這樣的好的靜態類型檢查系統,當設置為嚴格的編譯選項時,能夠幫助開發者避免這些錯誤。

          js求數組的最大值--奇技淫巧和笨方法

          js中有很多“奇技淫巧”,有時我會常常刻意去用這些“奇技淫巧”(注意,我不是在反對用它,只是有時其實沒必要用)。比如,求數組中的最大值,js中Array沒有原生的求最大值的方法,但是Math有呀

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网