JavaScript 系列--JavaScript一些奇淫技巧的實現方法（三）數字取整，數組求和

1、前言

簡短的sleep函數，獲取時間戳：https://www.mwcxs.top/page/746.html

數字格式化 1234567890 --> 1,234,567,890；argruments 對象(類數組)轉換成數組：

https://www.mwcxs.top/page/749.html

今天咱們來介紹一下數字取整，數組求和。

 

2、數字取整

一、普通版

const a = parseInt(2.33333);

parseInt()方法是解析一個字符串參數，並返回一個指定基數的整數。這個就是咱們最經常使用的取整的最經常使用的方式。

parseInt() 函數解析一個字符串參數，並返回一個指定基數的整數 (數學系統的基礎)。

parseInt語法：parseInt(string, radix);

string：要被解析的值。若是參數不是一個字符串，則將其轉換爲字符串(使用  ToString 抽象操做)。字符串開頭的空白符將會被忽略。

radix：一個介於2和36之間的整數(數學系統的基礎)，表示上述字符串的基數。好比參數"10"表示使用咱們一般使用的十進制數值系統。始終指定此參數能夠消除閱讀該代碼時的困惑而且保證轉換結果可預測。當未指定基數時，不一樣的實現會產生不一樣的結果，一般將值默認爲10。

 

二、進階版

const a = Math.trunc(2.33333)

Math.trunc()方法會將數字的小數部分去掉，只保留整數部分（常說的「取整」，不是四捨五入）。

注意：Internet Explorer 不支持這個方法，不過寫個 Polyfill 也很簡單：

Math.trunc = Math.trunc || function(x) {
  if (isNaN(x)) {
    return NaN;
  }
  if (x > 0) {
    return Math.floor(x);
  }
  return Math.ceil(x);
};

數學的事情仍是用數學方法來處理比較好。

 

三、~~number

這個符號是什麼鬼，沒有用過，沒關係，慢慢看。這個~~操做符也被稱爲「雙按位非」操做符。你一般可使用它做爲替代Math.trunc()的更快的方法。

console.log(~~66.11)  // 66
console.log(~~12.9999) // 12
console.log(~~6)      // 6
console..log(~~-6.9999999999)   // -6
console.log(~~[])     // 0
console.log(~~NaN)    // 0
console.log(~~null)   // 0

失敗時返回0,這可能在解決 Math.trunc() 轉換錯誤返回 NaN 時是一個很好的替代。

注意：可是當數字範圍超出 ±2^31−1 即：2147483647 時，異常就出現了。

// 異常狀況
console.log(~~2147493647.123) // -> -2147473649 🙁

 

四、按位或 number|0

這個就比較容易理解了。| 是按位或，對每一對比特位執行或（OR）操做。

console.log(20.15|0);          // 20
console.log((-20.15)|0);       // -20

注意：可是當數字範圍超出 ±2^31−1 即：2147483647 時，異常就出現了。

console.log(3000000000.15|0);  // -1294967296 

 

五、按位異或 number^0

^ (按位異或)，對每一對比特位執行異或（XOR）操做。

console.log(20.15^0);          // -> 20
console.log((-20.15)^0);       // -> -20

注意：可是當數字範圍超出 ±2^31−1 即：2147483647 時，異常就出現了。

console.log(3000000000.15^0);  // -> -1294967296

 

六、左移 number<<0

<< (左移) 操做符會將第一個操做數向左移動指定的位數。向左被移出的位被丟棄，右側用 0 補充。

console.log(20.15 << 0);     // -> 20
console.log((-20.15) << 0);  //-20

注意：可是當數字範圍超出 ±2^31−1 即：2147483647 時，異常就出現了。

console.log(3000000000.15 << 0);  // -> -1294967296

 

上面講的按位運算符方法執行很快，當你執行數比較大的時候很是適用，能看出來區別。

注意：當數字超過±2^31−1（2147483647）的範圍，會有一些異常，使用前判斷數值的範圍。

前端知識點：按位運算

 

3、數組求和

一、普通版

let arr = [1, 2, 3, 4, 5]
function sum(arr){
    let x = 0
    for(let i = 0; i < arr.length; i++){
        x += arr[i]
    }
    return x
}
sum(arr) // 15

優勢：通俗易懂，簡單粗暴
缺點：沒有亮點，太通俗

 

二、優雅版本

let arr = [1, 2, 3, 4, 5]
function sum(arr) {
return arr.reduce((prev, item) => prev + item)
}
sum(arr) //15

優勢：簡單明瞭，數組迭代器方式清晰直觀
缺點：不兼容 IE 9如下瀏覽器

 

三、終極版

let arr = [1, 2, 3, 4, 5]
function sum(arr) {
return eval(arr.join("+"))
}
sum(arr) //15

優勢：讓人一時看不懂的就是"好方法"。

缺點：（1）eval 不容易調試，用 chromeDev 等調試工具沒法打斷點調試，因此麻煩的東西也是不推薦使用的。

（2）性能問題，在舊的瀏覽器中若是你使用了eval，性能會降低10倍。在現代瀏覽器中有兩種編譯模式：fast path和slow path。fast path是編譯那些穩定和可預測（stable and predictable）的代碼。而明顯的，eval 不可預測，因此將會使用 slow path ，因此會慢。

前端知識點：eval的使用細則

 

【謝謝關注和閱讀，後續新的文章首發：sau交流學習社區：https://www.mwcxs.top/】