20个简洁的 JS 代码片段
内容提要
JavaScript中的20个代码片段，包括使用三元运算符简化if-else语句、从数组中删除重复项、使用空合并操作符简化if-else语句、使用可选链防止崩溃、交换两个变量、将任何值转换为布尔值、使用扩展运算符组合数组、使用扩展运算符拓展解构、使用&&运算符进行缩减判断、使用模板字符串插入变量、使用find()方法从数组中查找特定元素、对象属性赋值、使用forEach()方法压缩for循环、函数参数默认值、将对象的值收集到数组中、使用includes()方法检查元素是否存在于数组中、使用指数运算符进行幂运算、使用Math.floor()简写向下取整、使用解构语法一行分配多个值。
延伸解读
简洁语法的适用边界
文章多次提醒，三元运算符等简写虽能减少行数，但过度使用会让代码冗长难读。例如单行 If-Else 部分明确建议仅替换简单表达式。这意味着这些技巧更适合逻辑直白的场景，复杂条件判断仍应使用传统 if-else 以保持可维护性。
可选链与空合并的防错价值
可选链 ?. 和空合并 ?? 能避免访问未定义属性时的崩溃，并简化空值检查。文章示例中，student?.address?.ZIPCode 替代了多层 && 验证。对于嵌套对象或可能缺失的数据，这两个操作符能提升代码健壮性，但需注意它们仅处理 null 或 undefined，不覆盖其他假值。
Set 与扩展运算符的配合
删除数组重复项时，文章利用 new Set(numbers) 自动去重，再通过扩展运算符 ... 转回数组。这种组合简洁高效，但 Set 基于 SameValueZero 比较，对对象元素去重无效。扩展运算符还可用于合并数组或替代 push，但需注意它创建新数组而非修改原数组。
解构与简写的实用场景
解构语法能一行完成变量交换、多值分配和剩余元素收集，如 [x, y] = [y, x] 和 const { name, age, ...address } = student。对象属性赋值可省略键名，函数参数可设默认值。这些技巧减少样板代码，但解构深层嵌套时可能降低可读性，需权衡使用。
Q&A
如何使用三元运算符简化if-else语句？
可以使用三元运算符将if-else语句简化为一行代码，例如：ageGroup = age > 18 ? 'An adult' : 'A child';
如何从数组中删除重复项？
可以使用Set对象来删除数组中的重复项，例如：const uniqueNumbers = [...new Set(numbers)];
什么是可选链操作符，它有什么用？
可选链操作符?.允许安全地访问嵌套对象的属性，避免访问未定义属性时崩溃。
如何使用扩展运算符组合数组？
可以使用扩展运算符...来组合两个数组，例如：newArray = [...nums1, ...nums2];
如何使用includes()方法检查数组中是否存在某个元素？
可以使用includes()方法来检查元素是否存在，例如：const hasNumber1 = numbers.includes(1);
如何为函数参数设置默认值？
可以在函数定义时为参数提供默认值，例如：function pickUp(fruit = 'Banana') { ... }。
