# 1. 将文本复制到剪贴板
navigator.clipboard.writeText('Text to copy'); |
通过使用 Clipboard API 以编程方式将文本复制到剪贴板。这是一种最新的复制方法，可让文本复制变得无缝且高效（但目前各大浏览器支持度还不是很高，需要考虑兼容性问题）。
# 2. 离开页面弹出确认对话框
window.onbeforeunload = () => '你确定要离开吗？'; |
这行代码与 window 的 onbeforeunload 事件挂钩，当用户离开页面时会弹出一个确认对话框，一般用于防止用户因未保存更改就关闭页面而导致数据丢失。
# 3. 将 url 问号后面的查询字符串转为对象
const query = 'name=John&age=30'; | |
// 将字符串解析为对象 | |
const parseQuery = query => Object.fromEntries(new URLSearchParams(query)); | |
// 结果: parseQuery = {name: 'John', age: '30'} |
此示例将一个查询字符串转换为了一个对象。其中 URLSearchParams 会进行字符串解析，它将返回一个可迭代对象，然后在通过 Object.fromEntries 将它转换为对象，从而使 URL 参数检索变得方便多了。
# 4. 安全访问深度嵌套的对象属性
const user = { profile: { name: '张三' } }; | |
const userName = user.profile?.name ?? '匿名'; | |
// 结果: userName = ' 张三' |
此代码首先演示了如何使用可选链运算符 ( ?. ) 安全地访问 user.profile 的 name 值。如果 user.profile 是 undefined 或 null ，它会短路并返回 undefined ，从而避免潜在的类型错误 TypeError 。
然后，使用空值合并运算符 ( ?? ) 检查左侧是否为 null 或 undefined ，如果是，则使用默认值 '匿名' 。这可确保后备值不会是其他假值（如 '' 或 0 ）。这对于访问数据结构中可能不存在某些中间属性的深层嵌套属性非常有用。
在 JavaScript 中，空值合并运算符 ( ?? ) 和逻辑或 ( || ) 都可以用于提供默认值，但它们处理假值的方式有所不同。
在上面的例子中，如果把 ?? 改为 || ，行为会稍微有些不同。 || 的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括 null 、 undefined 、 0 、 NaN 、 '' （空字符串）和 false 。这意味着 || 左边的值不仅仅是 null 或 undefined ，如果还是其他假值，那么都将返回右侧的值。
# 5. 创建包含值为指定数字范围的数组
例如创建数字 5 以内所有正数的数组
const range = Array.from({ length: 5 }, (_, i) => i + 1); | |
// 结果: range = [1, 2, 3, 4, 5] |
Array.from() 从类数组或可迭代对象创建一个新数组。这里，它接受一个具有属性 length 和映射函数的对象。映射函数 ( (_, i) => i + 1 ) 使用索引 ( i ) 生成从 1 到 5 的数字。下划线 ( _ ) 是一种惯例，表示未使用该参数。
# 6. 提取文件扩展名
const fileName = 'example.png'; | |
const getFileExtension = str => str.slice(((str.lastIndexOf(".") - 1) >>> 0) + 2); | |
// 结果: getFileExtension = 'png' |
这个案例实现了从字符串中提取文件扩展名。它先找到最后一次出现点号 ( . ) 位置，然后截取从该位置到末尾的字符串。位运算符 ( >>> ) 确保了即使未找到点号 ( . ) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。
# 7. 切换元素的 class
const element = document.querySelector('.my-element'); | |
const toggleClass = (el, className) => el.classList.toggle(className); | |
toggleClass(element, 'active'); |
toggleClass 函数使用 classList.toggle() 方法从一个元素的 class 列表中添加或移除某个 class。如果该 class 存在，则删除，否则添加。这是一种根据用户交互或应用程序状态动态更新 class 的方法。非常适合实现响应式设计元素，例如菜单根据用户操作显示或隐藏。
