文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

这个开源项目绝了!30秒就能理解的JavaScript优秀代码

2024-12-03 06:24

关注

今天要和大家分享一个项目,里面精心收集了大量有用的JavaScript代码片段,让你能够在极短的时间内可以理解使用它们,分为日期、节点、功能模块等部分,你可以直接将文件的这些代码直接导入到你的的文本编辑器(VSCode,Atom,Sublime)。

这个项目在Github上十分受欢迎,目前标星 71.3K,累计分支 7.9K(Github地址:https://github.com/30-seconds/30-seconds-of-code)

下面还是一起来看看这个项目里都有哪些代码段吧:

数组:arrayMax

返回数组中的最大值。将Math.max()与扩展运算符 (...) 结合使用以获取数组中的最大值。

  1. const arrayMin = arr => Math.min(...arr); 
  2. // arrayMin([10, 1, 5]) -> 1 

浏览器:bottomVisible

如果页的底部可见, 则返回true, 否则为false。使用scrollY、scrollHeight和clientHeight来确定页面底部是否可见。

  1. const bottomVisible = () => 
  2. document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight || document.documentElement.clientHeight; 
  3. // bottomVisible() -> true 

日期:getDaysDiffBetweenDates

返回两个日期之间的差异 (以天为值)。计算Date对象之间的差异 (以天为值)。

  1. const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); 
  2. // getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9 

函数:chainAsync

链异步函数,循环遍历包含异步事件的函数数组, 当每个异步事件完成时调用next。

  1. const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); }; 
  2.  

数学:arrayAverage

返回数字数组的平均值。使用Array.reduce()将每个值添加到累加器中, 并以0的值初始化, 除以数组的length。

  1. const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length; 
  2. // arrayAverage([1,2,3]) -> 2 

节点:JSONToFile

将 JSON 对象写入文件。使用fs.writeFile()、模板文本和JSON.stringify()将json对象写入.json文件。

  1. const fs = require('fs'); 
  2. const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2)) 
  3. // JSONToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json' 

对象:cleanObj

移除从 JSON 对象指定的属性之外的任何特性。使用Object.keys()方法可以遍历给定的 json 对象并删除在给定数组中不是included 的键。另外, 如果给它一个特殊的键 (childIndicator), 它将在里面深入搜索, 并将函数应用于内部对象。

  1. const cleanObj = (obj, keysToKeep = [], childIndicator) => { 
  2. Object.keys(obj).forEach(key => { 
  3. if (key === childIndicator) { 
  4. cleanObj(obj[key], keysToKeep, childIndicator); 
  5. else if (!keysToKeep.includes(key)) { 
  6. delete obj[key]; 
  7. }) 
  8. /* 
  9.   const testObj = {a: 1, b: 2, children: {a: 1, b: 2}} 
  10.   cleanObj(testObj, ["a"],"children"
  11.   console.log(testObj)// { a: 1, children : { a: 1}} 

 

以上举的这些示例还只是冰山一角,如果你对这个项目感兴趣就赶紧马克起来。

 

来源:开源最前线内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