你不一定知道的幾個前端小知識

呂大豹發表於2016-07-21
前端

1

大家都知道js在進行小數運算時會有丟失精度問題（其他語言也是），比如：

0.1+0.2 //0.30000000000000004

有一種比較快捷的方式是先把小數乘以10的整數倍，然後再運算，如：

(0.1*10+0.2*10)/10 //0.3

但是這種方式也不是100%準確的，乘以整百也可能精度丟失，比如：

2177.74*100 //217773.99999999997

所以常用的幾種處理方式有：

  1. 把小數轉化為字串，拆分整數部分和小數部分分別計算，然後再把結果進行拼接;
  2. 先乘10的整數倍，然後再用toFixed進行四捨五入，這樣能保證結果還是準確的，如： 
    (2177.74*100).toFixed(0); //217774
  3. 直接運算，然後再用toFixed（或者Math.round）進行四捨五入，用於對計算結果不是很精確的場景。

2

<a>標籤的download屬性可以用來設定使用者下載後的檔名稱，如：

<a href="xxx.jpg" download="改名後的檔案,jpg" />

但是有一點要注意，檔案不能跨域，如果下載檔案處於和當前域不同的域，則改名失敗。

3

用instanceof來判斷跨iframe的物件型別時，會失效。比如我們在父頁面定義了一個陣列：

var arr = [1,2,3];

然後在iframe中來訪問父頁面的arr物件：

console.log(parent.arr); //[1,2,3]
console.log(parent.arr instanceof Array); //false

原因是不同的視窗各有一套自己的宿主物件，父視窗的Array構造器與子視窗的Array構造器並不是同一個，也就是說，arr是父視窗的Array例項，並不是子視窗的Array例項。

這就是為什麼我們判斷陣列的時候要這麼辦：

Object.prototype.toString.call(parent.arr); //[object Array]

4

我們常用JSON.stringify方法來格式化json物件。其實這個stringify方法還接收第三個引數，支援把格式化後的字串加一定縮排，比如：

JSON.stringify(obj, undefined, 4);

結果如下：

{
    "num": 1234,
    "str": "字串",
    "arr": [
        1,
        2,
        3,
        4,
        5,
        6
    ],
    "obj": {
        "name": "tom",
        "age": 10,
        "like": [
            "a",
            "b"
        ]
    }
}

沒錯，上面是一個字串。如果再用正則匹配一下，把屬性/值給加上不同的高亮顏色，那麼一個簡單的json資料展示功能就有了：

關於高亮函式的寫法，我在這篇文章中有詳細提到，有興趣可以去看看。

5

js的Date物件在進行日期計算時，會自動進行月份判斷以及平年閏年判斷，我們可以利用這一點來做一些小技巧。

當我們想計算某個月份有多少天時，經常會先判斷當前月份有30天還是31天，還得判斷是否是閏年。 其實，計算2016年7月份有多少天，可以這麼寫：

new Date(2016, 7, 0).getDate(); //31

js的月份從0開始，這裡我們其實求的是8月0號，就會得到7月31號，也就拿到了31這個天數。

同樣，想計算某天再過20天是幾月幾號，也不必進行自己判斷月份以及閏年。比如計算今天再過20天的日期：

new Date(2017, 6, 20+20);
//Wed Aug 09 2017 00:00:00 GMT+0800

得到了8月9號。看到了吧，日期那裡超過了31號，js會自動幫你計算到下個月。

 

 

相關文章