ES6动态解构

Question

I need to apply different destructuring for the function response depending of global flag [single service for multiple apps]

// Destructuring template should be defined as value
let destructuringTemplate;
if (flag) {
   destructuringTemplate = {data: {classA: user}};
} else {
   destructuringTemplate = {data: {classB: user}};
}
// This technique would not work, this is just my idea representation.
this.getUser(({destructuringTemplate: user) => { this.localUser = user });

At this moment it works this way:

let destructuringTemplate;
if (flag) {
   destructuringTemplate = ({data: {classA: user}}) => user;
} else {
   destructuringTemplate = ({data: {classB: user}}) => user;
}
this.getUser(response => { this.localUser = destructuringTemplate(response)};

it is kinda ugly, some suggestion how it should be done?

Answer 1

You could use a computed property name with a conditional (ternary) operator ?: .

 var flag = true, object = { data: { classA: 'foo', classB: 'bar' } }, { data: { [flag ? 'classA' : 'classB']: user } } = object, { data: { [!flag ? 'classA' : 'classB']: user1 } } = object; console.log(user); console.log(user1); 

Answer 2

You don't need to use destructuring, use simple dot/bracket notation:

const userClass = flag ? 'classA' : 'classB'
this.getUser(response => { this.localUser = response.data[userClass] })

If you want to reuse this logic, just create simple function, eg:

const extractUser = response => response.data[userClass]