首页 > 编程语言 >从Element日期组件源码中学到的两个工具方法

从Element日期组件源码中学到的两个工具方法

时间:2023-08-13 18:45:04浏览次数:40  
标签:map 夏令时 Element date length 源码 数组 组件 Array

最近翻到 ElementUI 的日期组件源码,看到一些处理日期的工具方法,挺有意思,平常没有注意到,特此记录下来。

获取当前日期的前一天,后一天

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

这里获取当前日期的前一天用的是 date.getDate() - 1 而不是 date.getTime() - 24 * 60 * 60 * 1000 是为了避免在夏令时转换时导致的错误。

在某些国家,比如英国,每年都会实行夏令时制。

夏令时,又称作Daylight Saving Times(DST),是为了节省能源而人为规定的时间制度,夏天天亮得早,所以大家早起一个小时,就能多享受日光,从而减少用电量。冬天晚起一个小时,早上就能将将赶上天亮。

每年夏天的时候,英国都要把时间往前调一个小时,变成+1。比如:每年在三月最后一个周日的夜晚,时间会神奇地从00:59直接变成02:00。这就是夏令时的时间变化

所以在夏令时起止当天如果用 date.getTime() (+)- 24 * 60 * 60 * 1000 获取前一天后一天可能会导致错误。

创建包含 1-N 的数组

Element 的做法是利用 Function.prototype.apply 的第二个参数可以是类数组对象来实现;

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

上面的 Array.apply(null, {length: n}) 将会创造 n 个值为 undefined 的数组,再利用 map 函数一个个改变数组值;

还有很多种实现方法,而且有比上面执行速度更快的方法;

(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() 可以通过 可迭代对象 和 类数组对象(带有 length 属性和索引元素的对象) 来创建数组;
并且如果 类数组对象 只有length属性没有索引元素,那么创建的数组值都为 undefined 参考

Array.from() 的第二个参数为一个可选的 mapFn,类似于数组 map 函数;但不同的是Array.from() 的 mapFn 会对空槽元素执行回调函数;上面方式的比 Array.apply(null, {length: n}).map((_, n) => n); 的优势是不会创建中间数组;

第三种方法,第三个参数是一个函数,会被 Number.call 当作 this 调用

(2)while 循坏

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

(3)for 循环

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() 也会创建 N 个值为 undefined 的数组;

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

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

Array(N) 会创建 N 个空槽组成的数组,空槽既不是 undefined,也不是空字符串;并且 map 也不会对空槽元素执行回调函数,所以需要通过 Array(N).join().split(',') 将会得到 N 个字符串组成的数组;

(6)扩展运算符

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

[...Array(N+1).keys()].slice(1)

[...Array(N)] 扩展运算符会将空槽元素转化为 undefined

(7)Uint8Array

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

性能

对以上方式进行性能测试,测试工具是 jsbench ,测试的的浏览器版本是谷歌 115.0.5790.110(正式版本) (64 位)

结果如下

设置初始值 N 为 1000000,ops 为每秒操作数,图中结果按照从高到低排序;while 循环最快

image

参考资料

标签:map,夏令时,Element,date,length,源码,数组,组件,Array
From: https://www.cnblogs.com/zsxblog/p/17626979.html

相关文章

  • Django Form钩子方法源码分析
    1.用法 在Form类中定义名称为 clean_+form字段名称的方法校验成功返回self.clean_data["字段名"]校验失败会raise报错 2.源码分析先从is_valid方法开始分析 当self._is_bound=True,self.errors为False时校验成功1. self._is_bound 当django项目......
  • Netty源码学习1——NioEventLoopGroup的初始化
    系列文章目录和关于我零丶引入netty源码学习中,大家maybe都接触到如下的helloworld——netty客户端启动的demo:映入眼帘的第一个类就是NioEventLoopGroup,很多文章上来就是是Netty中的核心类,啥Channel,Pipeline,Context,Boostrap一通劈里啪啦,我看起来比较费劲。so本文不会上来就给......
  • 【Java】智慧工地管理平台源码
    智慧工地是聚焦工程施工现场,紧紧围绕人、机、料、法、环等关键要素,综合运用物联网、云计算、大数据、移动计算和智能设备等软硬件信息技术,与施工生产过程相融合。一、什么是智慧工地智慧工地是指利用移动互联、物联网、智能算法、地理信息系统、大数据挖掘分析等信息技术,提高项目......
  • 如何通过扩展(Extension)的方式给 SAP Fiori Elements List Report 的表格新增列试读
    本教程之前的步骤,我们已经详细学习了SAPFioriElements应用里类型为ListReport的创建步骤,并且介绍了使用安装在VisualStudioCode里的SAPFioriTools扩展提供的向导,生成FioriElements应用的本地项目结构:5.动手开发第一个SAPFioriElements应用6.知其然......
  • 使用 Fiori Elements 框架开发应用的优势
    FioriElements框架是SAP提供的一种开发应用程序的高级抽象层。它建立在SAPUI5框架之上,旨在简化企业应用的开发过程,提高开发效率,并保持应用的一致性和用户体验。使用FioriElements框架,开发人员可以快速创建符合SAPFiori设计准则的应用,无需大量的手动编写代码。本文将探......
  • Fiori Elements 应用里的 Analytical List Page
    当谈到SAPFioriElements应用中的"AnalyticalListPage"(ALP)时,它是一种用于展示分析型数据的现代化、可自定义的应用类型。ALP基于SAPUI5技术栈,旨在提供一种简化的开发方法,使开发人员能够快速创建符合SAPFiori用户体验标准的分析型列表页面。该应用类型通过可配置的......
  • 什么是 SAP Fiori Elements 的 extensionAPI
    在SAPFioriElements中,"extensionAPI"是一种用于自定义和扩展FioriElements应用的强大工具。它提供了一组API(应用程序编程接口),允许开发人员通过代码的方式对FioriElements应用进行定制和增强。借助extensionAPI,开发人员可以在不影响标准FioriElements功能的基础上,......
  • Fiori Elements 应用里的 Object Page 应用
    当谈到SAPFioriElements应用中的"ObjectPage",它是一种用于展示单个业务对象的详细信息的现代化、可自定义的应用类型。ObjectPage旨在提供一种简化的开发方法,使开发人员能够快速创建符合SAPFiori用户体验标准的详细信息页面。该应用类型通过可配置的方式,结合了字段布局......
  • 如何找到 SAP Fiori Elements 应用某个字段显示值具体的数据源试读版
    笔者将自己在SAP领域16年(2007~2023)的SAPUI5(Fiori)和OData开发的技术沉淀,进行了系统的归纳和总结,分别写成了三套由浅入深的学习教程,收到了不错的反响:零基础快速学习ABAP一套适合SAPUI5开发人员循序渐进的学习教程SAPOData开发实战教程-从入门到提高这三套......
  • 如何修改 Fiori Elements 工程包含的本地注解(annotations)文件试读版
    本教程前一篇文章:8.如何找到SAPFioriElements应用某个字段显示值具体的数据源,笔者试图解答我的知识星球里一个朋友的提问:在WebIde(SAPUI版本1.97.0)生成FioriElements的Overviewpage并发布后,再次在消费视图中修改UI注解后,本地运行该Overviewpage应用发现页面已经变动,......