返回
一行代码就能解决 JavaScript 难题
前端
2023-10-04 00:49:13
在软件开发的世界中，JavaScript 凭借其无与伦比的灵活性、广泛的用途和令人难以置信的多样性脱颖而出。从前端交互到服务器端处理，JavaScript 已成为现代 Web 开发的基石。然而，即使是最熟练的开发人员也可能在某些情况下感到困惑或卡壳。
在本文中，我们将探索 33 行不可思议的 JavaScript 代码，每一行都以其独创性和实用性脱颖而出。这些代码片段涵盖各种任务，从数据操作和字符串处理到 DOM 操纵和异步编程。无论您是 JavaScript 新手还是经验丰富的专家，我们相信您都会从中获得启发，并为您的开发工具包添加一些有价值的技巧。
数据操作
- 合并多个数组：
[...arr1, ...arr2, ...arr3] - 获取数组中唯一元素：
[...new Set(arr)] - 查找数组中最大/最小值：
Math.max(...arr) / Math.min(...arr) - 将对象转换为查询字符串：
new URLSearchParams(obj)
字符串处理
- 删除字符串中的所有空格：
str.replace(/\s/g, '') - 将字符串转换为标题格式：
str.replace(/\w\S*/g, (w) => w.replace(/^\w/, w[0].toUpperCase())) - 反转字符串：
[...str].reverse().join('') - 检查字符串是否为回文：
str === str.split('').reverse().join('')
DOM 操纵
- 获取元素的绝对位置：
element.getBoundingClientRect() - 隐藏元素：
element.style.display = 'none' - 添加事件侦听器：
element.addEventListener('click', () => {}) - 创建新元素：
document.createElement('div')
异步编程
- 延迟函数执行：
setTimeout(() => {}, milliseconds) - 按顺序执行异步任务：
async function() { await task1(); await task2(); } - 并行执行异步任务：
Promise.all([task1(), task2()]) - 处理异步错误：
try { ... } catch (err) { ... }
其他实用技巧
- 生成随机数：
Math.random() - 获取 URL 参数：
new URLSearchParams(window.location.search).get('param') - 将 JSON 转换为对象：
JSON.parse(json) - 从对象中删除属性：
delete obj.property - 检查对象是否为空：
Object.keys(obj).length === 0 - 深拷贝对象：
JSON.parse(JSON.stringify(obj))
