让我兴奋的 JavaScript 单行代码

2025-05-27

让我兴奋的 JavaScript 单行代码

掸掉三元表达式上的灰尘，我们要进去了。

单行代码维护起来很棘手（有时甚至难以理解），但这并不妨碍它们酷炫无比。写出简洁的解决方案会带来一定的满足感。

这是我最近最喜欢的一些应用的合集。它们都可以在你的开发控制台中运行，所以打开它试试吧。希望你能在评论区分享一些你自己喜欢的应用！

日历黑客

Ali Spittel最近在推特上发布了这条消息。它解决了我多次遇到的一个问题。如果你把“减号”换成“加号”，它就能显示接下来的七天。

// Create an array of the past seven days, inclusive
[...Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
Enter fullscreen mode Exit fullscreen mode

随机 ID 生成

这是我在原型设计时创建唯一 ID 的常用函数。我甚至见过有人在生产环境中使用它。它并不安全，但……市面上还有更糟糕的随机数生成函数。

// Generate a random alphanumerical string of length 11
Math.random().toString(36).substring(2);
Enter fullscreen mode Exit fullscreen mode

奎因斯

Quine是一个输出自身源代码的程序。Quine 一直让我着迷。我曾经几次差点用不同的语言完成自己的 Quine ，但细节才是关键。

我为大家挑选了一些获奖者。这三位获奖者分别由Mama Fun Roll、PleaseStand和Peter Olson共同获得。

// $=_=>`$=${$};$()`;$()
$=_=>`$=${$};$()`;$()

// eval(I="'eval(I='+JSON.stringify(I)+')'")
eval(I="'eval(I='+JSON.stringify(I)+')'")

// For those who like their quines via alert
// (function a(){alert("("+a+")()")})()
(function a(){alert("("+a+")()")})()
Enter fullscreen mode Exit fullscreen mode

抓取查询参数

谈谈不可维护的代码。这会将页面的查询参数转换为一个 78 字节的对象。感谢Alex Lohr编写的代码（也感谢齐翊）。

?foo=bar&baz=bing => {foo: bar, baz: bing}

// Set the current page's query parameters to `q`
q={};location.search.replace(/([^?&=]+)=([^&]*)/g,(_,k,v)=>q[k]=v);q;
Enter fullscreen mode Exit fullscreen mode

我希望看到压缩器能够如此努力地工作。

工作时钟

只需少量 HTML 代码，你就能创建一个可以运行的时钟，源代码一口气就能读完。这是我在一位同事的挑战下写的。它每秒都会滴答作响，并更新页面的当前时间。

<body onload="setInterval(()=>document.body.innerHTML=new Date().toGMTString().slice(17,25))"></body>
Enter fullscreen mode Exit fullscreen mode

随机排列数组

在 Python 爱好者们提出他们的解决方案之前import random，random.shuffle(array)我们只能享受现有的方案了。这样做的好处是，它极有可能陷入无限循环（具体实现取决于具体情况）。Michiel Hendriks帮我们省了几个字符👍。请勿在生产环境中使用。

// Return a shuffled copy of an Array-like
(arr) => arr.slice().sort(() => Math.random() - 0.5)
Enter fullscreen mode Exit fullscreen mode

生成随机十六进制代码

ES7 的padEnd真是个福音。此外padStart，它还让数字到字符串的转换变得更加便捷。直接在 JavaScript 代码中写入十六进制值也总是非常简洁。

// Generate a random hex code such as `#c618b2`
'#' + Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0');
Enter fullscreen mode Exit fullscreen mode

优雅地通过面试

臭名昭著的面试题答案，不过是 CodeGolfed 的。我研究了一下，觉得不可能再短了。

for(i=0;++i<101;console.log(i%5?f||i:f+'Buzz'))f=i%3?'':'Fizz'
Enter fullscreen mode Exit fullscreen mode

删除重复项

这只适用于原始类型，但仍然很巧妙。Set接受任何可迭代对象，例如数组[1,2,3,3]，并删除重复项。扩展运算符会生成该集合[1,2,3]。

// Remove duplicates from the iterable `arr`
[...new Set(arr)]
Enter fullscreen mode Exit fullscreen mode

如此真实的键盘，您可以感受到它

好吧，我其实不太觉得这算得上是一句单行代码，但它实在太精彩了，不容错过。edc65 的 CodeGolf 解决方案堪称大师级。它简洁到极致，而且 CodeGolf 的精髓也只体现在它的精髓上，但我们应该好好欣赏一下它的魅力。

// Return a ***3D*** ASCII keyboard as string
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+'    ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
Enter fullscreen mode Exit fullscreen mode

它打印：

惊人的。

与 150 多名订阅我的关于编程和个人成长的新闻通讯的人一起！

我发布有关科技的推文@healeycodes。

文章来源：https://dev.to/healeycodes/javascript-one-liners-that-make-me-excited-56aj
Devto 翻译
PREV
不使用数据库在 JavaScript 中保存数据
NEXT
面试问题：实现进度条