JavaScript 系列--JavaScript一些奇淫技巧的實現方法(三)數字取整,數組求和

一、前言

簡短的sleep函數,獲取時間戳:https://www.mwcxs.top/page/74...

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

https://www.mwcxs.top/page/74...

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

二、數字取整

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交流學習社區:https://www.mwcxs.top/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章