本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新~

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

123456

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

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

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

1234567

+'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]"

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

當然也可以覆蓋物件的toString和valueOf方法來自定義物件的型別轉換：

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

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

《Effective JavaScript》P11：當+用在連線字串時，當一個物件既有toString方法又有valueOf方法時候，JS通過盲目使用valueOf方法來解決這種含糊。 物件通過valueOf方法強制轉換為數字，通過toString方法強制轉換為字串

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

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

1.3 使用Boolean過濾陣列中的所有假值

我們知道JS中有一些假值：false，null，0，""，undefined，NaN，怎樣把陣列中的假值快速過濾呢，可以使用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 ]

123	constcompact=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

1234	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

12345

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

1.5 短路運算子

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

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

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

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

運算子	示例	說明
&&	expr1&&expr2	如果expr1 能轉換成false則返回expr1,否則返回expr2. 因此, 在Boolean環境中使用時, 兩個操作結果都為true時返回true,否則返回false.
||	expr1||expr2	如果expr1能轉換成true則返回expr1,否則返回expr2. 因此,在boolean環境(在if的條件判斷中)中使用時, 二者操作結果中只要有一個為true,返回true;二者操作結果都為false時返回false.
!	!expr	如果單個表示式能轉換為true的話返回false,否則返回true.

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

let variable1 let variable2 = variable1 || 'foo'

123	let variable1let variable2=variable1||'foo'

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

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

let variable = param && param.prop

12	let variable=param&&param.prop

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

1.6 取整 | 0

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

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

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

1.7 判斷奇偶數 & 1

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

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

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

2. 函式

2.1 函式預設值

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

123	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; }

1234567

