一、媒介

之前写了一篇文章：JavaScript 系列–JavaScript一些奇淫技能的完成要领（一）简短的sleep函数，猎取时刻戳

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

引见了sleep函数和猎取时刻戳的要领。接下来我们来引见数字花样化1234567890 –> 1,234,567,890

二、数字花样化 1234567890 –> 1,234,567,890

1、一般版

// 数字花样化 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的倍数就别的追加到上去
    str.length % 3 && arr.unshift(str.slice(0, str.length % 3));
    return arr.toString();
}
formatNumber('1234567890')

长处：自我感觉比网上写的一堆 for轮回 另有 if-else 推断的逻辑越发清楚直白。
瑕玷：太一般

2、进阶版

// 2、进阶版
function formatNumber(str){
    return str.split("").reverse().reduce((prev,next,index) => {
        return ((index%3)? next: (next+',')) + prev;
    })
}
formatNumber("1234567890");

长处：把 JS 的 API 玩的管窥蠡测
瑕玷：不好明白

3、正则版

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

我们来看看正则的剖析：

（1）/(?!^)(?=(d{3})+b)/g：婚配的这个位置不能是开首(?!^)

（2）(d{3})+：必需是1个或许多个的3个一连数字

长处：代码少，简约。

瑕玷：正则表达式的位置婚配很主要，能够参考这个：https://www.mwcxs.top/page/58…

4、API版本

(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对象，

Intl 对象是 ECMAScript 国际化 API 的一个定名空间，它供应了准确的字符串对照，数字花样化，日期和时刻花样化。Collator，NumberFormat 和 DateTimeFormat 对象的组织函数是 Intl 对象的属性。

new Intl.NumberFormat().format(1234567890) // 1,234,567,890
长处：简朴粗犷，直接挪用api

瑕玷：Intl兼容性不太好，不过 toLocaleString的话 IE6 都支撑

前端知识点：Intl对象 和 toLocaleString的要领。

三、argruments 对象(类数组)转换成数组

那什么是类数组？就是跟数组很像，然则他是对象，花样像数组所以叫类数组。比方：{0:a,1:b,2:c,length:3}，根据数组下标排序的对象，另有一个length的属性，有时刻我们须要这类对象能挪用数组下的一个要领，这时刻就须要把把类数组转化成真正的数组。

1、一般版

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);

长处：通用版本，没有任何兼容性问题
瑕玷：临时没有啥瑕玷

2、进阶版

// 2、进阶版
var arr = Array.prototype.slice.call(arguments);

人人用过最经常使用的要领，至于为何能够这么用，很多人预计也是一孔之见，要搞清为何内里的缘由，我们照样从范例和源码提及。

slice.call 的作用道理就是，应用 call，将 slice 的要领作用于 arrayLike，slice 的两个参数为空，slice 内部剖析使得 arguments.lengt 即是0的时刻 相当于处置惩罚 slice(0) ： 即挑选全部数组，slice 要领内部没有强迫推断必需是 Array 范例，slice 返回的是新建的数组（运用轮回取值）”，所以如许就完成了类数组到数组的转化，call 这个奇异的要领、slice 的处置惩罚缺一不可。

直接看 slice 怎样完成的吧。实在就是将 array-like 对象经由过程下标操纵放进了新的 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;
    };

长处：最经常使用的版本，兼容性强。

瑕玷：ie 低版本，没法处置惩罚 dom 鸠合的 slice call 转数组。

3、ES6版

运用 Array.from, 值须要对象有 length 属性, 就能够转换成数组。

var arr = Array.from(arguments);

扩大运算符

var args = [...arguments];

ES6 中的扩大运算符…也能将某些数据结构转换成数组，这类数据结构必需有便利器接口。

长处：直接运用内置 API，简朴易保护
瑕玷：兼容性，运用 babel 的 profill 转化能够使代码变多，文件包变大

前端知识点：slice 要领的详细道理

【注：我是saucxs，也叫songEagle，松宝写代码，文章首发于sau交流学习社区（https://www.mwcxs.top），关注我们天天浏览更多精彩内容】