20个JS精简代码无形装逼集合，最为致命，记得收藏好

淡淡的烟草味﹌ 2023-10-03 14:47 53阅读 0赞

在这里插入代码片

1.  单行 If-Else 语句

这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else.  
例如

const age = 12;
    let ageGroup;
    // LONG FORM
    if (age > 18) {  
    ageGroup = "An adult";
    } else {  
    ageGroup = "A child";
    }
    // SHORTHANDageGroup = 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)、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("Nothingfound")
    }
    //SHORTHAND
    console.log(maybeSomething ?? "Nothing found")

4、防止崩溃的可选链  
如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。  
在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。例如：

graph TD;
    A-->B;
    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
    B-->C;

5、在没有第三个变量的情况下交换两个变量  
在 JavaScript 中，你可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个：

let x = 1;
    let y = 2;
    
    
    // LONGER FORM
    let temp = x;
    x = y;
    y = temp;
    
    
    // SHORTHAND
    [x, y] = [y, x];

6、将任何值转换为布尔值  
在 JavaScript 中，你可以使用 !! 在 JS 中将任何内容转换为布尔值。  
例如，这里有一些例子：

!!true    // true
    !!2       // true
    !![]      // true
    !!"Test"  // true
    !!false   // false
    !!0       // false
    !!""      // false

7、扩展运算符  
使用扩展运算符组合两个数组…：

const nums1 = [1, 2, 3];
    const nums2 = [4, 5, 6];// LONG FORMlet newArray = nums1.concat(nums2);
    // SHORTHAND
    newArray = [...nums1, ...nums2];

也可以使用此语法代替将值推送到数组：

在这里插入代let numbers = [1, 2, 3];
    
    
    // LONGER FORM
    numbers.push(4);
    numbers.push(5);
    
    
    // SHORTHAND
    numbers = [...numbers, 4, 5];

8、传播解构  
使用扩展运算符将剩余元素分配给变量：