摘要：一前言之前寫了一篇文章系列一些奇淫技巧的實(shí)現(xiàn)方法一簡短的函數(shù)，獲取時(shí)間戳介紹了函數(shù)和獲取時(shí)間戳的方法。，和對(duì)象的構(gòu)造函數(shù)是對(duì)象的屬性。缺點(diǎn)低版本，無法處理集合的轉(zhuǎn)數(shù)組。

之前寫了一篇文章：JavaScript 系列--JavaScript一些奇淫技巧的實(shí)現(xiàn)方法（一）簡短的sleep函數(shù)，獲取時(shí)間戳

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

介紹了sleep函數(shù)和獲取時(shí)間戳的方法。接下來我們來介紹數(shù)字格式化1234567890 --> 1,234,567,890

// 數(shù)字格式化 1234567890 --> 1,234,567,890
function formatNumber(str){
    var arr = [];
    var count = str.length;
    while(count>=3){
        arr.unshift(str.slice(count - 3, count));
        count -= 3;
    }
    // 如果是不是3的倍數(shù)就另外追加到上去
    str.length % 3 && arr.unshift(str.slice(0, str.length % 3));
    return arr.toString();
}
formatNumber("1234567890")

優(yōu)點(diǎn)：自我感覺比網(wǎng)上寫的一堆 for循環(huán) 還有 if-else 判斷的邏輯更加清晰直白。
缺點(diǎn)：太普通

// 2、進(jìn)階版
function formatNumber(str){
    return str.split("").reverse().reduce((prev,next,index) => {
        return ((index%3)? next: (next+",")) + prev;
    })
}
formatNumber("1234567890");

優(yōu)點(diǎn)：把 JS 的 API 玩的了如指掌
缺點(diǎn)：不好理解

function formatNumber(str){
    return str.replace(/(?!^)(?=(d{3})+$)/g,",")
}
formatNumber("1234567890");

我們來看看正則的分析：

（1）/(?!^)(?=(d{3})+b)/g：匹配的這個(gè)位置不能是開頭(?!^)

（2）(d{3})+：必須是1個(gè)或者多個(gè)的3個(gè)連續(xù)數(shù)字

優(yōu)點(diǎn)：代碼少，簡潔。

缺點(diǎn)：正則表達(dá)式的位置匹配很重要，可以參考這個(gè)：https://www.mwcxs.top/page/58...

(1234567890).toLocaleString("en-us");
(1234567890).toLocaleString();
1234567890..toLocaleString();

你可能還不知道 JavaScript 的 toLocaleString 還可以這么玩。

123456789..toLocaleString("zh-hans-cn-u-nu-hanidec",{useGrouping: false}); //"一二三四五六七八九"
123456789..toLocaleString("zh-hans-cn-u-nu-hanidec",{useGrouping: true}); //"一二三，四五六，七八九"
new Date().toLocaleString("zh-hans-cn-u-nu-hanidec"); //"二〇一九/五/二九 下午三:一五:四〇"

還可以使用Intl對(duì)象，

Intl 對(duì)象是 ECMAScript 國際化 API 的一個(gè)命名空間，它提供了精確的字符串對(duì)比，數(shù)字格式化，日期和時(shí)間格式化。Collator，NumberFormat 和 DateTimeFormat 對(duì)象的構(gòu)造函數(shù)是 Intl 對(duì)象的屬性。

new Intl.NumberFormat().format(1234567890) // 1,234,567,890
優(yōu)點(diǎn)：簡單粗暴，直接調(diào)用api

缺點(diǎn)：Intl兼容性不太好，不過 toLocaleString的話 IE6 都支持

前端知識(shí)點(diǎn)：Intl對(duì)象 和 toLocaleString的方法。

那什么是類數(shù)組？就是跟數(shù)組很像，但是他是對(duì)象，格式像數(shù)組所以叫類數(shù)組。比如：{0:a,1:b,2:c,length:3}，按照數(shù)組下標(biāo)排序的對(duì)象，還有一個(gè)length的屬性，有時(shí)候我們需要這種對(duì)象能調(diào)用數(shù)組下的一個(gè)方法，這時(shí)候就需要把把類數(shù)組轉(zhuǎn)化成真正的數(shù)組。

