종종 개체 속성의 모든 조합을 얻는 것이 바람직합니다. 내가 이것을 가장 많이 사용하는 경우 중 하나는 테스트입니다. 수신할 수 있는 데이터의 모든 순열로 구성 요소의 기능을 시도하고 싶습니다.

간단한 예: React Navbar

name , displayMode 및 timezone props를 사용하는 React 탐색 모음이 있다고 가정해 보겠습니다. name은 문자열 또는 null (로그인 사용자가없는 경우), displayMode은 "dark" 또는 "light" 및 timezone이 될 수 있습니다.

가능한 각 상태에서 탐색 모음의 스냅샷 테스트를 수행하고 싶습니다. 각 상태를 수동으로 작성할 수 있지만 결국 2 * 2 * 4 = 16개 조합이 됩니다. 더 많은 소품이 있었다면 이 작업은 빠르게 해결될 것입니다! 대신 가능한 모든 조합을 생성하는 빠른 스크립트를 작성해 보겠습니다.

const navBarProps = {
  name: ["John Doe", null],
  displayMode: ["dark", "light"],
  timezone: ["ET", "CT", "MT", "PT"],
};

function allCombinations(obj) {
  let combos = [{}];
  Object.entries(obj).forEach(([key, values]) => {
    let all = [];
    values.forEach((value) => {
      combos.forEach((combo) => {
        all.push({ ...combo, [key]: value });
      });
    });
    combos = all;
  });
  return combos;
}

console.log(allCombinations(navBarProps));

/*

[ { name: 'John Doe', displayMode: 'dark', timezone: 'ET' },
  { name: null, displayMode: 'dark', timezone: 'ET' },
  { name: 'John Doe', displayMode: 'light', timezone: 'ET' },
  { name: null, displayMode: 'light', timezone: 'ET' },
  { name: 'John Doe', displayMode: 'dark', timezone: 'CT' },
  { name: null, displayMode: 'dark', timezone: 'CT' },
  { name: 'John Doe', displayMode: 'light', timezone: 'CT' },
  { name: null, displayMode: 'light', timezone: 'CT' },
  { name: 'John Doe', displayMode: 'dark', timezone: 'MT' },
  { name: null, displayMode: 'dark', timezone: 'MT' },
  { name: 'John Doe', displayMode: 'light', timezone: 'MT' },
  { name: null, displayMode: 'light', timezone: 'MT' },
  { name: 'John Doe', displayMode: 'dark', timezone: 'PT' },
  { name: null, displayMode: 'dark', timezone: 'PT' },
  { name: 'John Doe', displayMode: 'light', timezone: 'PT' },
  { name: null, displayMode: 'light', timezone: 'PT' } 

*/

그리고 그게 다야! 이제 이러한 조합을 기반으로 일부 구성 요소를 생성하려는 경우 생성한 배열을 반복할 수 있습니다.

const tests = allCombinations(navBarProps).map(props => {
  return <Navbar {...props} />;
});