JavaScript ES6中如何通过变量实现对象解构？

完全没问题，ES6的对象解构语法支持动态属性名，正好能满足你需要在data.content和data.collection之间切换的场景。我来给你改造一下原来的代码：

基础实现方式 #

先定义一个变量来指定要解构的目标属性名，然后用方括号包裹变量的语法来完成动态解构：

function mutateTaxon(data) {
  // 根据调用场景动态设置目标键名，比如这里可以通过参数或外部条件判断
  const targetKey = someCondition ? 'content' : 'collection';
  
  // 动态解构出目标节点，用别名targetNode接收
  const { [targetKey]: targetNode } = data;
  // 从目标节点中解构plp，保持原来的空值兜底逻辑
  const { plp } = targetNode || {};
  
  // 后续正常使用plp即可
  // ...你的业务逻辑
}

一步到位的简化写法 #

如果想减少变量声明，也可以直接在解构时嵌套处理空值兜底：

function mutateTaxon(data, targetKey = 'content') {
  // 直接动态解构到plp，同时给目标节点设置空对象兜底，避免报错
  const { [targetKey]: { plp } = {} } = data;
  
  console.log(plp); // 不管targetKey是content还是collection，都能正确拿到plp
}

语法解释 #

这里的{ [targetKey]: targetNode }是ES6解构的属性名别名特性：

• 方括号[]里的targetKey是变量，代表要从data中读取的属性名
• 冒号后面的targetNode是我们自定义的变量名，用来接收该属性对应的值

这样就完美实现了根据场景切换解构节点的需求，和你原来的固定解构逻辑一样安全，同时增加了灵活性。

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