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

saucxs發表於2019-06-06
JavaScript陣列

一、前言

簡短的sleep函式，獲取時間戳：www.mwcxs.top/page/746.ht…

數字格式化 1234567890 --> 1,234,567,890；argruments 物件(類陣列)轉換成陣列：

www.mwcxs.top/page/749.ht…

今天我們來介紹一下數字取整，陣列求和。

二、數字取整

1、普通版

const a = parseInt(2.33333); parseInt()方法是解析一個字串引數，並返回一個指定基數的整數。這個就是我們最常用的取整的最常用的方式。

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

parseInt語法：parseInt(string, radix);

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

radix：一個介於2和36之間的整數(數學系統的基礎)，表示上述字串的基數。比如引數"10"表示使用我們通常使用的十進位制數值系統。始終指定此引數可以消除閱讀該程式碼時的困惑並且保證轉換結果可預測。當未指定基數時，不同的實現會產生不同的結果，通常將值預設為10。

2、進階版

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);
};
複製程式碼

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

3、~~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 ?
複製程式碼

4、按位或 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 
複製程式碼

5、按位異或 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

6、左移 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）的範圍，會有一些異常，使用前判斷數值的範圍。

前端知識點：按位運算

三、陣列求和

1、普通版

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
複製程式碼

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

2、優雅版本

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

優點：簡單明瞭，陣列迭代器方式清晰直觀 缺點：不相容 IE 9以下瀏覽器

3、終極版

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交流學習社群：www.mwcxs.top/】

相關文章