高级前端开发需要知道的 25 个 JavaScript 单行代码

1. 不使用临时变量来交换变量的值

例如我们想要将 a 于 b 的值交换

这行代码使用数组 解构赋值 的方式来交换两个变量的值，无需定义新的临时变量。这个巧妙的技巧可让代码看起来更简洁明了。语法 [a, b] = [b, a] 通过解构右侧的数组并将其分配给左侧来实现交换它们的值。

2. 对象解构，让数据访问更便捷

这里使用对象 解构赋值 的方式将对象中的属性直接提取到新的变量中。这种方法简化了访问对象属性的过程，并增强了代码的可读性。

3. 浅克隆对象

通过使用 扩展运算符 ( ... ) 创建 originalObj 的 浅克隆 对象。此技术将所有可枚举的自身属性从原始对象复制到新对象。

4. 合并对象

与克隆类似，通过 扩展运算符 将 obj1 和合并 obj2 为一个新的对象。如果有重叠的属性，则最后一个对象的属性将覆盖前一个对象的属性。

5. 清理数组

通过 Array.prototype.filter() 函数并使用 Boolean 函数作为回调。它将会从数组中删除所有假值（ 0 ， false ， null ， undefined ， '' ， NaN ）。

6. 将 NodeList 转换为数组

通过 扩展运算符 将 NodeList ( document.querySelectorAll 函数的返回值) 转换为 JavaScript 数组，从而能够使用数组的 map 方法 filter 去操作查找到的元素。

7. 检查数组是否满足指定条件

例如我们要判断一个数组中是否存在负数

Array.prototype.some() 函数用于检查数组中是否 至少有一个元素 ，通过所提供的回调函数实现的测试（此处判断是否是负数，返回 true 表示通过）

另外，还可以使用 Array.prototype.every() 来检查数组的所有元素是否 全部通过测试 （此处判断是否是正数）

8. 将文本复制到剪贴板

通过使用 Clipboard API 以编程方式将文本复制到剪贴板。这是一种最新的复制方法，可让文本复制变得无缝且高效（但目前各大浏览器支持度还不是很高，需要考虑兼容性问题）。

9. 删除数组重复项

这里利用了 Set 对象存储的值会保持唯一，以及 扩展运算符 能将 Set 转换回数组的特性。这是一种优雅的删除数组中重复项的方式。

10. 取两个数组的交集

此示例通过使用 Array.prototype.filter() 函数去查找 arr1 与 arr2 中的公共元素。传入的回调函数会检查 arr2 是否包含 arr1 的每一个元素，从而得到两个数组的交集。

可以在这在线运行上述演示代码

11. 求数组元素的总和

此示例使用 Array.prototype.reduce() 方法将数组中所有的值全部累加起来。 reduce 方法接收一个回调函数和一个初始值（即前一个回调函数累加值的初始值），这个回调函数有两个参数：累加值 total 和当前值 value 。它将会遍历数组所有元素，将每个元素添加到总和中（总和初始为0）。

12. 根据指定条件判断，是否给对象的属性赋值

此案例使用扩展运算符 ( ... ) 与短路求值( && )，将属性有条件地添加到对象中。 如果 condition 为真，则会将 {key: value} 扩展到对象中；否则不进行任何操作。

13. 使用变量作为对象的键

这种语法称为 计算属性名 ，它允许使用变量作为对象的键。方括号内的 dynamicKey 表达式会计算其值，以将其用作属性名称。

14. 离线状态检查器

这段代码使用三元运算符检查浏览器的在线状态( navigator.onLine )，如果为真则返回 '在线' ，否则返回 '离线' 。这是一种动态检查用户网络连接状态的方法。

15. 离开页面弹出确认对话框

这行代码与 window 的 onbeforeunload 事件挂钩，当用户离开页面时会弹出一个确认对话框，一般用于防止用户因未保存更改就关闭页面而导致数据丢失。

16. 对象数组，根据对象的某个key求对应值的总和

sumBy 函数使用 Array.prototype.reduce() 对数组中元素特定键的值求和。这是一种根据给定键计算对象数组总和的灵活方法。

17. 将 url 问号后面的查询字符串转为对象

此示例将一个查询字符串转换为了一个对象。其中 URLSearchParams 会进行字符串解析，它将返回一个可迭代对象，然后在通过 Object.fromEntries 将它转换为对象，从而使 URL 参数检索变得方便多了。

18. 将秒数转换为时间格式的字符串

此示例将秒数转换为 HH:MM:SS 格式的字符串。它通过给定的秒数加上时间戳起始点来创建一个新的 Date 对象，然后将其转换为 ISO 字符串，并提取时间部分得到结果。

19. 求某对象所有属性值的最大值

此示例用于在对象所有的属性值中找到最大值。其中 Object.values(obj) 将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为 Math.max 函数的参数进行最大值查找。

20. 判断对象的值中是否包含有某个值

hasValue 函数会检查对象的值中是否存在指定的值。其中 Object.values(obj) 用于获取对象中所有的值的数组，然后通过 includes(value) 检查指定值是否在该数组中。

21. 安全访问深度嵌套的对象属性

此代码首先演示了如何使用可选链运算符 ( ?. ) 安全地访问 user.Profile 的 name 值。如果 user.profile 是 undefined 或 null ，它会短路并返回 undefined ，从而避免潜在的类型错误 TypeError 。

然后，使用空值合并运算符 ( ?? ) 检查左侧是否为 null 或 undefined ，如果是，则使用默认值 '匿名' 。这可确保后备值不会是其他假值（如 '' 或 0 ）。这对于访问数据结构中 可能不存在 某些中间属性的深层嵌套属性非常有用。

在 JavaScript 中，空值合并运算符 ( ?? ) 和逻辑或 ( || ) 都可以用于提供默认值，但它们处理假值的方式有所不同。

在上面的例子中，如果把 ?? 改为 || ，行为会稍微有些不同。 || 的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括 null 、 undefined 、 0 、 NaN 、 '' （空字符串）和 false 。这意味着 || 左边的值不仅仅是 null 或 undefined ，如果还是其他假值，那么都将返回右侧的值。

22. 条件执行语句

利用逻辑 AND ( && ) 运算符，函数 performAction() 仅会在 isEligible 结果为 true 时执行。这是一种无需 if 语句即可有条件地执行函数的简介语法。这对于根据某些条件执行函数非常有用，尤其是在事件处理或回调中。

如果想要条件赋值，则可以这样写

23. 创建包含值为指定数字范围的数组

例如创建数字5以内所有正数的数组

Array.from() 从类数组或可迭代对象创建一个新数组。这里，它接受一个具有属性 length 和映射函数的对象。映射函数 ( (_, i) => i + 1 ) 使用索引 ( i ) 生成从 1 到 5 的数字。下划线 ( _ ) 是一种惯例，表示未使用该参数。

24. 提取文件扩展名

这个案例实现了从字符串中提取文件扩展名。它先找到最后一次出现点号 ( . ) 位置，然后截取从该位置到末尾的字符串。位运算符 ( >>> ) 确保了即使未找到点号 ( . ) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。

25. 切换元素的 class

toggleClass 函数使用 classList.toggle() 方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在，则删除，否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素，例如菜单根据用户操作显示或隐藏。

以上 25 个 JavaScript 单行代码，以简短高效的方式提供强大的功能。希望您今天能有所收获！

在线运行上述演示代码