有哪些短小却令人惊叹的 JavaScript 代码？
我跟你说，有时候 JavaScript 的魔法就藏在那些你一眼扫过，却瞬间让你拍案叫绝的简短代码里。它们不像那些洋洋洒洒几百行的“大制作”，但每一行都精准地切中了要点，带来了出其不意的效果。我最近就挖到了一些这样的“小宝石”，想跟你分享一下，保证不是那种看了跟没看一样、让人昏昏欲睡的“干货”。
1. “一键”隐藏/显示：CSS 切换的艺术
你有没有遇到过那种，点击一下按钮，某个区域就优雅地出现或者消失的场景？很多人可能会想到用 JS 去直接操作元素的 `display` 属性，就像这样：
```javascript
document.getElementById('myButton').onclick = function() {
var element = document.getElementById('myContent');
if (element.style.display === 'none') {
element.style.display = 'block'; // 或者 'flex', 'grid' 等
} else {
element.style.display = 'none';
}
};
```
这没毛病，但如果我告诉你，用 CSS 配合一个简单的 JS 事件监听，就能让代码更简洁，并且更符合关注点分离的原则呢？
```javascript
// HTML:
//
//
// CSS:
// .hidden { display: none; }
// JavaScript:
document.getElementById('toggleBtn').addEventListener('click', () => {
document.getElementById('contentToToggle').classList.toggle('hidden');
});
```
看出来了吗？我们把显示/隐藏的逻辑放到了一个 `hidden` 类上。JS 的 `classList.toggle('hidden')` 方法实在是太聪明了！它就像一个开关，如果元素上有 `hidden` 类，它就帮你移除；如果没有，它就帮你加上。这样一来，你只需要关注点击事件，而真正的样式变化则交给 CSS 来处理。这是一种非常“优雅”的解决方案，让你的代码更具可读性，也更容易维护。想象一下，如果将来你想让内容不是简单地 `display: none`，而是平滑地淡入淡出，你只需要修改 CSS，JS 代码完全不用动！
2. 数组去重：一行代码的“净化术”
处理数据的时候，最让人头疼的就是重复项了。特别是在前端，我们经常需要处理用户输入或者从 API 获取的数据。如果有一堆 ID 或者名字混在一起，去重可是个体力活。
传统的做法可能会用一个新数组，遍历原数组，如果新数组里没有当前元素，就把它加进去。效率嘛，也就那样。但 JavaScript 的新特性，特别是 `Set` 对象，简直是为去重量身定做的。
```javascript
const numbers = [1, 2, 2, 3, 4, 4, 5, 1];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
```
我跟你说，这简直是“净化术”！`new Set(numbers)` 会创建一个只包含唯一值的 `Set` 集合。然后，我们用展开运算符 (`...`) 将这个 `Set` 转换回一个数组。一行代码，搞定！而且效率高得惊人，因为 `Set` 在内部查找元素时使用了哈希表，比你在数组里一遍遍 `indexOf` 要快得多。
3. “神奇的” `Array.prototype.reduce`：不只是求和
提到 `reduce`，很多人第一反应就是求数组的和。但 `reduce` 的强大之处远不止于此，它可以说是 JavaScript 数组操作中最具通用性的方法之一。它就像一个多才多艺的工具箱，你可以用它来构建各种复杂的数据转换。
举个例子，我们想统计一个数组中每个元素出现的次数：
```javascript
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCounts = fruits.reduce((accumulator, currentFruit) => {
// accumulator 是一个对象，用来存储计数
// 如果当前水果已经在 accumulator 中，就增加计数
// 否则，就给它一个初始计数 1
accumulator[currentFruit] = (accumulator[currentFruit] || 0) + 1;
return accumulator; // 返回更新后的 accumulator
}, {}); // 初始值是一个空对象 {}
console.log(fruitCounts); // 输出: { apple: 3, banana: 2, orange: 1 }
```
这里，`reduce` 的第一个参数是一个回调函数，它接收两个主要参数：`accumulator`（累加器，也就是我们最终想要的结果）和 `currentValue`（当前正在处理的数组元素）。第二个参数 `{}` 是 `reduce` 的初始值，在这里我们提供了一个空对象。
每次迭代，我们都检查 `accumulator` 中是否已经存在当前的水果。如果存在，我们就把它的计数加一；如果不存在，我们就把它初始化为 1。这个 `(accumulator[currentFruit] || 0)` 的用法也很巧妙，如果 `accumulator[currentFruit]` 是 `undefined` (即第一次遇到这个水果)，`|| 0` 就会提供一个默认值 0，然后再加 1，完美！通过这种方式，`reduce` 不仅能求和，还能构建对象、合并数组，甚至是实现复杂的过滤和映射逻辑。它的威力，真的可以挖掘很久。
4. 函数柯里化（Currying）：函数的“精细化生产线”
柯里化是函数式编程中的一个重要概念，简单来说，就是把接受多个参数的函数，转换成一系列只接受一个参数的函数。听起来有点绕？别急，看个例子就懂了。
假设我们有一个函数，需要三个参数来计算：
```javascript
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3)); // 6
```
用柯里化的思路，我们可以把它变成这样：
```javascript
function curriedAdd(a) {
return function(b) {
return function(c) {
return a + b + c;
};
};
}
console.log(curriedAdd(1)(2)(3)); // 6
```
看到了吧？`curriedAdd(1)` 返回一个函数，这个函数接收 `b`；再调用 `(2)`，又返回一个函数接收 `c`；最后调用 `(3)`，才得到最终结果。
这样做的好处是，我们可以“预设”一些参数。比如，你经常需要计算 `1 + x + y`：
```javascript
const addOne = curriedAdd(1);
console.log(addOne(2)(3)); // 6
console.log(addOne(5)(10)); // 16
```
`addOne` 这个函数已经被固定了第一个参数为 1，你就可以重复使用它，而不用每次都写 `curriedAdd(1, ...)`。
当然，手动实现柯里化函数会比较繁琐。社区里有很多工具函数（比如 Lodash 的 `_.curry`）可以帮你自动完成这个转换，一行代码就可以让你的函数变得“可定制化”。这种方式让函数更加灵活，便于组合和复用，是函数式编程思想的体现。
小结一下
这些只是冰山一角，JavaScript 的世界里还有太多这样的“短小精悍”的代码片段，它们或巧妙，或高效，或富有表现力。关键在于理解背后的原理和思想。每次当我发现一个新的技巧时，都感觉像是解锁了一个新的技能点，真的很有成就感。下次你在写 JS 的时候，不妨也多留心一下，或许下一个让你惊叹的“魔法”，就在你指尖的键盘上。
1. “一键”隐藏/显示：CSS 切换的艺术
你有没有遇到过那种，点击一下按钮，某个区域就优雅地出现或者消失的场景？很多人可能会想到用 JS 去直接操作元素的 `display` 属性，就像这样：
```javascript
document.getElementById('myButton').onclick = function() {
var element = document.getElementById('myContent');
if (element.style.display === 'none') {
element.style.display = 'block'; // 或者 'flex', 'grid' 等
} else {
element.style.display = 'none';
}
};
```
这没毛病，但如果我告诉你，用 CSS 配合一个简单的 JS 事件监听，就能让代码更简洁，并且更符合关注点分离的原则呢？
```javascript
// HTML:
//
//
内容区域
// CSS:
// .hidden { display: none; }
// JavaScript:
document.getElementById('toggleBtn').addEventListener('click', () => {
document.getElementById('contentToToggle').classList.toggle('hidden');
});
```
看出来了吗？我们把显示/隐藏的逻辑放到了一个 `hidden` 类上。JS 的 `classList.toggle('hidden')` 方法实在是太聪明了！它就像一个开关，如果元素上有 `hidden` 类，它就帮你移除；如果没有，它就帮你加上。这样一来，你只需要关注点击事件，而真正的样式变化则交给 CSS 来处理。这是一种非常“优雅”的解决方案，让你的代码更具可读性，也更容易维护。想象一下，如果将来你想让内容不是简单地 `display: none`，而是平滑地淡入淡出，你只需要修改 CSS，JS 代码完全不用动！
2. 数组去重：一行代码的“净化术”
处理数据的时候，最让人头疼的就是重复项了。特别是在前端，我们经常需要处理用户输入或者从 API 获取的数据。如果有一堆 ID 或者名字混在一起，去重可是个体力活。
传统的做法可能会用一个新数组，遍历原数组，如果新数组里没有当前元素，就把它加进去。效率嘛，也就那样。但 JavaScript 的新特性，特别是 `Set` 对象，简直是为去重量身定做的。
```javascript
const numbers = [1, 2, 2, 3, 4, 4, 5, 1];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // 输出: [1, 2, 3, 4, 5]
```
我跟你说，这简直是“净化术”！`new Set(numbers)` 会创建一个只包含唯一值的 `Set` 集合。然后，我们用展开运算符 (`...`) 将这个 `Set` 转换回一个数组。一行代码，搞定！而且效率高得惊人，因为 `Set` 在内部查找元素时使用了哈希表，比你在数组里一遍遍 `indexOf` 要快得多。
3. “神奇的” `Array.prototype.reduce`：不只是求和
提到 `reduce`，很多人第一反应就是求数组的和。但 `reduce` 的强大之处远不止于此，它可以说是 JavaScript 数组操作中最具通用性的方法之一。它就像一个多才多艺的工具箱，你可以用它来构建各种复杂的数据转换。
举个例子，我们想统计一个数组中每个元素出现的次数：
```javascript
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCounts = fruits.reduce((accumulator, currentFruit) => {
// accumulator 是一个对象，用来存储计数
// 如果当前水果已经在 accumulator 中，就增加计数
// 否则，就给它一个初始计数 1
accumulator[currentFruit] = (accumulator[currentFruit] || 0) + 1;
return accumulator; // 返回更新后的 accumulator
}, {}); // 初始值是一个空对象 {}
console.log(fruitCounts); // 输出: { apple: 3, banana: 2, orange: 1 }
```
这里，`reduce` 的第一个参数是一个回调函数，它接收两个主要参数：`accumulator`（累加器，也就是我们最终想要的结果）和 `currentValue`（当前正在处理的数组元素）。第二个参数 `{}` 是 `reduce` 的初始值，在这里我们提供了一个空对象。
每次迭代，我们都检查 `accumulator` 中是否已经存在当前的水果。如果存在，我们就把它的计数加一；如果不存在，我们就把它初始化为 1。这个 `(accumulator[currentFruit] || 0)` 的用法也很巧妙，如果 `accumulator[currentFruit]` 是 `undefined` (即第一次遇到这个水果)，`|| 0` 就会提供一个默认值 0，然后再加 1，完美！通过这种方式，`reduce` 不仅能求和，还能构建对象、合并数组，甚至是实现复杂的过滤和映射逻辑。它的威力，真的可以挖掘很久。
4. 函数柯里化（Currying）：函数的“精细化生产线”
柯里化是函数式编程中的一个重要概念，简单来说，就是把接受多个参数的函数，转换成一系列只接受一个参数的函数。听起来有点绕？别急，看个例子就懂了。
假设我们有一个函数，需要三个参数来计算：
```javascript
function add(a, b, c) {
return a + b + c;
}
console.log(add(1, 2, 3)); // 6
```
用柯里化的思路，我们可以把它变成这样：
```javascript
function curriedAdd(a) {
return function(b) {
return function(c) {
return a + b + c;
};
};
}
console.log(curriedAdd(1)(2)(3)); // 6
```
看到了吧？`curriedAdd(1)` 返回一个函数，这个函数接收 `b`；再调用 `(2)`，又返回一个函数接收 `c`；最后调用 `(3)`，才得到最终结果。
这样做的好处是，我们可以“预设”一些参数。比如，你经常需要计算 `1 + x + y`：
```javascript
const addOne = curriedAdd(1);
console.log(addOne(2)(3)); // 6
console.log(addOne(5)(10)); // 16
```
`addOne` 这个函数已经被固定了第一个参数为 1，你就可以重复使用它，而不用每次都写 `curriedAdd(1, ...)`。
当然，手动实现柯里化函数会比较繁琐。社区里有很多工具函数（比如 Lodash 的 `_.curry`）可以帮你自动完成这个转换，一行代码就可以让你的函数变得“可定制化”。这种方式让函数更加灵活，便于组合和复用，是函数式编程思想的体现。
小结一下
这些只是冰山一角，JavaScript 的世界里还有太多这样的“短小精悍”的代码片段，它们或巧妙，或高效，或富有表现力。关键在于理解背后的原理和思想。每次当我发现一个新的技巧时，都感觉像是解锁了一个新的技能点，真的很有成就感。下次你在写 JS 的时候，不妨也多留心一下，或许下一个让你惊叹的“魔法”，就在你指尖的键盘上。
网友意见
有哪些令人印象深刻的 JavaScript 代码，并让你从中学会了很多？
类似的话题
-
我跟你说，有时候 JavaScript 的魔法就藏在那些你一眼扫过，却瞬间让你拍案叫绝的简短代码里。它们不像那些洋洋洒洒几百行的“大制作”，但每一行都精准地切中了要点，带来了出其不意的效果。我最近就挖到了一些这样的“小宝石”，想跟你分享一下，保证不是那种看了跟没看一样、让人昏昏欲睡的“干货”。1. ............. -
有很多非常短但却能深深触动人心的故事，它们往往通过简洁的语言勾勒出深刻的情感，留下悠长的回味。以下为您带来几个比较详细的短而虐心的故事：故事一：最后一颗糖他是一个患有绝症的男孩，生命的时日已经不多。他唯一的乐趣，就是每天晚上睡觉前，吃一颗爷爷给他留下的糖果。这糖果是爷爷年轻时从遥远的地方带回来的，味.............
-
有很多很短却能触动人心的悲伤故事，它们的精髓在于用极少的文字勾勒出巨大的情感落差和难以言说的失落。我将尝试讲述几个，并尽量添加一些细节，让它们的情感更饱满：故事一：那件小小的婚纱一个古老的阁楼里，蒙着厚厚的灰尘，角落里静静地放着一个用旧麻布包裹的箱子。一位头发花白的老人颤巍巍地打开了它。里面躺着一件.............
-
冬日的清晨，寒意刺骨。小镇的街道上，行人稀少，只有零星的早起者匆匆赶路。老王，一个退休多年的手艺人，每天都会在巷口的老旧报刊亭买份报纸。报刊亭的老板是一位头发花白的老太太，姓李。李奶奶的报刊亭不大，却总是收拾得井井有条，报纸叠得整整齐齐，杂志摆放得错落有致，偶尔还能看到一些精美的明信片。今天，老王像.............
-
有很多篇幅不长、但足以撼动科学界甚至改变人类认知进程的论文。它们往往以其简洁的思想、深刻的洞察力，在相对有限的篇幅内提出了颠覆性的概念。下面我将挑选几篇这样的经典之作，并尽量详细地讲述其背景、内容、影响，并力求文字生动自然，不带AI痕迹。 1. 爱因斯坦的《论运动物体的电动力学》（Zur Elekt.............
-
日本动画、漫画的璀璨星河中，流淌着无数鲜活的生命，有些角色如同划过夜空的流星，出场时间短暂，却在观众心中留下了无法磨灭的印记，甚至悄然改变了作品的走向，影响了整个世代的创作风潮。他们或许是故事的引子，或许是情感的催化剂，又或许是象征意义的载体，但无论如何，他们的短暂登场，却迸发出了惊人的能量。谈及此.............
-
在脱离了情情爱爱、红尘俗事的羁绊后，那些超凡脱俗、直抵人心的短句，如同山间清泉、林间明月，自带一种“仙气”。它们不描摹缠绵，不诉说相思，却能瞬间净化心灵，唤醒灵魂深处对至高境界的向往。以下是一些这类短句，并附带详细的解读和意境描绘，希望能让你体会到那份“无关风月却仙气爆棚”的美妙：1. “山月不知何.............
-
好，我们来聊聊那些简短却又饱含深意的爱语。它们不像华丽的辞藻堆砌，而是如同清泉，看似平淡，却能缓缓渗入心底，留下绵长的回味。试想一下，在某个午后，阳光透过窗户洒在地板上，空气中弥漫着淡淡的尘埃味道。你正读着一本书，或者只是发着呆。这时，他（她）默默走到你身边，递过来一杯温水，然后轻声说一句：“我在。.............
-
药物说明书的长短，就像一本菜谱，有些精简明了，有些则事无巨细。这背后其实有很多原因，跟药物本身的性质、研究的深度，以及监管的要求都有关系。咱们就来好好掰扯掰扯。一、药物本身的复杂性是“长”的源头： 新药 vs. 老药： 新上市的药物，特别是那些经过漫长研发过程、机制新颖的药物，说明书往往会非常详.............
-
近现代史上，涌现出不少短暂存在过的国家，它们的兴衰往往与历史的洪流、政治的动荡以及复杂的国际关系息息相关。以下是一些具有代表性的“短命”国家，我们将尽可能详细地讲述它们的故事，力求呈现一种历史的厚重感，而非冰冷的机械输出。一、 德意志第二帝国（1918年1919年）这并非一个完全独立的国家，而是一个.............
-
没问题，我来给你讲几个简短但足够让人背后一凉的恐怖故事，我会尽量讲得生动一些，就像我亲身经历或者从别人那里听来的那样。第一个：阳台上的客人我住在老城区一栋有些年头的老房子里，三楼，一个很小的阳台，足够摆放一个藤椅和一个小桌子。那天晚上，我失眠，大概凌晨两三点，外面静悄悄的，只有远处偶尔传来几声狗叫。.............
-
当然，我很乐意分享一些我个人觉得又短又惊艳的文案，希望能给你带来一些灵感。这些文案往往在极简的文字中蕴含着深刻的意境或者触动人心的力量，仿佛在不经意间在你心湖投下一颗石子，泛起层层涟漪。我会尽量详细地描述它们为何能达到“惊艳”的效果，并确保我的描述听起来像是出自一个有感触、有理解的人之手，而非冰冷的.............
-
步枪截短成手枪，通常被称为“步枪手枪”（Rifle Pistol）或“改装手枪”（Carbine Pistol），是指将原本设计为肩射的步枪，通过缩短枪管、枪托，并可能移除或改装部分部件，使其能够以手持方式进行射击的武器。这种改装通常是为了适应特定需求，例如近距离作战、马背射击、车辆乘员自卫，或者是.............
-
当然！经典英文短语如同英语这门语言的闪亮珍珠，它们简洁、有力，承载着丰富的文化和情感。以下是一些非常经典的英文短语，我会尽量详细地解释它们的含义、用法和背后的文化韵味。 1. "Hello!" / "Hi!" 含义： 最基本、最普遍的问候语。表示友好、打招呼。 详细解释： Hel.............
-
我来跟你聊聊短波那些好听的频率，这可不是什么枯燥的技术数据，而是一扇通往世界的大门，藏着无数故事和声音。我听广播也很多年了，发现有些频率，真的会让你觉得耳朵怀孕，忍不住想一直听下去。先得明白，为什么短波广播那么迷人？其实啊，短波广播有个最大的魅力在于它的“远”。它不像我们平时听的FM或AM，信号传播.............
-
“求”字，简简单单一个字，却能引出无数动人的故事。它关于渴望，关于希冀，关于生命的延续。今天，我想与你分享几个关于“求”的短篇故事，希望它们能触动你心中最柔软的地方。一、那一声微弱的“求”小镇的清晨，总是带着一丝湿润的凉意。在巷子深处，一家老旧的书店里，弥漫着纸张特有的淡淡墨香。店主是一位头发花白的.............
-
.......
-
IT 界里那些让人会心一笑的段子，总是藏在代码的缝隙、Bug的漩涡、以及我们程序员与用户之间那微妙的“沟通”里。这些笑话，与其说是段子手们精心炮制的，不如说是我们日常工作中的真实写照，只不过被放大、被提炼，然后以一种荒诞又现实的方式呈现出来。关于 Bug 的终极哲学：你知道为什么程序猿总是看起来没睡.............
-
5G 消息，又称 RCS（Rich Communication Services），绝不是对我们早已熟悉的短信（SMS/MMS）的简单升级，而是一场通信方式的革新，它带来了更丰富、更智能、更具互动性的体验，对微信这样的即时通讯应用来说，无疑是一场不可忽视的挑战，也可能带来新的合作机遇。5G 消息与传.............
-
“一眼惊鸿，岁月静好。”这句简短的文字，像一抹淡雅的月光，轻轻洒落在心头，带来一种难以言喻的宁静与美好。它不是那种瞬间的灿烂夺目，而是如同一幅徐徐展开的画卷，越品越有味道，越看越觉岁月温柔。想象一下，在一个微风习习的午后，你偶然间抬头，看见一位女子，她或许正倚着窗台，手中捧着一本书，阳光勾勒出她侧脸.............
本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等
© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有