陈日朗博客 ·

20个简洁的 JS 代码片段

💡 原文中文，约4500字，阅读约需11分钟。

📝

内容提要

JavaScript中的20个代码片段，包括使用三元运算符简化if-else语句、从数组中删除重复项、使用空合并操作符简化if-else语句、使用可选链防止崩溃、交换两个变量、将任何值转换为布尔值、使用扩展运算符组合数组、使用扩展运算符拓展解构、使用&&运算符进行缩减判断、使用模板字符串插入变量、使用find()方法从数组中查找特定元素、对象属性赋值、使用forEach()方法压缩for循环、函数参数默认值、将对象的值收集到数组中、使用includes()方法检查元素是否存在于数组中、使用指数运算符进行幂运算、使用Math.floor()简写向下取整、使用解构语法一行分配多个值。

🎯

关键要点

使用三元运算符简化if-else语句
通过Set从数组中删除重复项
使用空合并操作符简化if-else语句
使用可选链防止访问未定义属性时崩溃
在没有第三个变量的情况下交换两个变量
将任何值转换为布尔值
使用扩展运算符组合数组
使用扩展运算符进行解构赋值
使用&&运算符进行条件判断
使用模板字符串插入变量
使用find()方法从数组中查找特定元素
对象属性赋值时可以省略键名
使用forEach()方法压缩for循环
为函数参数设置默认值
使用Object.values()将对象的值收集到数组中
使用includes()方法检查元素是否存在于数组中
使用includes()方法简化多个条件判断
使用指数运算符进行幂运算
使用~~运算符简写Math.floor()
使用解构语法一行分配多个值

❓

延伸问答

如何使用三元运算符简化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') { ... }。

🏷️