极客教程JavaScript 参数解构
在JavaScript中，解构用于将数组中的值或对象文字中的属性拆分或分离成不同的变量，从而允许我们仅访问所需的值。
当仅要使用对象的特定属性或特定索引数组元素或在函数内考虑时，可以使用参数解构的概念来实现。对象的属性或指定的数组元素被传入函数参数，因此可以解包成不同的变量，然后在函数体内使用。
要访问的属性可以使用 别名 赋予不同的名称，并且可以给予 默认值 。如果参数中不存在对象属性或某个数组元素。
让我们通过以下示例来理解参数解构的概念，使用数组或帮助对象：
1. 作为函数参数传递的解构数组
在以下示例中，首先我们将创建一个包含多个元素的数组，然后将解构或解包数组元素到函数或方法体，并在稍后调用该函数后使用它来打印值。
Javascript
// employee details in the form of an array...
let employee_details = ["Rohit", 1211, "Software Engineer"];
// Function made to retrieve the employee's data
// by using Parameter Destructuring...
let getDetails = ([name_of_an_employee, employee_id, employee_designation]) => {
console.log(
`Employee's name : {name_of_an_employee} , Employee's ID:{employee_id}, Employee's Designation: ${employee_designation}`
);
};
getDetails(employee_details);
// This code is contributed by Aman Singla...
输出：
Employee's name : Rohit , Employee's ID: 1211, Employee's Designation: Software Engineer
注意： 实现参数解构，可以将数组作为函数或方法的参数传递，同时在输出结果到浏览器控制台时，也可以跳过一个或多个传入数组的值。让我们通过下面的示例来分析这个具体情况。
Javascript
<script>
// 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);
</script>
输出：
Employee ID: 1211, Designation: Software Engineer
默认值： 如果在传递给函数的数组中没有某个确定的值，可以为参数赋予特定的默认值。也可以理解为，如果函数内部传递的数组中没有某个值（可能存在也可能不存在），那么可以添加或替换该值（如果以前存在默认值）。
在以下示例中，’companyName’变量被用作 默认参数 ，因为在 emp 数组中没有相应的值。
Javascript
<script>
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);
</script>
输出：
Employee ID: 1211, Designation: Software Engineer, Company: ABCTech
2. 解构作为函数参数传递的对象： 现在，使用与上面相同的示例，我们将只访问作为参数传递给getDetails函数的employee对象（emp）的所需属性。
Javascript
<script>
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);
</script>
输出：
Employee ID: 1211, Designation: Software Engineer
在下面的示例中，将默认值赋给 companyName 属性，因为它在 emp 对象中是 undefined 。
Javascript
<script>
const emp = {
name: 'Rohit',
id: 1211,
designation: 'Software Engineer'
};
function getDetails({ id: empID, companyName = 'ABCTech' }) {
console.log(
`Employee ID: {empID}, Company:{companyName}`);
}
getDetails(emp);
</script>
输出：
Employee ID: 1211, Company: ABCTech
解构嵌套对象: 在函数参数中，还可以对嵌套对象进行解构。下面的示例展示了将嵌套对象 address 的 address.pincode 属性解构到变量 pincode 中。
JavaScript
<script>
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);
</script>
输出：
Employee Name: Rohit, ID: 1211, Address -> Pincode: 560004
解构函数的返回值： 当任何函数或方法返回一个特定的对象且我们非常关注输出返回对象中的特定属性值时，我们同样会使用解构的概念。下面的示例将帮助我们更有效地理解这个概念。
Javascript
let getUsersDetails = () => {
return {
name: "ABCD",
address: "XYZ City",
age: 55,
};
};
let { name, age } = getUsersDetails();
console.log(name, age);
// This code is contributed by Aman Singla...
输出：
ABCD 55