JavaScript对象解构时如何在函数参数中获取嵌套对象的属性值

解法 #

你可以直接在函数参数的位置嵌套编写解构逻辑，和你在函数外的解构语法完全一致：

function output({value, details: { serialNumber }}){
    console.log(`value: ${value} , detail: ${serialNumber}`);
}
output(secondObject);
// 控制台输出：value: 2 , detail: 4

原理解释 #

• 你之前的写法只解构到了入参的details属性，它本身是个对象，直接打印就会输出[object Object]
• 解构语法里的details: { serialNumber }表示：先从入参对象取出details属性，再对这个details对象做二次解构，拿到内部的serialNumber属性，直接作为函数作用域内的变量使用

如果需要处理details属性可能不存在的场景，可以加默认值避免解构报错：

// 鲁棒性优化写法，details不存在时不会抛出语法错误
function output({value, details: { serialNumber } = {}}){
    const finalSerial = serialNumber ?? '无有效编号'
    console.log(`value: ${value} , detail: ${finalSerial}`);
}

内容的提问来源于stack exchange，提问作者Arijit Maiti