Javascript 动态解构

考虑这样一个场景：

有N个Tab标签，每一个Tab标签的字段除了Tab标签类型不一样，其他都一样，比如下面的数据：

const data = {
	aType: 10,
  bType: 20,
  cType: 30,
  
  aValue: 100,
  bValue: 200,
  cValue: 300
};

要求：切换 Tab 标签时，把相应的数据拿到。

方法一：

const onChanged = (key) => {
	const typeData = data[`${key}Type`];
  const valueData = data[`${key}Value`];
  // ...
  console.info(typeData, valueData);
}
onChanged('c');

如果还有其他字段，依次按照这种方式写就可以了。小问题就是写的样板代码较多。

方法二：

const onChanged = (key) => {
	const {
  	[`${key}Type`]: type,
		[`${key}Value`]: value
  } = data;
	console.info(type, value);
}
onChanged('c');

此种方法充分利用了Javascript 的解构机制，相对第一种方式，这里只需要关注类型的组合方式，减少了样板代码。