JavaScript 中的 7 个“杀手级”单行代码

作者 | Tapajyoti Bose

译者 | 马可薇

策划 | 李冬梅

审校 | 平川

能在本文中出场的代码全部都经过了仔细的甄选，在文章发布前，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!");

注：据 caniuse 显示，这行代码对全球 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());

同样，据 caniuse 显示，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)}`;

原文链接：

https://tapajyoti-bose.medium.com/7-killer-one-liners-in-javascript-33db6798f5bf

点击底部阅读原文访问 InfoQ 官网，获取更多精彩内容！

今日好文推荐

以反战为名，百万周下载量node-ipc包作者进行供应链投毒

估值超百亿的UI设计软件封禁中国大疆，国产软件火速发声

这20年，我“颠簸”在软件工程的列车上

TikTok美国数据或将由甲骨文存储，字节跳动无权访问

点个在看少个 bug 👇