参数解构

JavaScript 中的解构用于将数组中的值或对象字面量中的属性解包为不同的变量，因此它允许我们仅访问所需的值。

当只在函数中使用对象或特定数组元素的某些属性时，可以使用参数解构来实现。传递给函数参数的对象或数组元素的属性可以解压缩为不同的变量，然后可以在函数体中使用这些变量。

要访问的属性可以使用别名指定不同的名称，也可以指定默认值。如果传递的参数中不存在对象属性或某个数组元素。

让我们借助以下示例了解使用数组或对象进行参数解构。

1.解构数组作为函数参数传递

Javascript

  
    // Function to get Employee details
    // an array containing the employee 
    // details is passed as a function 
    // parameter
  
    // emp details array
    const emp = ['Rohit', 1211, 'Software Engineer'];
  
    // Skipping the employee name i.e. 
    // emp[0] from the array passed
    function getDetails([ , id, designation]){
        console.log(`Employee ID: ${id}, Designation: ${designation}`);
     }
  
     getDetails(emp);
 

输出：

Employee ID: 1211, Designation: Software Engineer

默认值：如果传递给函数的数组中不存在某个值，则可以为参数分配默认值。

在以下示例中，“companyName”变量用作默认参数，因为emp数组中不存在相应的值

Javascript

    const emp = ['Rohit', 1211, 'Software Engineer'];
  
    // companyName is assigned a default value
    function getDetails([, id, designation, 
                companyName = 'ABCTech']) {
  
        console.log(`Employee ID: ${id}, 
            Designation: ${designation}, 
            Company: ${companyName}`
        );
    }
    getDetails(emp);

输出：

Employee ID: 1211, Designation: Software Engineer, Company: ABCTech

2. 解构作为函数参数传递的对象：现在，使用与上面相同的示例，我们将仅访问作为参数传递给 getDetails函数的员工对象 ( emp ) 的必需属性。

Javascript

    const emp = { 
        name: 'Rohit', 
        id: 1211, 
        designation: 'Software Engineer' 
    };
  
    // Using aliases to access the emp properties
    // skipping the 'name' property
    function getDetails({ id: empID, designation: desg }) {
        console.log(`Employee ID: ${empID}, Designation: ${desg}`);
    }
    getDetails(emp);

输出：

Employee ID: 1211, Designation: Software Engineer

在以下示例中，将默认值分配给companyName属性，因为它在emp对象中未定义

Javascript

    const emp = { 
        name: 'Rohit', 
        id: 1211,
        designation: 'Software Engineer' 
    };
  
    function getDetails({ id: empID, companyName = 'ABCTech' }) {
        console.log(
            `Employee ID: ${empID}, Company: ${companyName}`);
    }
  
    getDetails(emp);

输出：

Employee ID: 1211, Company: ABCTech

解构嵌套对象：嵌套对象也可以在函数参数中解构。以下示例显示了将嵌套对象地址的address.pincode属性解压缩到变量pincode 中。

Javascript

    const emp = { 
        name: 'Rohit', 
        id: 1211, 
        designation: 'Software Engineer', 
        address: { 
            city: 'Bangalore', 
            pincode: '560004' 
        } 
    };
  
    // Nested object address is destructured
    // to access address.pincode
    function getDetails({ name: empName, 
        id: empID, address: { pincode } }) {
  
        console.log(
            `Employee Name: ${empName}, 
            ID: ${empID}, 
            Address -> Pincode: ${pincode}`
        );
    }
      
    getDetails(emp);

输出：

Employee Name: Rohit, ID: 1211, Address -> Pincode: 560004