最近翻到 ElementUI 的日期組件源碼，看到一些處理日期的工具方法，挺有意思，平常沒(méi)有注意到，特此記錄下來(lái)。

獲取當(dāng)前日期的前一天，后一天

export const prevDate = function(date, amount = 1) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate() - amount);
};
export const nextDate = function(date, amount = 1) {
  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
};

這里獲取當(dāng)前日期的前一天用的是 date.getDate() - 1 而不是 date.getTime() - 24 * 60 * 60 * 1000 是為了避免在夏令時(shí)轉(zhuǎn)換時(shí)導(dǎo)致的錯(cuò)誤。

在某些國(guó)家，比如英國(guó)，每年都會(huì)實(shí)行夏令時(shí)制。

夏令時(shí)，又稱(chēng)作Daylight Saving Times（DST），是為了節(jié)省能源而人為規(guī)定的時(shí)間制度，夏天天亮得早，所以大家早起一個(gè)小時(shí)，就能多享受日光，從而減少用電量。冬天晚起一個(gè)小時(shí)，早上就能將將趕上天亮。

每年夏天的時(shí)候，英國(guó)都要把時(shí)間往前調(diào)一個(gè)小時(shí)，變成+1。比如：每年在三月最后一個(gè)周日的夜晚，時(shí)間會(huì)神奇地從00:59直接變成02:00。這就是夏令時(shí)的時(shí)間變化

所以在夏令時(shí)起止當(dāng)天如果用 date.getTime() (+)- 24 * 60 * 60 * 1000 獲取前一天后一天可能會(huì)導(dǎo)致錯(cuò)誤。

創(chuàng)建包含 1-N 的數(shù)組

Element 的做法是利用 Function.prototype.apply 的第二個(gè)參數(shù)可以是類(lèi)數(shù)組對(duì)象來(lái)實(shí)現(xiàn)；

export const range = function(n) {
  return Array.apply(null, {length: n}).map((_, n) => n);
};

上面的 Array.apply(null, {length: n}) 將會(huì)創(chuàng)造 n 個(gè)值為 undefined 的數(shù)組，再利用 map 函數(shù)一個(gè)個(gè)改變數(shù)組值；

還有很多種實(shí)現(xiàn)方法，而且有比上面執(zhí)行速度更快的方法；

（1）Array.from()

// 第一種
Array.from(Array(N), (_, i) => i+1)
// 第二種
Array.from({length: N}, (_, i) => i + 1)
// 第三種
Array.from({length:N}, Number.call, i => i + 1)

Array.from() 可以通過(guò) 可迭代對(duì)象 和 類(lèi)數(shù)組對(duì)象(帶有 length 屬性和索引元素的對(duì)象) 來(lái)創(chuàng)建數(shù)組；
并且如果 類(lèi)數(shù)組對(duì)象 只有length屬性沒(méi)有索引元素，那么創(chuàng)建的數(shù)組值都為 undefined 參考

Array.from() 的第二個(gè)參數(shù)為一個(gè)可選的 mapFn，類(lèi)似于數(shù)組 map 函數(shù)；但不同的是Array.from() 的 mapFn 會(huì)對(duì)空槽元素執(zhí)行回調(diào)函數(shù)；上面方式的比 Array.apply(null, {length: n}).map((_, n) => n); 的優(yōu)勢(shì)是不會(huì)創(chuàng)建中間數(shù)組；

第三種方法，第三個(gè)參數(shù)是一個(gè)函數(shù)，會(huì)被 Number.call 當(dāng)作 this 調(diào)用

（2）while 循壞

let i=0, a=Array(N);
while(i<N) a[i++]=i;

（3）for 循環(huán)

var foo = [];
for (var i = 1; i <= N; i++) {
   foo.push(i);
}

（4）Array.prototype.fill

Array(N).fill().map((_, i) => i+1);

和 Array.from() 類(lèi)似，Array(N).fill() 也會(huì)創(chuàng)建 N 個(gè)值為 undefined 的數(shù)組；

（5）Array(N).join().split(',')

Array(N).join().split(',').map((_, i) => i+1 );

Array(N) 會(huì)創(chuàng)建 N 個(gè)空槽組成的數(shù)組，空槽既不是 undefined，也不是空字符串；并且 map 也不會(huì)對(duì)空槽元素執(zhí)行回調(diào)函數(shù)，所以需要通過(guò) Array(N).join().split(',') 將會(huì)得到 N 個(gè)字符串組成的數(shù)組；

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

[...Array(N).keys()].map(x => x + 1);
[...Array(N+1).keys()].slice(1)

[...Array(N)] 擴(kuò)展運(yùn)算符會(huì)將空槽元素轉(zhuǎn)化為 undefined

（7）Uint8Array

new Uint8Array(5).map((item, i) => i + 1);

性能

對(duì)以上方式進(jìn)行性能測(cè)試，測(cè)試工具是 jsbench ，測(cè)試的的瀏覽器版本是谷歌 115.0.5790.110（正式版本） （64 位）

結(jié)果如下

設(shè)置初始值 N 為 1000000，ops 為每秒操作數(shù)，圖中結(jié)果按照從高到低排序；while 循環(huán)最快

參考資料

• How to create an array containing 1...N
• Incrementing a date in JavaScript

到此這篇關(guān)于從Element日期組件源碼中學(xué)到的兩個(gè)工具方法的文章就介紹到這了,更多相關(guān)Element日期組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論