Советы по деструктуризации, когда имя свойства может отличаться

Question

Деструктуризация обучения и проблема с этой ситуацией. У меня есть такая структура -

myObj{
  key1: {prop1: true, prop2: false},
  key2: {prop1: false, prop2: false}
}

MyObj может иметь несколько ключей, имена которых задаются динамически, но все они имеют одинаковый набор свойств, например prop1 и prop2. Я хочу деструктурировать, чтобы получить prop1 и prop2, не зная настоящего имени key1 или key2.

const { prop1, prop2 } = myObj[someVar];  // someVar can be key1 or key2

Answer 1

Единственное, что я могу придумать, это то, что если это не то, что вы хотите, прокомментируйте, я удалю это

let myObj = {
  key1: {prop1: true, prop2: false},
  key2: {prop1: false, prop2: false}
}

Object.values(myObj).forEach((item)=>{

  const {prop1, prop2} = item;
 
  console.log('prop1: ', prop1 );
  console.log('prop2: ', prop2 );
  
});

Answer 2

Похоже, на вопрос уже дан достаточный ответ, но я хотел бы добавить несколько советов по этому поводу.

Если вы не работаете со строго типизированной версией JavaScript (например, Elm или TypeScript ), Я считаю, что деструктурировать вложенные свойства объекта - это действительно плохая идея, потому что это приведет к ошибкам типа, если базовое свойство не существует заранее (key1). Это потенциально может привести к сбою приложения.

Если вы работаете со строго типизированной версией JavaScript, то при принудительном применении типа возможна ошибка во время компиляции, а не во время выполнения.

Однослойная деструктуризация, на мой взгляд, прекрасна, потому что худшее, что может случиться, это то, что присвоенная переменная станет undefined.

Answer 3

Отвечая на свой вопрос. Я принял решение kiranvj, но позже понял, что следующий формат также не является неправильным:

myObj[someVar].prop1; // or myObj[someVar].prop2;
   // or
const { prop1, prop2 } = myObj[someVar]; 

Я делал неправильные вещи с помощью встроенного оператора if, позже создавая с помощью prop1 и prop2. Это не давало правильного результата. И я думал, что не разрушаю его правильно. Также добавление условных операторов. (Хотя не имеет прямого отношения к публикации, но добавляет дополнительную информацию для таких новичков, как я.)

// this failed to give result   
 { prop1 &&
    ((prop2 && <div>{allTrue}</div>))}

// simplified version gives correct result
{ prop1 && prop2 && <div>{allTrue}</div> }