JS default：让编程更简洁

OZAXJ • 2025-01-27 13:34 • 编程

在编写JavaScript代码时，我们可能会经常用到default关键字，它可以在变量的值为undefined时设置默认值，使代码更加简洁易懂。下面从多个方面对default关键字进行详细阐述。

一、默认参数值

在函数定义中，我们可以使用default关键字设置默认参数值。

  
    function greet(name = 'John') {
      console.log(`Hello, ${name}!`);
    }
    
    greet(); // 输出 "Hello, John!"
    greet("Tom"); // 输出 "Hello, Tom!"

在上面的代码中，如果没有传递参数name，那么它的值将被设置为”John”。这就避免了当参数缺失时产生的错误。

二、对象解构

在对象解构时，我们可以使用default关键字设置默认值。

  
    const person = {
      name: "Tom",
      age: 20,
      city: "Shanghai"
    };
    
    const { name, age, sex = "male" } = person;
    
    console.log(name);  // 输出 "Tom"
    console.log(age);   // 输出 "20"
    console.log(sex);   // 输出 "male"

在上面的代码中，sex属性不存在于person对象中，所以默认值被设置为”male”。

三、switch语句

在switch语句中，我们可以使用default关键字设置默认情况。

  
    const color = "green";
    
    switch (color) {
      case "red":
        console.log("Color is red");
        break;
      case "blue":
        console.log("Color is blue");
        break;
      default:
        console.log("Color is not red or blue");
    }
    
    // 输出 "Color is not red or blue"

在上面的代码中，如果color变量的值既不是”red”也不是”blue”，则默认情况将被执行。

四、export语句

在模块中，我们可以使用default关键字导出默认模块。

  
    // 模块文件：person.js
    
    export default {
      name: "John",
      age: 30
    };
    
    // 主文件：main.js
    
    import person from './person.js';
    
    console.log(person.name); // 输出 "John"
    console.log(person.age);  // 输出 "30"

在上面的代码中，我们导出了名为”John”和30的默认模块，并在主文件中导入并使用该模块。

五、结合解构和函数参数设置默认值

在函数参数中，我们可以使用default关键字结合解构来设置默认值。

  
    function createUser({ name, age, city = "Shanghai" }) {
      console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
    }
    
    createUser({ name: "Tom", age: 20 }); // 输出 "Name: Tom, Age: 20, City: Shanghai"
    createUser({ name: "Lucy", age: 25, city: "Beijing" }); // 输出 "Name: Lucy, Age: 25, City: Beijing"

在上面的代码中，createUser函数接受一个包含name，age和city属性的对象作为函数参数。如果city属性不存在，则默认值为”Shanghai”。

总结

使用default关键字可以使JavaScript编程更简洁、易懂。它可以在变量的值为undefined时设置默认值，也可以在对象解构、switch语句和模块导出等情况下使用。结合解构和函数参数设置默认值可以使代码更加简洁。

原创文章，作者：OZAXJ，如若转载，请注明出处：https://www.506064.com/n/333023.html