摘要:一前言之前寫了一篇文章系列一些奇淫技巧的實現方法一簡短的函數,獲取時間戳介紹了函數和獲取時間戳的方法。,和對象的構造函數是對象的屬性。缺點低版本,無法處理集合的轉數組。
一、前言
之前寫了一篇文章: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、進階版 function formatNumber(str){ return str.split("").reverse().reduce((prev,next,index) => { return ((index%3)? next: (next+",")) + prev; }) } formatNumber("1234567890");
優點:把 JS 的 API 玩的了如指掌
缺點:不好理解
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、進階版 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),關注我們每天閱讀更多精彩內容】
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104482.html
摘要:一前言簡短的函數,獲取時間戳數字格式化對象類數組轉換成數組今天我們來介紹一下數字取整,數組求和。一個介于和之間的整數數學系統的基礎,表示上述字符串的基數。注意但是當數字范圍超出即時,異常就出現了。 一、前言 簡短的sleep函數,獲取時間戳:https://www.mwcxs.top/page/74... 數字格式化 1234567890 --> 1,234,567,890;argru...
摘要:正則大法好,正則大法好,正則大法好,重要的事情說三遍。第二部分,這個部分是整個表達式的關鍵部分。學習正則如果還沒有系統學習正則表達式,這里提供一些網上經典的教程供大家學習。正則表達式使用單個字符串來描述匹配一系列匹配某個句法規則的字符串。 原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ,喜歡的可以關注最新動態,大家一起多交流學習,共同...
摘要:正則大法好,正則大法好,正則大法好,重要的事情說三遍。第二部分,這個部分是整個表達式的關鍵部分。學習正則如果還沒有系統學習正則表達式,這里提供一些網上經典的教程供大家學習。正則表達式使用單個字符串來描述匹配一系列匹配某個句法規則的字符串。 原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ,喜歡的可以關注最新動態,大家一起多交流學習,共同...
摘要:實現一個目的有多種途徑,俗話說,條條大路通羅馬。因為是的一個靜態函數,所以必須以的形式來使用。注意一元運算符一元運算符將其操作數轉換為類型并反轉其正負。相當于用來返回對象的字符串表示。 一、前言 有些東西很好用,但是你未必知道;有些東西你可能用過,但是你未必知道原理。實現一個目的有多種途徑,俗話說,條條大路通羅馬。發散一下大家的思維以及拓展一下知識面。 二、實現一個簡短的sleep函數...
閱讀 1156·2021-11-24 09:38
閱讀 3604·2021-11-22 15:32
閱讀 3458·2019-08-30 15:54
閱讀 2568·2019-08-30 15:53
閱讀 1494·2019-08-30 15:52
閱讀 2498·2019-08-30 13:15
閱讀 1837·2019-08-29 12:21
閱讀 1395·2019-08-26 18:36