可以提升幸福感的js小技巧(上)

来源:https://www.cnblogs.com/Altairs/archive/2019/10/07/11629547.html
-Advertisement-
Play Games

1. 類型強制轉換 1.1 string強制轉換為數字 可以用 *1來轉化為數字(實際上是調用 .valueOf方法) 然後使用 Number.isNaN來判斷是否為 NaN,或者使用 a!==a 來判斷是否為 NaN,因為 NaN!==NaN 常用:也可以使用 +來轉化字元串為數字 1.2 obj ...


1. 類型強制轉換

1.1 string強制轉換為數字

可以用 *1來轉化為數字(實際上是調用 .valueOf方法) 然後使用 Number.isNaN來判斷是否為 NaN,或者使用 a!==a 來判斷是否為 NaN,因為 NaN!==NaN

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

常用:也可以使用 +來轉化字元串為數字

+ '123' // 123
+  'ds'  // NaN
+  ' '   // 0
+ null // 0
+ undefined  // NaN
+ { valueOf: ()=>'3'}    // 3

1.2 object強制轉化為string

可以使用 字元串+Object 的方式來轉化對象為字元串(實際上是調用 .toString() 方法)

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

當然也可以覆蓋對象的 toStringvalueOf方法來自定義對象的類型轉換:

2  * { valueOf: ()=> '3'}           // 6
'J' + { toString: ()=> 'S'}         // "JS"

《Effective JavaScript》P11:當 +用在連接字元串時,當一個對象既有 toString方法又有 valueOf方法時候,JS通過盲目使用 valueOf方法來解決這種含糊。對象通過 valueOf方法強制轉換為數字,通過 toString方法強制轉換為字元串

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

1.3 使用Boolean過濾數組中的所有假值

我們知道JS中有一些假值:falsenull0""undefinedNaN,怎樣把數組中的假值快速過濾呢,可以使用Boolean構造函數來進行一次轉換

const compact = arr => arr.filter( Boolean)
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34])             // [ 1, 2, 3, 'a', 's', 34 ]

1.4 雙位運算符 ~~

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

Math.floor(4.9) === 4  //true
// 簡寫為:
~~4.9 === 4      //true

不過要註意,對整數來說 ~~ 運算結果與 Math.floor() 運算結果相同,而對於負數來說不相同:

~~4.5            // 4
Math.floor(4.5)        // 4
~~-4.5    // -4
Math.floor(-4.5)        // -5

1.5 短路運算符

我們知道邏輯與 &&與邏輯或 ||是短路運算符,短路運算符就是從左到右的運算中前者滿足要求,就不再執行後者了;可以理解為:

  • &&為取假運算,從左到右依次判斷,如果遇到一個假值,就返回假值,以後不再執行,否則返回最後一個真值

  • ||為取真運算,從左到右依次判斷,如果遇到一個真值,就返回真值,以後不再執行,否則返回最後一個假值

let param1 = expr1 && expr2

let param2 = expr1 || expr2

因此可以用來做很多有意思的事,比如給變數賦初值:

let variable1

let variable2 = variable1  ||  'foo'

如果variable1是真值就直接返回了,後面短路就不會被返回了,如果為假值,則會返回後面的 foo

也可以用來進行簡單的判斷,取代冗長的 if語句:

let variable = param && param.prop

如果 param如果為真值則返回 param.prop屬性,否則返回 param這個假值,這樣在某些地方防止 paramundefined的時候還取其屬性造成報錯。

1.6 取整 |0

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

1.3 | 0    // 1
-1.9 | 0   // -1

1.7 判斷奇偶數 &1

對一個數字 &1可以判斷奇偶數,負數也同樣適用, num&1

const num= 3;
!!(num & 1)               // true
!!(num % 2)              // true

2. 函數

2.1 函數預設值

func = (l, m = 3, n = 4) => (l * m * n);
func(2)             //output: 24

註意,傳入參數為 undefined或者不傳入的時候會使用預設參數,但是傳入 null還是會覆蓋預設參數。

2.2 強制參數

預設情況下,如果不向函數參數傳值,那麼JS 會將函數參數設置為 undefined。其它一些語言則會發出警告或錯誤。要執行參數分配,可以使用 if語句拋出未定義的錯誤,或者可以利用 強制參數

