<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          安利幾個JS開發(fā)小技巧

          共 2676字,需瀏覽 6分鐘

           ·

          2020-08-26 19:10

          1 轉換布爾值

          除了常規(guī)的布爾值truefalse之外,JavaScript還將所有其他值視為 ‘truthy’ 或**‘falsy’**。

          除非另有定義,否則 JavaScript 中的所有值都是'truthy',除了0“”nullundefinedNaN,當然還有false,這些都是**'falsy'**

          我們可以通過使用負算運算符輕松地在truefalse之間切換。它也會將類型轉換為“boolean”。

          const isTrue  = !0;const isFalse = !1;const alsoFalse = !!0;console.log(isTrue); // Result: trueconsole.log(typeof true); // Result: "boolean"

          2 轉換數字

          使用加法運算符+可以快速實現相反的效果。

          let int = "15";int = +int;console.log(int); // Result: 15console.log(typeof int); Result: "number"

          這也可以用于將布爾值轉換為數字,如下所示

           console.log(+true);  // Return: 1 console.log(+false); // Return: 0

          在某些上下文中,+將被解釋為連接操作符,而不是加法操作符。當這種情況發(fā)生時(你希望返回一個整數,而不是浮點數),您可以使用兩個波浪號:~~

          連續(xù)使用兩個波浪有效地否定了操作,因為—?(?—?n?—?1)?—?1 = n + 1?—?1 = n。換句話說,~—16 等于15

          const int = ~~"15"console.log(int); // Result: 15console.log(typeof int); Result: "number"

          雖然我想不出很多用例,但是按位NOT運算符也可以用在布爾值上:~true = \-2~false = \-1

          3轉換字符串

          要快速地將數字轉換為字符串,我們可以使用連接運算符+后跟一組空引號""

          const val = 1 + "";console.log(val); // Result: "1"console.log(typeof val); // Result: "string"

          4浮點數轉整數

          如果希望將浮點數轉換為整數,可以使用Math.floor()Math.ceil()Math.round()。但是還有一種更快的方法可以使用|(位或運算符)將浮點數截斷為整數。

          console.log(23.9 | 0);  // Result: 23console.log(-23.9 | 0); // Result: -23

          |的行為取決于處理的是正數還是負數,所以最好只在確定的情況下使用這個快捷方式。

          如果n為正,則n | 0有效地向下舍入。如果n為負數,則有效地向上舍入。更準確地說,此操作將刪除小數點后面的任何內容,將浮點數截斷為整數。

          你可以使用~~來獲得相同的舍入效果,如上所述,實際上任何位操作符都會強制浮點數為整數。這些特殊操作之所以有效,是因為一旦強制為整數,值就保持不變。

          刪除最后一個數字

          按位或運算符還可以用于從整數的末尾刪除任意數量的數字。這意味著我們不需要使用這樣的代碼來在類型之間進行轉換。

          let str = "1553";Number(str.substring(0, str.length - 1));

          相反,按位或運算符可以這樣寫:

          console.log(1553 / 10   | 0)  // Result: 155console.log(1553 / 100  | 0)  // Result: 15console.log(1553 / 1000 | 0)  // Result: 1

          5格式化JSON

          最后,你之前可能已經使用過JSON.stringify,但是您是否意識到它還可以幫助你縮進JSON?

          stringify()方法有兩個可選參數:一個replacer函數,可用于過濾顯示的JSON和一個空格值。

          console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));// Result:// '{//     "alpha": A,//     "beta": B// }'

          6取數組最后一項

          數組方法slice()可以接受負整數,如果提供它,它將接受數組末尾的值,而不是數組開頭的值。

          let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(array.slice(-1)); // Result: [9]console.log(array.slice(-2)); // Result: [8, 9]console.log(array.slice(-3)); // Result: [7, 8, 9]

          7es6數組去重

          Set對象類型是在ES6中引入的,配合展開操作...一起,我們可以使用它來創(chuàng)建一個新數組,該數組只有唯一的值。

          const array = [1, 1, 2, 3, 5, 5, 1]const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]

          在ES6之前,隔離惟一值將涉及比這多得多的代碼。

          此技巧適用于包含基本類型的數組:undefinednullbooleanstringnumber。(如果你有一個包含對象,函數或其他數組的數組,你需要一個不同的方法!)

          8更優(yōu)雅的運算

          從ES7開始,可以使用指數運算符**作為冪的簡寫,這比編寫Math.pow(2, 3) 更快。這是很簡單的東西,但它之所以出現在列表中,是因為沒有多少教程更新過這個操作符。

          console.log(2 ** 3); // Result: 8

          這不應該與通常用于表示指數的^符號相混淆,但在JavaScript中它是按位異或運算符。

          在ES7之前,只有以2為基數的冪才存在簡寫,使用按位左移操作符<<

          Math.pow(2, n);2 << (n - 1);2**n;

          例如,2 << 3 = 16等于2 ** 4 = 16

          最近:

          教你寫一個快速提交git代碼的shell腳本




          瀏覽 45
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  久插网| 五月天性爱| 8050午夜无码一区二区三区 | 美女天天日 | 国产无码福利在线视频 |