Javascript 动态解构

考虑这样一个场景：

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

1const data = {
2	aType: 10,
3  bType: 20,
4  cType: 30,
5
6  aValue: 100,
7  bValue: 200,
8  cValue: 300
9};

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

方法一：

1const onChanged = (key) => {
2	const typeData = data[`${key}Type`];
3  const valueData = data[`${key}Value`];
4  // ...
5  console.info(typeData, valueData);
6}
7onChanged('c');

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

方法二：

1const onChanged = (key) => {
2	const {
3  	[`${key}Type`]: type,
4		[`${key}Value`]: value
5  } = data;
6	console.info(type, value);
7}
8onChanged('c');

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