25个实用的JavaScript开发小技巧

╰+攻爆jí腚メ 2022-10-08 08:52 184阅读 0赞

![4bdb37190db359694a599c1377ff9b14.png][]

英文 | https://betterprogramming.pub/25-useful-javascript-shorthands-for-web-developers-771ac550a7ba

翻译 | 杨小二

今天，我将与你分享一系列令人惊叹的 JavaScript 技巧，它可以使用你的代码更具可读性、简洁性和专业性。

在每个示例中，我首先解决一个较长形式的任务，你可能也会使用它。然后，我再介绍一种更简洁的技巧方法来做完全相同的事情。

现在，让我们开始吧！

# **1、单行 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";

请记住，这种速记旨在使代码更简洁，并在简单的if-else 语句中保存代码行，如上面的语句。不要过度使用它，因为它会降低代码的可读性！

# **2、 空合并** #

空合并运算符 ?? ，如果左侧未定义，则返回右侧。如果是，则返回左侧：

let maybeSomething;
    
    
    // LONG FORM
    if(maybeSomething){
      console.log(maybeSomething)
    } else {
      console.log("Nothing found")
    }
    
    
    //SHORTHAND
    console.log(maybeSomething ?? "Nothing found")

# **3、可选链** #

如果你使用运算符访问对象的属性，但未定义该属性，则会引发错误。这是使用可选链接的地方。

如果你使用可选链运算符？，并且属性未定义，返回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

# **4、将任何值转换为布尔值** #

使用双感叹号 (!!) 在 JS 中将任何内容转换为布尔值。

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

# **5、扩展运算符** #

你可以使用扩展运算符 (...) 将一个数组的元素“扩展”到另一个数组中。例如，让我们连接两个数字数组：

const nums1 = [1, 2, 3];
    const nums2 = [4, 5, 6];
    
    
    // LONG FORM
    let 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];

# **6、使用扩展运算符进行解构** #

你可以使用带有解构的扩展运算符将剩余元素分配给新变量：

在上面的例子中，city和state属性被分配给一个address常量作为剩余部分。

# **7、从数组中删除重复项** #

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
    const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

# **8、 使用 && 进行短路评估** #

不必用if语句检查某事是否为真，你可以使用&&运算符：

var isReady = true;
    
    
    function doSomething(){
      console.log("Yay!");
    }
    
    
    // LONGER FORM
    if(isReady){
      doSomething();
    }
    
    
    // SHORTHAND
    isReady && doSomething();

# **9、 类固醇的字符串** #

你可以通过将字符串包装在反引号内并使用$\{\}来嵌入值来直接将变量嵌入到字符串中：

const age = 41;
    const sentence = `I'm ${age} years old`;
    
    
    // result: I'm 41 years old

# **10、Switch-Case 更短的替代方案** #

你可以使用具有与键关联的函数名称的对象来替换switch语句：

const num = 3
    
    
    // LONGER FORM
    switch (num) {
      case 1:
        someFunction();
        break;
      case 2:
        someOtherFunction();
        break;
      case 3:
        yetAnotherFunction();
        break;
    }
    
    
    // SHORTHAND
    var cases = {
      1: someFunction,
      2: someOtherFunction,
      3: yetAnotherFunction,
    };
    
    
    cases[num]();

不，我没有忘记在cases对象中调用函数！

# **11、对象属性分配** #

如果你希望对象键与值具有相同的名称，则可以省略对象文字：

const name = "Luis", city = "Paris", age = 43, favoriteFood = "Spaghetti";
    
    
    // LONGER FORM
    const person = {
      name: name,
      city: city,
      age: age,
      favoriteFood: favoriteFood
    };
    
    
    // SHORTHAND
    const person = { name, city, age, favoriteFood };

# **12、箭头函数** #

与使用function关键字声明函数不同，使用箭头函数语法会更清晰：

// LONGER FORM
    function greetLong(name) {
      console.log(`Hi, ${name}`);
    }
    
    
    // SHORTHAND
    const greetShort = name => console.log(`Hi, ${name}`);

注意：在本例中，由于函数中只有一个表达式，你可以省略大括号 ( \{\})。但是，如果表达式需要多于一行，则需要使用大括号！

# **13、不带返回关键字返回** #

使用箭头函数时，如果return函数中只有一个表达式，则可以省略关键字和函数的花括号：

// LONGER FORM
    function toPoundsLong(kilos) {
      return kilos * 2.205;
    }
    
    
    // SHORTHAND
    const toPoundsShort = kilos => kilos * 2.205;

# **14、更短的 for 循环** #

for有时你可能希望使用内置forEach()方法更简洁地循环，而不是在集合上使用循环：

