摘要:實現(xiàn)一個目的有多種途徑,俗話說,條條大路通羅馬。因為是的一個靜態(tài)函數(shù),所以必須以的形式來使用。注意一元運算符一元運算符將其操作數(shù)轉換為類型并反轉其正負。相當于用來返回對象的字符串表示。
一、前言
有些東西很好用,但是你未必知道;有些東西你可能用過,但是你未必知道原理。
實現(xiàn)一個目的有多種途徑,俗話說,條條大路通羅馬。發(fā)散一下大家的思維以及拓展一下知識面。
sleep函數(shù)主要用來做延遲執(zhí)行的,很多編程語言都有sleep函數(shù),但是javascript沒有這個函數(shù),我們實現(xiàn)一下:
1、簡單版本function sleep(sleepTime){ for(var start = +new Date;+new Date - start優(yōu)點:簡單粗暴,通俗易懂。
缺點:確實sleep了,但是卡死了,cpu會飆升,精確度不準
2、promise版本// promise版本 function sleep(sleepTime){ return new Promise(resolve => setTimeout(resolve,sleepTime)); } var t1 = +new Date(); sleep(3000).then(()=>{ var t2 = +new Date(); console.log(t2-t1); })優(yōu)點:實際上用了setTimeout,沒有形成進程阻塞,不會造成性能和負載問題。
缺點:雖然解決了回調(diào)函數(shù)的嵌套,但是還是不美觀,而且異步不徹底,過程中停止執(zhí)行。
3、generator版本// generotor版本 function sleep(sleepTime){ return function(cb){ setTimeout(cb.bind(this), sleepTime); } } function* genSleep(){ var t1 = +new Date(); yield sleep(3000); var t2 = +new Date(); console.log(t2-t1); } async(genSleep); function async(gen){ const iter = gen(); function nextStep(it){ if(it.done) return ; if (typeof it.value === "function") { it.value(function(ret) { nextStep(iter.next(ret)) }) } else { nextStep(iter.next(it.value)); } } nextStep(iter.next()); }優(yōu)點:跟promise一樣優(yōu)點,代碼變得更簡單干凈。
缺點:就是每次都要執(zhí)行 next() 顯得很麻煩,雖然有 co(第三方包)可以解決,但就多包了一層,不好看,錯誤也必須按 co 的邏輯來處理,不爽。
co 之所以這么火并不是沒有原因的,當然不是僅僅實現(xiàn) sleep 這么無聊的事情,而是它活生生的借著generator/yield 實現(xiàn)了很類似 async/await 的效果!這一點真是讓我三觀盡毀刮目相看。
const co = require("co") function sleep(sleepTime) { return function(cb) { setTimeout(cb.bind(this), sleepTime) } } co(function*() { const t1 = +new Date() yield sleep(3000) const t2 = +new Date() console.log(t2 - t1) })4、async/await版本function sleep(delay) { return new Promise(reslove => { setTimeout(reslove, delay) }) } !async function test() { const t1 = +new Date() await sleep(3000) const t2 = +new Date() console.log(t2 - t1) }()優(yōu)點:同 Promise 和 Generator 優(yōu)點。 Async/Await 可以看做是 Generator 的語法糖,Async 和 Await 相較于 * 和 yield 更加語義,另外各個函數(shù)都是扁平的,不會產(chǎn)生多余的嵌套,代碼更加清爽易讀。
缺點:ES7 語法存在兼容性問題,有 babel 一切兼容性都不是問題
5、開源的版本在 javascript 優(yōu)雅的寫 sleep 等于如何優(yōu)雅的不優(yōu)雅,這里有 C++ 實現(xiàn)的模塊:https://github.com/ErikDubbel...
const sleep = require("sleep") const t1 = +new Date() sleep.msleep(3000) const t2 = +new Date() console.log(t2 - t1)優(yōu)點:能夠實現(xiàn)更加精細的時間精確度,而且看起來就是真的 sleep 函數(shù),清晰直白。
缺點:缺點需要安裝這個模塊node-sleep。前端知識點:Async/Await是目前前端異步書寫最優(yōu)雅的一種方式
二、優(yōu)雅獲取時間戳上面實現(xiàn) sleep 函數(shù),我們可以發(fā)現(xiàn)代碼有 +new Date()獲取時間戳的用法,這只是其中的一種,下面就說一下其他兩種以及 +new Date()的原理。
1、普通版var timestamp=new Date().getTime()優(yōu)點:具有普遍性,大家都用這個
2、進階版
缺點:應該沒有吧var timestamp = (new Date()).valueOf()valueOf 方法返回對象的原始值(Primitive,"Null","Undefined","String","Boolean","Number"五種基本數(shù)據(jù)類型之一),可能是字符串、數(shù)值或 bool 值等,看具體的對象。
優(yōu)點:說明開發(fā)者原始值有一個具體的認知,讓人眼前一亮。
3、Date.now()方法
缺點: 應該沒有吧Date.now()Date.now() 方法返回自1970年1月1日 00:00:00 UTC到當前時間的毫秒數(shù)。類型為Number。因為 now() 是Date的一個靜態(tài)函數(shù),所以必須以 Date.now() 的形式來使用。
優(yōu)點:簡單明了。
缺點:兼容性問題,ECMA-262 第五版中被標準化。
兼容性不支持時的兼容性代碼:
if (!Date.now) { Date.now = function now() { return new Date().getTime(); }; }4、終極版var timestamp = +new Date()優(yōu)點:對 JavaScript 隱式轉換掌握的比較牢固的一個表現(xiàn)
缺點:應該沒有吧我們來分析一下,為什么+new Date()拿到的時間戳?
那就是隱式轉換,實質(zhì)上還是調(diào)用了valueOf()的方法。
注意:
(1)一元+ 運算符
一元 + 運算符將其操作數(shù)轉換為 Number 類型并反轉其正負。注意負的 +0 產(chǎn)生 -0,負的 -0 產(chǎn)生 +0。
+new Date() 相當于 ToNumber(new Date())
(2)toString 用來返回對象的字符串表示。
var obj = {}; console.log(obj.toString());//[object Object] var arr = []; console.log(arr.toString());//""空字符串 var date = new Date(); // Tue May 28 2019 22:05:58 GMT+0800 (中國標準時間) console.log(date.toString());//"Tue May 28 2019 22:05:58 GMT+0800 (中國標準時間)"(3)valueOf()方法返回對象的原始值
valueOf()方法返回對象的原始值,可能是字符串,述職或boolean值,看具體的對象。
var obj = { name: "saucxs" } console.log(obj.valueOf()) //Object {name: "saucxs"} var arr1 = [1,3] console.log(arr1.valueOf()) //[1,3] var date = new Date() console.log(date.valueOf())//1456638436303// 如代碼所示,三個不同的對象實例調(diào)用valueOf返回不同的數(shù)據(jù)
原始值指的是 "Null","Undefined","String","Boolean","Number","Symbol" 6種基本數(shù)據(jù)類型之一,上面已經(jīng)提到過這個概念,這里再次申明一下。最后分解一下其中的過程:+new Date():
(1)運算符 new 的優(yōu)先級高于一元運算符 +,所以過程可以分解為:var time=new Date();+time
(2)根據(jù)上面提到的規(guī)則相當于:ToNumber(time)
(3)time 是個日期對象,根據(jù) ToNumber 的轉換規(guī)則,所以相當于:ToNumber(ToPrimitive(time))
(4)根據(jù) ToPrimitive 的轉換規(guī)則:ToNumber(time.valueOf()),time.valueOf() 就是 原始值 得到的是個時間戳,假設 time.valueOf()=1503479124652
(5)所以 ToNumber(1503479124652) 返回值是 1503479124652 這個數(shù)字。
前端知識點:隱式轉換的妙用
【注:我是saucxs,也叫songEagle,松寶寫代碼,文章首發(fā)于sau交流學習社區(qū)(https://www.mwcxs.top),關注我們每天閱讀更多精彩內(nèi)容】
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://systransis.cn/yun/104305.html
摘要:一前言簡短的函數(shù),獲取時間戳數(shù)字格式化對象類數(shù)組轉換成數(shù)組今天我們來介紹一下數(shù)字取整,數(shù)組求和。一個介于和之間的整數(shù)數(shù)學系統(tǒng)的基礎,表示上述字符串的基數(shù)。注意但是當數(shù)字范圍超出即時,異常就出現(xiàn)了。 一、前言 簡短的sleep函數(shù),獲取時間戳:https://www.mwcxs.top/page/74... 數(shù)字格式化 1234567890 --> 1,234,567,890;argru...
摘要:一前言之前寫了一篇文章系列一些奇淫技巧的實現(xiàn)方法一簡短的函數(shù),獲取時間戳介紹了函數(shù)和獲取時間戳的方法。,和對象的構造函數(shù)是對象的屬性。缺點低版本,無法處理集合的轉數(shù)組。 一、前言 之前寫了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的實現(xiàn)方法(一)簡短的sleep函數(shù),獲取時間戳 https://www.mwcxs.top/page/74... 介紹了sle...
摘要:正則大法好,正則大法好,正則大法好,重要的事情說三遍。第二部分,這個部分是整個表達式的關鍵部分。學習正則如果還沒有系統(tǒng)學習正則表達式,這里提供一些網(wǎng)上經(jīng)典的教程供大家學習。正則表達式使用單個字符串來描述匹配一系列匹配某個句法規(guī)則的字符串。 原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ,喜歡的可以關注最新動態(tài),大家一起多交流學習,共同...
摘要:正則大法好,正則大法好,正則大法好,重要的事情說三遍。第二部分,這個部分是整個表達式的關鍵部分。學習正則如果還沒有系統(tǒng)學習正則表達式,這里提供一些網(wǎng)上經(jīng)典的教程供大家學習。正則表達式使用單個字符串來描述匹配一系列匹配某個句法規(guī)則的字符串。 原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ,喜歡的可以關注最新動態(tài),大家一起多交流學習,共同...
閱讀 1050·2021-11-25 09:43
閱讀 1695·2019-08-30 13:59
閱讀 1665·2019-08-30 11:22
閱讀 2160·2019-08-30 11:06
閱讀 1328·2019-08-28 17:51
閱讀 3775·2019-08-26 12:12
閱讀 808·2019-08-26 12:11
閱讀 478·2019-08-26 12:10