Javascript ES6 解构动态属性名称

Javascript ES6 中的解构赋值语法可以让开发人员更加快速方便地从对象或数组中提取值，并且在开发中经常使用。然而，在实践中，当需要从对象中提取属性时，属性的名称可能是动态的或不确定的，这时候就需要用到解构动态属性名称的语法。

解构动态属性名称的基本语法

使用解构动态属性名称的语法可以在不事先知道属性名称的情况下从对象中提取属性值。这个特性可以通过 ES6 中新增的 方括号对象属性名称表示法 来实现。

const obj = {
  name: 'Alice',
  age: 21
};

const { ['name']: nameValue, ['age']: ageValue } = obj;

console.log(nameValue); // 'Alice'
console.log(ageValue); // 21

在上述示例中，我们定义了一个名为 obj 的对象，其中包含名为 name 和 age 的属性。我们使用了解构赋值表达式来从对象中提取这些属性的值，但是在属性名称的位置上使用了方括号语法来指定属性名称，而不是使用点语法或者字符串。

解构动态属性名称的高级用法

我们可以将方括号语法与其他 ES6 特性结合使用，以便更好地利用解构动态属性名称的功能。

用解构赋值从函数参数中提取动态属性

在函数参数中使用解构赋值可以让我们更方便地访问函数的参数值，而结合解构动态属性名称的语法，我们可以轻松访问动态属性。

function logProperty(obj, prop) {
  const { [prop]: propValue } = obj;
  console.log(propValue);
}

const alice = { name: 'Alice', age: 21 };
const bob = { name: 'Bob', age: 25 };

logProperty(alice, 'name'); // 'Alice'
logProperty(bob, 'age'); // 25

在上述示例中，我们定义了一个名为 logProperty 的函数，其中的第一个参数是一个对象，第二个参数是一个属性名。函数内部使用了解构动态属性名称的语法，将第二个参数作为属性名称，从第一个参数中提取了对应的属性值，并打印出来。

解构多个动态属性

同样地，我们也可以在一个解构赋值表达式中同时提取多个动态属性。

const user = {
  name: 'Alice',
  age: 21,
  department: 'IT'
};

const { ['name']: nameValue, ['age']: ageValue, ['department']: depValue } = user;

console.log(nameValue); // 'Alice'
console.log(ageValue); // 21
console.log(depValue); // 'IT'

在这个示例中，我们同时提取了 user 对象中的 name、age 和 department 属性，并将它们分别赋值给三个变量。