mandatory=()=>{thrownewError('Missing parameter!');}foo=(bar=mandatory())=>{// 這裡如果不傳入引數，就會執行manadatory函式報出錯誤returnbar;}

2.3 隱式返回值

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

要返回多行語句（例如物件文字），需要使用( )而不是{ }來包裹函式體。這樣可以確保程式碼以單個語句的形式進行求值。

function calcCircumference(diameter) { return Math.PI * diameter } // 簡寫為： calcCircumference = diameter => ( Math.PI * diameter; )

12345678

functioncalcCircumference(diameter){returnMath.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(); }

12345678910111213141516171819202122

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

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

2.5 一次性函式

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

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

12345678910

varsca=function(){console.log('msg')sca=function(){console.log('foo')}}sca()// msgsca()// foosca()// foo

3. 字串

3.1 字串比較時間先後

比較時間先後順序可以使用字串：

JavaScript var a = "2014-08-08"; var b = "2014-09-09"; console.log(a>b, a<b); // false true console.log("21:00"<"09:10"); // false console.log("21:00"<"9:10"); // true 時間形式注意補0

123456

vara="2014-08-08";varb="2014-09-09";console.log(a>b,a<b);// false trueconsole.log("21:00"<"09:10");// falseconsole.log("21:00"<"9:10");// true   時間形式注意補0

因為字串比較大小是按照字串從左到右每個字元的charCode來的，但所以特別要注意時間形式注意補0

4. 數字

4.1 不同進製表示法

ES6中新增了不同進位制的書寫格式，在後臺傳參的時候要注意這一點。

29 // 10進位制 035 // 8進位制29 原來的方式 0o35 // 8進位制29 ES6的方式 0x1d // 16進位制29 0b11101 // 2進位制29

123456

29// 10進位制035// 8進位制29      原來的方式0o35// 8進位制29      ES6的方式0x1d// 16進位制290b11101// 2進位制29

4.2 精確到指定位數的小數

將數字四捨五入到指定的小數位數。使用 Math.round() 和模板字面量將數字四捨五入為指定的小數位數。 省略第二個引數 decimals ，數字將被四捨五入到一個整數。

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`) round(1.345, 2) // 1.35 round(1.345, 1) // 1.3

相關推薦 JS 中可以提升幸福度的小技巧 本文主要介紹一些JS中用到的小技巧，可以在日常Coding中提升幸福度，將不定期更新~ 1. 型別強制轉換 1.1 string強制轉換為數字 可以用*1來轉化為數字(實際上是呼叫.valueOf方法) 然後使用Number.isNaN來判斷是否為NaN，或者使用 a !== 移動端開發中模擬手機測試小技巧 小技巧 erl windows ati 頁面效果 cal ora 分享 地址 情景：在開發移動端情況下，pc看到的效果有時於真實手機裏看到的效果可以不大一樣，將代碼發送到服務器再去測試又太麻煩， 這時，下面的小技巧可能就比較有用了，前提需要 pc跟手機一部，並且 iOS中MVP架構實踐小技巧 一般來說，MVP架構在Andriod中用的比較多，但它也可以在iOS中使用。我在重構專案的一個功能時，為了改善以前程式碼的層次結構，同時也想體驗一下MVP的實踐，所以使用了該模式，同時也積累了一點小技巧。 MVP分層模型以及互動關係如圖所示： view和model通過presenter進 JS除錯獲取執行時間小技巧 console.time()和console.timeEnd()函式，引數名相同就是一對的 console.time('名稱X') //要執行的程式碼放中間(x段落) console.timeEnd('名稱x') console.time('名稱y') //要執行的程式碼放中間( angular js和一些個人總結小技巧 獲取url中的網路字尾元素 function getParam(paramName) { paramValue = ""; isFound = false; if (this.location.search.indexOf("?") ACM中的幾個小技巧(離散化，尺取法，資料預處理) 離散化 使用STL演算法離散化： 思路：先排序，再刪除重複元素，然後就是索引元素離散化後對應的值。 假定待離散化的序列為a[n]，b[n]是序列a[n]的一個副本，則對應以上三步為： sor React中Ajax非同步解決小技巧 1.設定 setTimeout定時器，通過延遲下一操作的執行時間，來解決ajax網路請求和下一操作非同步的衝突（注意：時長的設定要大於等於網路請求的執行時間），程式碼如下 // 定義狀態機 MyEclipse使用中的問題和小技巧 問題（不定期更新）： 1.專案名上有紅色的感嘆號—>工程中classpath中指向的包路徑錯誤—>專案名—>右鍵Build Path—>Configure Build     Path—>選項卡中找到 Libraries—> 列出工程中引 在Unity3D中使用暫停的小技巧 很多人在遊戲中寫暫停指令碼的時候，經常會想到 Time.timeScale = 0; 這種方法，但是 Time.timeScale 只是能暫停部分東西。如果在 update 函式中持續改變一個物體的位置，這種位置改變貌似是不會受到暫停影響的。比如  transform.po ASP.NET程式設計中的十個小技巧 1、在使用Visual Studio .NET時，除直接或非引用的物件外，不要使用預設的名字。 .NET帶來的好處之一是所有的原始碼和配置檔案都是純文字檔案，能夠使用Notepad或Word  Pad等任意的文字編輯器進行編輯。如果不願意，我們並非一定要使用Visual S python中for迴圈的小技巧 偶爾看到一個神奇的用法: [[row[i] for row in matrix] for i in range(4)] 這是幹嘛的？就是把一個矩陣轉制。。轉制。。轉制。。我擦那麼吊？ 然後就呼叫了一部分試試，發現樂是這麼個意思： 當for語句再外面有個[  ]的時候。可以 Android開發中padding使用一個小技巧    在安卓應用開發中，有時要用到狀態按鈕（可點選時與不可點選時的背景不相同），而且產品要求的按鈕大小是固定的。在不同的手機上按鈕的文字顯示可能有些異常（主要是在給按鈕做背景時很容易出現），此時我們怎 HTML5中video標籤的小技巧 1. 低版本webview中事件不觸發的問題 在低版本的webview中如果我們使用video的on媒介事件，如onplay,onended,onwaiting等等，這些事件可能會觸發不了； var video = document.getElementBy js 利用||和&&賦值小技巧 對於需要返回boolean型別數值的地方，比如if判斷，邏輯運算子，js物件會預設轉換為boolean型別資料。null，undefined，0，”“返回false，其他返回true。 同時，對於||與&&又有這樣的特性： var a = b 使用裁剪工具拉直Lightroom CC中的照片的小技巧 怎樣 但是 image 時間 text 添加 roc 如果 RoCE 怎樣用裁剪工具拉直Lightroom CC中的照片？這個問題看似很簡單，但是如果我們不能掌握其中的小技巧，就會花費我們雙倍甚至更多的時間。所以，今天給大家帶來使用裁剪工具拉直Lightroom CC中的照 Notepad++提升工作效率小技巧 前言   簡單的提升工具效率需求可以藉助Notepad編輯器實現。以前也用Python/Shell開發過本文中提到的需求，現在發現其實沒有必要。本文介紹一些工作中常見的可以通過"Notepad+正則表示式"實現的案例供參考。另外，強調一下，學好正則表示式很有用。 提升效率需求 需求1：將指定一 處理 JS中 undefined 的 7 個技巧 摘要： JS的大部分報錯都是undefined... 作者：前端小智 原文：處理 JS中 undefined 的 7 個技巧 超實用，Linux中檢視文字的小技巧 日常開發中，我們經常需要在伺服器上進行各種文字，日誌的檢視操作，本文主要對常用的文字，日誌檢視技巧進行了一番總結和歸納，方便大家收藏起來後續檢視使用： tail命令檢視日誌資訊 實時監控日誌： tail -f filename   實時監控10行日誌資訊： tail -10f filename css 中的背景圖片小技巧和存在的坑 本文轉載於:猿2048網站➜css 中的背景圖片小技巧和存在的坑 body 的背景圖設定   第一種 :這種情況下背 Excel表中常用5個小技巧，看似不起眼操作很強大 Excel技巧是辦公必備，在職場中手裡沒點硬貨，怎樣能在高強度的工作中“奮戰”狀態。相信熟練使用工作中的軟體會加分很多吧，不僅時間