如何在constructor函数中提取object属性值且无需编写多行代码

实现方案 #

你要的极简提取对象属性的需求用ES6的对象解构语法就能实现，你原本的写法思路正确，仅需补全变量声明就能正常运行，全程只需1行代码，无需编写4行逐行赋值的代码：

constructor(product) {
    // 单次解构完成4个属性的提取
    const { title, imgUrl, price, desc } = product
}

如果你是需要把提取到的属性直接挂载到类实例this上，还可以进一步省略单独的变量声明，避免逐行写this.xxx = xxx的冗余代码：

// 方案1：搭配IIFE实现属性筛选挂载
constructor(product) {
    Object.assign(this, (({ title, imgUrl, price, desc }) => ({ title, imgUrl, price, desc }))(product))
}

// 方案2：提前封装通用属性提取工具函数，复用性更高
// 工具函数全局仅需定义一次
const pick = (targetObj, keyList) => Object.fromEntries(keyList.map(key => [key, targetObj[key]]))

// 构造函数内仅需一行调用
constructor(product) {
    Object.assign(this, pick(product, ['title', 'imgUrl', 'price', 'desc']))
}

方案选型参考 #

• 仅需要提取属性为独立变量：选基础解构方案，可读性最高，是业务开发中最常用的写法
• 需要把提取的属性批量挂载到其他对象上：选Object.assign搭配工具函数的方案，冗余代码最少

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