var makeArray = function(arr){
    var res = [];
    if(arr != null){
        var i = arr.length;
        if(i == null || typeof arr == "string") res[0] = arr;
        else while(i){res[--i] = arr[i];}
    }
    return res;
};
var obj = {0:"a",1:"b",2:"c",length:3};
makeArray(obj);

優(yōu)點(diǎn)：通用版本，沒有任何兼容性問題
缺點(diǎn)：暫時(shí)沒有啥缺點(diǎn)

// 2、進(jìn)階版
var arr = Array.prototype.slice.call(arguments);

大家用過最常用的方法，至于為什么可以這么用，很多人估計(jì)也是一知半解，要搞清為什么里面的原因，我們還是從規(guī)范和源碼說起。

slice.call 的作用原理就是，利用 call，將 slice 的方法作用于 arrayLike，slice 的兩個(gè)參數(shù)為空，slice 內(nèi)部解析使得 arguments.lengt 等于0的時(shí)候 相當(dāng)于處理 slice(0) ： 即選擇整個(gè)數(shù)組，slice 方法內(nèi)部沒有強(qiáng)制判斷必須是 Array 類型，slice 返回的是新建的數(shù)組（使用循環(huán)取值）”，所以這樣就實(shí)現(xiàn)了類數(shù)組到數(shù)組的轉(zhuǎn)化，call 這個(gè)神奇的方法、slice 的處理缺一不可。

直接看 slice 怎么實(shí)現(xiàn)的吧。其實(shí)就是將 array-like 對(duì)象通過下標(biāo)操作放進(jìn)了新的 Array 里面，下面是源碼

// This will work for genuine arrays, array-like objects, 
    // NamedNodeMap (attributes, entities, notations),
    // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes),
    // and will not fail on other DOM objects (as do DOM elements in IE < 9)
    Array.prototype.slice = function(begin, end) {
      // IE < 9 gets unhappy with an undefined end argument
      end = (typeof end !== "undefined") ? end : this.length;

      // For native Array objects, we use the native slice function
      if (Object.prototype.toString.call(this) === "[object Array]"){
        return _slice.call(this, begin, end); 
      }

      // For array like object we handle it ourselves.
      var i, cloned = [],
        size, len = this.length;

      // Handle negative value for "begin"
      var start = begin || 0;
      start = (start >= 0) ? start : Math.max(0, len + start);

      // Handle negative value for "end"
      var upTo = (typeof end == "number") ? Math.min(end, len) : len;
      if (end < 0) {
        upTo = len + end;
      }
      // Actual expected size of the slice
      size = upTo - start;
      if (size > 0) {
        cloned = new Array(size);
        if (this.charAt) {
          for (i = 0; i < size; i++) {
            cloned[i] = this.charAt(start + i);
          }
        } else {
          for (i = 0; i < size; i++) {
            cloned[i] = this[start + i];
          }
        }
      }

      return cloned;
    };

優(yōu)點(diǎn)：最常用的版本，兼容性強(qiáng)。

缺點(diǎn)：ie 低版本，無法處理 dom 集合的 slice call 轉(zhuǎn)數(shù)組。

使用 Array.from, 值需要對(duì)象有 length 屬性, 就可以轉(zhuǎn)換成數(shù)組。

var arr = Array.from(arguments);

擴(kuò)展運(yùn)算符

var args = [...arguments];

ES6 中的擴(kuò)展運(yùn)算符...也能將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換成數(shù)組，這種數(shù)據(jù)結(jié)構(gòu)必須有便利器接口。

優(yōu)點(diǎn)：直接使用內(nèi)置 API，簡單易維護(hù)
缺點(diǎn)：兼容性，使用 babel 的 profill 轉(zhuǎn)化可能使代碼變多，文件包變大

前端知識(shí)點(diǎn)：slice 方法的具體原理

【注：我是saucxs，也叫songEagle，松寶寫代碼，文章首發(fā)于sau交流學(xué)習(xí)社區(qū)（https://www.mwcxs.top），關(guān)注我們每天閱讀更多精彩內(nèi)容】