如何提高架构的稳定性、可扩展性和易用性等能力?点击看大咖分享
写点什么

javascript 中的 7 个“杀手级”单行代码-金马国际

  • 2022 年 3 月 08 日
  • 本文字数:1100 字

    阅读完需:约 4 分钟

能在本文中出场的代码全部都经过了仔细的甄选,在文章发布前,50 人的团队对所有代码都进行了认真的检验,以确保其符合“杀手级”资格,本文的目的就是希望为开发者带来一些便利。

数组洗牌

当代码需要一定程度的随机性时,数组洗牌是个很必要的技能。下面的这行代码可以以 o(n log n)的复杂度,原地对数组洗牌。

 

const shufflearray = (arr) => arr.sort(() => math.random() - 0.5);// testingconst arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];console.log(shufflearray(arr));
复制代码

复制到剪贴板

在 web 应用中,“复制到剪贴板”这项功能迅速流行起来,因为这对用户而言非常方便。

 

const copytoclipboard = (text) =>  navigator.clipboard?.writetext && navigator.clipboard.writetext(text);// testingcopytoclipboard("hello world!");
复制代码

 

注:据 显示,这行代码对全球 93.08%的用户都有效。记得在添加之前检查下用户的浏览器是否支持这个 api。如果想要万全的方法,那么建议使用 input,然后复制其内容。

唯一元素

每一种语言都有其自己的哈希表实现,在 javascript 中是 set。使用这个数据结构可以很轻松地找到列表中的唯一元素。

 

const getunique = (arr) => [...new set(arr)];// testingconst arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5];console.log(getunique(arr));
复制代码

检测深色模式

夜间模式也是最近大火的功能之一。如果用户设备启用了深色模式,那么应用最好是能自动切换到该模式。而 media queries 可以帮你轻松完成这项任务。

 

const isdarkmode = () =>  window.matchmedia &&  window.matchmedia("(prefers-color-scheme: dark)").matches;// testingconsole.log(isdarkmode());
复制代码

 

同样,据 显示,97.19%的用户设备支持 matchmedia 函数。

滚动到顶部

javascript 的初学者常常会发现很难将页面元素正确地滚动到视图中。最简单方式是用 scrollintoview 方法,然后加上 behavior: "smooth" 实现平滑的滚动动画。

 

const scrolltotop = (element) =>  element.scrollintoview({ behavior: "smooth", block: "start" });
复制代码

滚动到底部

和 scrolltotop 方法类似,scrolltobottom 方法可以轻松使用 scrollintoview 实现,唯一的区别就是把 block 的值改成 end 。

 

const scrolltobottom = (element) =>  element.scrollintoview({ behavior: "smooth", block: "end" });
复制代码

 

生成随机颜色

你的应用程序依赖了随机颜色生成吗?哈,那你可找对了地方!

 

const generaterandomhexcolor = () =>  `#${math.floor(math.random() * 0xffffff).tostring(16)}`;
复制代码

 

原文链接:



2022 年 3 月 08 日 10:294130

评论

发布
暂无评论
发现更多内容

大规模 kubernetes 集群运维实践

大规模 kubernetes 集群运维实践

网站地图