文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

11 个对开发有帮助的 JS 技巧,进收藏夹当小词典吧!

2024-12-03 11:14

关注

本文已经过原作者 Orkhan Jafarov 授权翻译。

1. 生成一个带有随机数的列表

  1. Array.from({ length: 1000 }, Math.random) 
  2. // [ 0.6163093133259432, 0.8877401276499153, 0.4094354756035987, ...] - 1000 items 

2.生成一个带有数字的列表

  1. Array.from({ length: 1000 }, (v, i) => i) 
  2. // [0, 1, 2, 3, 4, 5, 6....999] 

3. RGB→转换为十六进制

  1. const rgb2hex = ([r, g, b]) => 
  2.   `#${(1 << 24) + (r << 16) + (g << 8) + b}`.toString(16).substr(1); 
  3.  
  4. rgb2hex([76, 11, 181]); 
  5. // #4c0bb5 

4. 转换十六进制→RGB

怎么把它转换回去?这是实现该目标的一种好方法。

  1. const hex2rgb = hex => 
  2.   [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16)); 
  3.  
  4. hex2rgb("#4c0bb5"); 
  5. // [76, 11, 181] 

5.奇数或偶数

使用 位 运算的方式:

  1. const value = 232;   
  2.  
  3. if (value & 1) console.log("odd"); 
  4. else console.log("even"); 
  5. // even 

6.检查有效的 URL

  1. const isValidURL = (url) => { 
  2.   try { 
  3.     new URL(url); 
  4.     return true
  5.   } catch (error) { 
  6.     return false
  7.   } 
  8.  
  9. isValidURL('https://segmentfault.com/u/minnanitkong/articles'
  10. // true 
  11.  
  12. isValidURL("https//invalidto"); 
  13. // false 

7.距离过去到现在时间表示

有时我们需要打印6分钟前的日期,但不希望很大的库来完成。这里有一个小片段可以做到这一点:

  1. const fromAgo = (date) => { 
  2.   const ms = Date.now() - date.getTime(); 
  3.   const seconds = Math.round(ms / 1000); 
  4.   const minutes = Math.round(ms / 60000); 
  5.   const hours = Math.round(ms / 3600000); 
  6.   const days = Math.round(ms / 86400000); 
  7.   const months = Math.round(ms / 2592000000); 
  8.   const years = Math.round(ms / 31104000000); 
  9.  
  10.   switch (true) { 
  11.     case seconds < 60: 
  12.       return `${seconds} second(s) ago"`; 
  13.     case minutes < 60: 
  14.       return `${minutes} minute(s) ago"`; 
  15.     case hours < 24: 
  16.       return `${hours} hour(s) ago"`; 
  17.     case days < 30: 
  18.       return `${days} day(s) ago`; 
  19.     case months < 12: 
  20.       return `${months} month(s) ago`; 
  21.     default
  22.       return `${years} year(s) ago`; 
  23.   } 
  24. }; 
  25.  
  26. const createdAt = new Date(2021, 0, 5); 
  27. fromAgo(createdAt); // 14 day(s) ago; 

8. 用参数生成路径

我们在处理路线/路径时常做很多工作,我们总是需要对其进行操作。当我们需要生成带有参数的路径以将浏览器推送到那里时,generatePath 可以帮助我们!

  1. const generatePath = (path, obj) => 
  2.     path.replace(/(:[a-z]+)/g, (v) => obj[v.substr(1)]); 
  3.  
  4. const route = "/app/:page/:id"
  5. generatePath(route, { 
  6.   page: "products"
  7.   id: 85, 
  8. }); 
  9. // /app/products/123 

9.从路径获取参数

  1. const getPathParams = (path, pathMap, serializer) => { 
  2.   path = path.split("/"); 
  3.   pathMap = pathMap.split("/"); 
  4.   return pathMap.reduce((acc, crr, i) => { 
  5.     if (crr[0] === ":") { 
  6.       const param = crr.substr(1); 
  7.       acc[param] = serializer && serializer[param] 
  8.         ? serializer[param](path[i]) 
  9.         : path[i]; 
  10.     } 
  11.     return acc; 
  12.   }, {}); 
  13. }; 
  14.  
  15. getPathParams("/app/products/123""/app/:page/:id"); 
  16. // { page: 'products', id: '123' } 
  17.  
  18. getPathParams("/items/2/id/8583212""/items/:category/id/:id", { 
  19.   category: v => ['Car''Mobile''Home'][v], 
  20.   id: v => +v 
  21. }); 
  22. // { category: 'Home', id: 8583212 } 

用查询字符串生成路径

  1. const getQueryParams = url => 
  2.   url.match(/([^?=&]+)(=([^&]*))/g).reduce((total, crr) => { 
  3.     const [key, value] = crr.split("="); 
  4.     total[key] = value; 
  5.     return total; 
  6.   }, {}); 
  7.  
  8. getQueryParams("/user?name=Orkhan&age=30"); 
  9. // { name'Orkhan', age: '30' } 

我是小智,我要去刷碗了,我们下期见~

作者:Orkhan Jafarov 译者:前端小智 来源: dev

原文:https://dev.to/11-javascript-tips-and-tricks-to-code-like-a-superhero-vol-2-mp6

本文转载自微信公众号「大迁世界」,作者大迁世界。转载本文请联系大迁世界公众号。

 

来源:大迁世界内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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