多个我自身常用的JS有趣的用法总结（21～24/24）
最新回答
浮生远离
2026-06-11 01:08:52
以下是多个常用的JavaScript有趣用法总结（21～24/24），结合实用性与简洁性，涵盖数学计算、DOM操作、环境检测及函数式编程技巧：
21. 计算两个坐标之间的距离通过勾股定理计算二维平面中两点间的直线距离，适用于地图、游戏等场景。
function distance(p1, p2) { return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));}// 示例：distance({x: 0, y: 0}, {x: 3, y: 4}) → 5关键点：
- 使用 Math.sqrt 和 Math.pow 实现平方根与幂运算。
- 参数需为包含 x 和 y 属性的对象。
通过比较元素的边界坐标判断碰撞或重叠，常用于拖拽交互或弹窗定位。
function overlaps(a, b) { const rectA = a.getBoundingClientRect(); const rectB = b.getBoundingClientRect(); return !( rectA.right < rectB.left || rectA.left > rectB.right || rectA.bottom < rectB.top || rectA.top > rectB.bottom );}// 示例：overlaps(element1, element2) → true/false关键点：
- getBoundingClientRect() 返回元素的 left/right/top/bottom 坐标。
- 逻辑取反（!）确保检测的是重叠而非分离。
区分前端浏览器与Node.js运行时，避免在服务端误用浏览器API。
function isNode() { return typeof process !== 'undefined' && process.versions != null && process.versions.node != null;}// 示例：isNode() → 在Node中返回true，浏览器中返回false关键点：
- Node.js的全局 process 对象包含版本信息（process.versions.node）。
- 浏览器中 process 未定义，直接访问会报错，需先判断存在性。
使用 reduce 实现多参数累加，支持数组展开或连续传参。
function sum(...args) { return args.reduce((a, b) => a + b, 0);}// 示例：sum(1, 2, 3) → 6；sum(...[1, 2, 3]) → 6关键点：
- 剩余参数 ...args 将参数合并为数组。
- reduce 的初始值设为 0，避免空数组调用时报错。
- 对比原代码（缺少 return 和初始值），此版本更健壮。
- 数学计算：如距离公式需注意参数格式。
- DOM操作：边界检测需考虑坐标系的相对性。
- 环境判断：通过全局对象特征区分运行时。
- 函数式编程：reduce 可简化聚合操作，但需处理边缘情况。
后续若积累更多实用技巧，将继续分享！
热门标签
