20个简洁的 JS 代码片段
1、单行 If-Else 语句
这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句,而不是在多行上编写 if-else。
例如:
const age = 12;
let ageGroup;
// LONG FORM
if (age > 18) {
ageGroup = "An adult";
} else {
ageGroup = "A child";
}
// SHORTHAND
ageGroup = age > 18 ? "An adult" : "A child";
但是,不要过度使用它。它会使你的代码更加冗长。明智的做法是仅用此替换简单的表达式以提高可读性并减少代码行数。
2、从数组中删除重复项
在 JavaScript 中,Set 是一个集合,它允许你仅存储唯一值。这意味着删除任何重复的值。
因此,要从数组中删除重复项,你可以将其转换为集合,然后再转换回数组。
const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]
困惑吗?让我解释一下它是如何工作的:
1)、new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
2)、展开运算符…将任何可迭代对象转换为数组。这意味着将集合转换回数组。[…new Set(numbers)]
3、 较短的 If-Else 的空合并
这也是 if-else 的简写。
你可以使用看涨合并,而不是使用 if-else 构造来检查值是否为空。该nullish合并操作 ??,如果没有定义左侧返回右侧。如果是,则返回左侧:
let maybeSomething;
// LONG FORM
if(maybeSomething){
console.log(maybeSomething)
} else {
console.log("Nothing found")
}
//SHORTHAND
console.log(maybeSomething ?? "Nothing found")
4、防止崩溃的可选链
如果访问未定义的属性,则会产生错误。这就是可选链的用武之地。
在未定义属性时使用可选链运算符,undefined将返回而不是错误。这可以防止你的代码崩溃。
例如:
const student = {
name: "Matt",
age: 27,
address: {
state: "New York"
},
};
// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined
// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined
5、在没有第三个变量的情况下交换两个变量
在 JavaScript 中,你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个:
let x = 1;
let y = 2