const numbers = [1, 2, 3, 4, 5];
    
    
    // LONGER FORM
    for(let i = 0; i < numbers.length; i++){
      console.log(numbers[i]);
    }
    
    
    // SHORTHAND
    numbers.forEach(number => console.log(number));

# **15、 函数参数的默认值** #

在 JavaScript 中，你可以为函数参数提供默认值，以便可以带或不带参数调用函数：

// LONG FORM
    function pickUp(fruit) {
      if(fruit === undefined){
        console.log("I picked up a Banana");
      } else {
        console.log(`I picked up a ${fruit}`);
      }
    }
    
    
    // SHORTHAND
    function pickUp(fruit = "Banana") {
      console.log(`I picked up a ${fruit}`)
    }
    
    
    pickUp("Mango"); // -> I picked up a Mango
    pickUp();        // -> I picked up a Banana

顺便说一句，你还可以使用箭头函数使其更短！

const pick = (fruit = "Banana") => console.log(`I picked up a ${fruit}`)

# **16、声明变量** #

你可以像这样巧妙地将变量声明组合成一行：

// LONGER FORM
    let name;
    let age;
    let favoriteFood = "Pizza";
    
    
    // SHORTHAND
    let name, age, favoriteFood = "Pizza";

# **17、 将值放入数组** #

你可以使用Object.values()获取对象的值并将它们放入数组而不是循环：

const info = { name: "Matt", country: "Finland", age: 35 };
    
    
    // LONGER FORM
    let data = [];
    for (let key in info) {
      data.push(info[key]);
    }
    
    
    // SHORTHAND
    const data = Object.values(info);

# **18、在数组中查找元素** #

使用数组的内置find()方法查找与特定条件匹配的元素，而不是使用冗长的循环：

# **19、检查一个项目是否在数组中** #

你可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中。

let numbers = [1, 2, 3];
    
    
    // LONGER FORM
    const hasNumber1 = numbers.indexOf(1) > -1 // -> True
    
    
    // SHORTHAND/CLEANER APPROACH
    const hasNumber1 = numbers.includes(1)     // -> True

# **20、检查多个条件** #

避免长|| 检查多个条件链时，你可以使用你刚刚在上一个技巧中学到的东西——即，使用 includes() 方法：

const num = 1;
    
    
    // LONGER FORM
    if(num == 1 || num == 2 || num == 3){
      console.log("Yay");
    }
    
    
    // SHORTHAND
    if([1,2,3].includes(num)){
      console.log("Yay");
    }

# **21、使用一行分配多个值** #

你可以使用解构来一次性分配多个值：

let num1, num2;
    
    
    // LONGER FORM
    num1 = 10;
    num2 = 100;
    
    
    // SHORTHAND
    [num1, num2] = [10, 100];

这也可以在处理对象时使用：

student = {
      name: "Matt",
      age: 29,
    };
    
    
    // LONGER FORM
    let name = student.name;
    let age = student.age;
    
    
    // SHORTHAND
    let { name, age } = student;

# **22、在没有第三个变量的情况下交换两个变量** #

在 JavaScript 中，您可以使用解构从数组中提取值。这也可用于在没有第三个帮助程序的情况下交换两个变量：

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

**23、指数运算符**

你可以使用 \*\* 运算符，而不是使用 Math.pow() 函数来将数字求幂：

// LONGER FORM
    Math.pow(4,2); // 16
    Math.pow(2,3); // 8
    
    
    // SHORTHAND
    4**2 // 16
    2**3 // 8

**24、舍入数字时 Math.floor 的简写**

你可以使用 ~~ 运算符，而不是使用 Math.floor() 函数来向下舍入数字：

// LONG FORM
    Math.floor(5.25) // -> 5.0
    
    
    // SHORTHAND
    ~~5.25 // -> 5.0

# **25、将字符串转换为数字** #

你可以使用一元运算符 ( +) 将字符串转换为数字：

// LONGER FORM
    const num = parseInt("1000");
    
    
    // SHORTHAND
    const num = +"1000";

我想将这个速记包括在列表中，但人们可能会争论它是否有用，因为它实际上看起来有点令人困惑。

感谢你的阅读。

#  #

**学习更多技能**

**请点击下方公众号**

![c1cf24ba795ece5ca2cca1d8387ca78c.gif][]

[4bdb37190db359694a599c1377ff9b14.png]: /images/20221005/19701319df6d4b48bcc3fe51360b69cb.png
[c1cf24ba795ece5ca2cca1d8387ca78c.gif]: /images/20221005/69f874f0439b4a99b5aea107b2744bc7.png