JavaScript 技巧收藏

pkhope 發布于2019-08-23 18:27 / 1100人閱讀

摘要：對象通過方法強制轉化為數字，通過方法強制轉換為字符串過濾數組中的所有假植中有一些假值過濾這些假值，可以使用構造函數來進行一次轉換雙位運算符可以使用雙位操作符來代替。雙否定位操作符的優勢在于它執行相同的操作運行速度更快。

JavaScript 小技巧 1.類型轉換

string -> number

"32" * 1       // 32
"abc" * 1      // NaN
 null * 1      // 0
 undefined * 1 // NaN
 { valueOf: () => "3"} * 1  //3

常用： 也可以使用 + 來轉化字符串為數字

+ "32"  // 32
+ "abc" // NaN
+ ""    // 0
+ null  // 0
+ undefined // NaN
+ { valueOf: () => "3" } // 3

object -> string
可以使用字符串+Object 的方式來轉化對象為字符串（實際上是調用 .toString() 的方法)

    "the Math object:"+ Math  // "the Math object:[object Match]" 
    "the JSON object:"+ JSON  // "the JSON object:[object JSON]"

當然也可以覆蓋對象的 toString 和 valueOf 方法來自定義

    2 * { valueOf: () => "3" }  // 6
   "A" + { toString: () => "B" } // "AB"

當 + 用在連接字符串時，當一個對象既有 toString 方法又有 valueOf 方法時候，  
JS 通過盲目使用 valueOf 方法來解決這種含糊。對象通過 valueOf 方法強制轉化  
為數字，通過toString 方法強制轉換為字符串

    "" + { toString: () => "S", valueOf: () => "J" }  // J

boolean 過濾數組中的所有假植
JS 中有一些假值: false, null, 0, "", undefined, NaN, 過濾這些假值，可以
使用 Boolean 構造函數來進行一次轉換

  const compact = arr => arr.filter(Boolean)
  
  compact([ 0, 1, false, 2, "", 3, "a", "b" * 23, NaN, "s", 23 ])  

  // ?[1, 2, 3, "a", "s", 23]

雙位運算符 ~~
可以使用雙位操作符來代替 Math.floor()。雙否定位操作符的優勢在于它執行相同的
操作運行速度更快。

    Math.floor(3.8) === 3  // true
    ~~3.8 === 3  // true

注意： ～～對整數有效，對負數不相同

短路運算符
邏輯與 && 與邏輯或 || 是短路運算符，短路運算符就是從左到右的運算中前者滿足要求，
就不再執行后者了；可以理解為：

&&  為取假運算，從左到右一次判斷，遇假值就返回假值，以后不再執行，否則返回最后
一個真值。   
||  為取真運算，從左到右依次判斷，遇真值就返回真值，以后不再執行，否則返回最后   
一個假值

    let param1 = expr1 && expr2
    let param2 = expr1 || expr2

|運算符|示例|說明|
|:-------: | :-----------------------: | :------------------:|
|&&| expr1 && expr2| 如果expr1 能轉換成 false 則返回 expr1，否則返回 expr2
因此，Boolean環境中使用時，
兩個操作結果都為 true 時返回 true 否則返回 false|
| || | expr1 || expr2 | 如果 expr1 能轉換成 true 則返回 expr1，否者返回 expr2,
因此在Boolean 環境中使用時，
有一個結果為 true 時返回 true，兩個結果都為false 返回 false|

因此可以用來做很多有意思的事，給變量賦初始值和判斷

    // init v
    let variable1;
    let variable2 = variable1 || "foo";
  
    // check param
    let varibale = param && param.id;

取整 |0
對一個數字 |0 可以取整，負數也同樣適用， num|0

    1.3 | 0    // 1

- 判斷奇偶數

#### 2.函數相關
- 函數默認值
- 強制參數
- 隱式返回值
- 惰性載入函數
- 一次性函數
#### 3.代碼復用
- Object [key]
####4.數字字面量
- 進制表示法
- 精確到指定位數的小數
#### 5.數組相關
- reduce 方法同時實現 map 和 filter
- 統計數組中相同項的個數
- 使用解構來交換參數數值
- 接收函數返回的多個結果
- 將數組平鋪到指定深度
- 數組的對象解構
#### 6.對象相關
- 使用解構刪除不必要的屬性

GPU云服務器云服務器 JAVASCRIPT技巧 javascript七大技巧 javascript調試技巧 Javascript注入技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105249.html

CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0
值得收藏 7 個有用JavaScript技巧

摘要：值得收藏個有用技巧像其它語言一樣中也可以通過一些技巧來完成一些復雜的操作接下來我們學習吧數組去重數組和布爾有時我們需要過濾數組中值為的值例如你可能不知道這樣的技巧是不是很簡單只需要傳入一個函數即可創建一個空對象有時我們需要創建一個純凈的對象值得收藏 7 個有用JavaScript技巧像其它語言一樣,JavaScript中也可以通過一些技巧來完成一些復雜的操作. 接下來我們學習吧數...

layman 2019-08-23 18:29 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 評論0 收藏0