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 单行代码，以简短高效的方式提供强大的功能。希望您今天能有所收获！
在线运行上述演示代码
