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

獲取當(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 是為了避免在夏令時轉(zhuǎn)換時導(dǎo)致的錯誤。

在某些國家，比如英國，每年都會實行夏令時制。

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

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

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

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

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

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

上面的 Array.apply(null, {length: n}) 將會創(chuàng)造 n 個值為 undefined 的數(shù)組，再利用 map 函數(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() 可以通過 可迭代對象 和 類數(shù)組對象(帶有 length 屬性和索引元素的對象) 來創(chuàng)建數(shù)組；
并且如果 類數(shù)組對象 只有length屬性沒有索引元素，那么創(chuàng)建的數(shù)組值都為 undefined 參考

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

第三種方法，第三個參數(shù)是一個函數(shù)，會被 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() 類似，Array(N).fill() 也會創(chuàng)建 N 個值為 undefined 的數(shù)組；

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

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

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

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

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

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

（7）Uint8Array

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

性能

對以上方式進(jìn)行性能測試，測試工具是 jsbench ，測試的的瀏覽器版本是谷歌 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é)到的兩個工具方法的文章就介紹到這了,更多相關(guān)Element日期組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！