mandatory = ( ) => {
    throw  new  Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {    // 這裡如果不傳入參數,就會執行manadatory函數報出錯誤
return bar;
}

2.3 隱式返回值

返回值是我們通常用來返回函數最終結果的關鍵字。只有一個語句的箭頭函數,可以隱式返回結果(函數必須省略大括弧 {},以便省略返回關鍵字)。

要返回多行語句(例如對象文本),需要使用 ()而不是 {}來包裹函數體。這樣可以確保代碼以單個語句的形式進行求值。

function  calcCircumference(diameter) {
    return  Math.PI * diameter
}
// 簡寫為:

calcCircumference = diameter => (
    Math.PI * diameter;
)

2.4 惰性載入函數

在某個場景下我們的函數中有判斷語句,這個判斷依據在整個項目運行期間一般不會變化,所以判斷分支在整個項目運行期間只會運行某個特定分支,那麼就可以考慮惰性載入函數

function foo(){   
    if(a !== b){
        console.log('aaa')
    }else{
        console.log('bbb')
    }
}

// 優化後
function foo(){
    if(a != b){
        foo = function(){
            console.log('aaa')
        }
    }else{foo = function(){
            console.log('bbb')
        }
    }
    return foo();
}              

那麼第一次運行之後就會覆寫這個方法,下一次再運行的時候就不會執行判斷了。當然現在只有一個判斷,如果判斷很多,分支比較複雜,那麼節約的資源還是可觀的。

2.5 一次性函數

跟上面的惰性載入函數同理,可以在函數體里覆寫當前函數,那麼可以創建一個一次性的函數,重新賦值之前的代碼相當於只運行了一次,適用於運行一些只需要執行一次的初始化代碼

var sca = function() {
    console.log('msg')
    sca = function() {
        console.log('foo')
    }
}
sca()        // msg
sca()        // foo
sca()        // foo

3. 代碼復用

3.1 Object [key]

雖然將 foo.bar 寫成 foo['bar'] 是一種常見的做法,但是這種做法構成了編寫可重用代碼的基礎。許多框架使用了這種方法,比如element的表單驗證。

請考慮下麵這個驗證函數的簡化示例:

function validate(values) { 
    if(!values.first)
        return false;
    if(!values.last)
        return false;
    return  true;
}
console.log(validate({first:'Bruce',last:'Wayne'}));  // true                    

上面的函數完美的完成驗證工作。但是當有很多表單,則需要應用驗證,此時會有不同的欄位和規則。如果可以構建一個在運行時配置的通用驗證函數,會是一個好選擇。

// object validation rules
const schema = {
    first: {
        required:true
    },
     last: {
        required:true
      }
}

// universal validation function
const  validate = (schema, values) => {
    for(field in schema) {
        if(schema[field].required) {
            if(!values[field]) {
                return  false;
      }
    }
   }
 return true;
}

console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true                               

現在有了這個驗證函數,我們就可以在所有窗體中重用,而無需為每個窗體編寫自定義驗證函數。

以下是原地址:

https://mp.weixin.qq.com/s?src=11&timestamp=1570409940&ver=1897&signature=I4iRaadFDIs3ZeTtAZWILnz*dEk-eUOIa0mY*Dqc2a9xKj38SWygNNL0Xi4vxUzqA9Wp4mfgXfXdSDLih4jlOaaZG29hW6NDPps8WMEYmseGYkhvq2kWRWKUbiTS29vB&new=1


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

-Advertisement-
Play Games
更多相關文章
  • 花費了幾周的時間斷斷續續的練習和模仿與使用JavaScript代碼實現了十大排序演算法。 裡面有每種演算法的動圖和靜態圖片演示,看到圖片可以自己先按照圖片的思路實現一下。 github中正文鏈接,點擊查看 兩年前端學習筆記:https://github.com/zhangyachang/Notes 歡迎 ...
  • 最近在學React Native,學到了CodePush熱更新。 老師講了兩種實現的方法,現將其記錄一下。 相比較原生開發,使用React Native開發App不僅能節約開發成本,還能做原生開發不能實現的熱更新功能。 使用原生技術開發App時,每次代碼做了改動後,都需要提交到應用商店進行審核,審核 ...
  • ## 今日內容: 1. JQuery 高級 1. 動畫 2. 遍歷 3. 事件綁定 4. 案例 5. 插件 ## JQuery 高級 1. 動畫 1. 三種方式顯示和隱藏元素 1. 預設顯示和隱藏方式 1. show([speed,[easing],[fn]]) 1. 參數: 1. speed:動畫 ...
  • 前言 在開發的時候,有時在命令工具裡面,要多開兩個視窗分別啟動前端項目和後端服務介面,有沒有辦法將整個項目一起啟動呢 答案是有,前端和後端連載一起啟動,適用於前端為vue或React,後端為nodejs的項目。 只需用到一個npm包concurrently模塊,通過package.json配置實現。 ...
  • 示例代碼托管在: "http://www.github.com/dashnowords/blogs" 博客園地址: "《大史住在大前端》原創博文目錄" 華為雲社區地址: "【你要的前端打怪升級指南】" [TOC] B站地址: "【編譯原理】" Stanford公開課: "【Stanford大學公開課 ...
  • 一.window相關 二.body相關 三.滾動相關 四.位置精確定位 五.坐標軸 六.width/clientWidth/offsetWidth以及height之間區別 ...
  • ## 今日內容 1. JQuery 基礎: 1. 概念 2. 快速入門 3. JQuery對象和JS對象區別與轉換 4. 選擇器 5. DOM操作 6. 案例 # JQuery 基礎: 1. 概念: 一個JavaScript框架。簡化JS開發 * jQuery是一個快速、簡潔的JavaScript框 ...
  • 1、複雜動畫 (1)涉及到的屬性: animation-name:動畫名稱; animation-duration:單次動畫總時長; animation-timing-function:時間函數; animation-delay:播放前延時的時長; animation-iteration-count ...
一周排行
    -Advertisement-
    Play Games
  • 前言 插件化的需求主要源於對軟體架構靈活性的追求,特別是在開發大型、複雜或需要不斷更新的軟體系統時,插件化可以提高軟體系統的可擴展性、可定製性、隔離性、安全性、可維護性、模塊化、易於升級和更新以及支持第三方開發等方面的能力,從而滿足不斷變化的業務需求和技術挑戰。 一、插件化探索 在WPF中我們想要開 ...
  • 歡迎ReaLTaiizor是一個用戶友好的、以設計為中心的.NET WinForms項目控制項庫,包含廣泛的組件。您可以使用不同的主題選項對項目進行個性化設置,並自定義用戶控制項,以使您的應用程式更加專業。 項目地址:https://github.com/Taiizor/ReaLTaiizor 步驟1: ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • Channel 是乾什麼的 The System.Threading.Channels namespace provides a set of synchronization data structures for passing data between producers and consume ...
  • efcore如何優雅的實現按年分庫按月分表 介紹 本文ShardinfCore版本 本期主角: ShardingCore 一款ef-core下高性能、輕量級針對分表分庫讀寫分離的解決方案,具有零依賴、零學習成本、零業務代碼入侵適配 距離上次發文.net相關的已經有很久了,期間一直在從事java相關的 ...
  • 前言 Spacesniffer 是一個免費的文件掃描工具,通過使用樹狀圖可視化佈局,可以立即瞭解大文件夾的位置,幫助用戶處理找到這些文件夾 當前系統C盤空間 清理後系統C盤空間 下載 Spacesniffer 下載地址:https://spacesniffer.en.softonic.com/dow ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 一、ReZero簡介 ReZero是一款.NET中間件 : 全網唯一開源界面操作就能生成API , 可以集成到任何.NET6+ API項目,無破壞性,也可讓非.NET用戶使用exe文件 免費開源:MIT最寬鬆協議 , 一直從事開源事業十年,一直堅持開源 1.1 純ReZero開發 適合.Net Co ...
  • 一:背景 1. 講故事 停了一個月沒有更新文章了,主要是忙於寫 C#內功修煉系列的PPT,現在基本上接近尾聲,可以回頭繼續更新這段時間分析dump的一些事故報告,有朋友微信上找到我,說他們的系統出現了大量的http超時,程式不響應處理了,讓我幫忙看下怎麼回事,dump也抓到了。 二:WinDbg分析 ...
  • 開始做項目管理了(本人3年java,來到這邊之後真沒想到...),天天開會溝通整理需求,他們講話的時候忙裡偷閑整理一下常用的方法,其實語言還是有共通性的,基本上看到方法名就大概能猜出來用法。出去打水的時候看到外面太陽好好,真想在外面坐著曬太陽,回來的時候好兄弟三年前送給我的鍵盤D鍵不靈了,在打"等待 ...