25日目TIL

開始します。

今日,新しい再帰関数とDOMを用いて,2つの記述コードのSprintを実行した.再帰関数の使用法と動作原理を再理解し,以前学習したDOMについて再記述した.

stringifyJSON

オブジェクト、配列などはjavascriptで利用可能なので、共通するには文字列、JSONに変換する必要があります.stringfiy()を使用して文字列形式に変換できます.(逆に、JSON.parse()を使用して文字列を元のオブジェクトの形式に変更できます.)
今回のsprintでは再帰関数JSONを使用します.関数でstringfiy()を実現した.

function stringifyJSON(obj) {
  if (typeof obj === 'undefined' || typeof obj === 'function') return undefined
  if (typeof obj === 'string') {
    return '"' + obj + '"'
  }
  if (Array.isArray(obj)) {
    let arr = [];
    for (el of obj) {
      arr.push(stringifyJSON(el))
    }
    return '['+ arr +']'
  }
  if(typeof obj === 'object' && obj !== null){
    if(Object.keys(obj).length === 0){
      return  '{}'
    }
    let str = ''
    for(el in obj){
      if (typeof obj[el] === 'undefined' || typeof obj[el] === 'function' ) return '{}'
      str += stringifyJSON(el) + ':' + stringifyJSON(obj[el]) +','
  }
    str = str.slice(0, -1)
    return '{'+ str +'}'
  }
  return String(obj)
};

objが未定義または関数の場合、条件付き出力が未定義であるためif文を使用して例外として分離し、objが文字列、配列またはオブジェクトの場合も個別に分離され、その他の場合はコードを記述してString(obj)に戻る.配列またはオブジェクトに他の配列またはオブジェクトまたは3 D以上の配列が存在しないように、再帰関数を使用して文字列に変換します.

Tree UI

再帰関数とDOMを学習したので、実行可能なmenuという配列を次のHTMLドキュメントに変換するcreateTreeView関数の印刷を実現しました.

const menu = [
  {
    type: 'group',
    name: '음료',
    children: [
      {
        type: 'group',
        name: '콜드 브루',
        children: [
          { type: 'item', name: '나이트로 콜드 브루' },
          { type: 'item', name: '돌체 콜드 브루' },
          { type: 'item', name: '제주 비자림 콜드 브루' },
          { type: 'item', name: '콜드 브루' },
        ],
      },
      {
        type: 'group',
        name: '프라푸치노',
        children: [
          { type: 'item', name: '애플 쿠키 크림 프라푸치노' },
          { type: 'item', name: '더블 에스프레소 칩 프라푸치노' },
          { type: 'item', name: '모카 프라푸치노' },
          { type: 'item', name: '피스타치오 크림 프라푸치노' },
        ],
      },
      {
        type: 'group',
        name: '블렌디드',
        children: [
          { type: 'item', name: '망고 바나나 블렌디드' },
          { type: 'item', name: '딸기 요거트 블렌디드' },
          { type: 'item', name: '자몽 셔벗 블렌디드' },
          { type: 'item', name: '피치 & 레몬 블렌디드' },
        ],
      },
      {
        type: 'group',
        name: '티',
        children: [
          { type: 'item', name: '라임 패션 티' },
          { type: 'item', name: '민트 블렌드 티' },
          { type: 'item', name: '아이스 유스베리 티' },
          { type: 'item', name: '아이스 캐모마일 블렌드 티' },
        ],
      },
      {
        type: 'group',
        name: '주스',
        children: [
          { type: 'item', name: '한방에 쭉 감당' },
          { type: 'item', name: '파이팅 청귤' },
          { type: 'item', name: '딸기주스' },
          { type: 'item', name: '도와주 흑흑' },
        ],
      },
    ],
  },
  {
    type: 'group',
    name: '음식',
    children: [
      {
        type: 'group',
        name: '빵',
        children: [
          { type: 'item', name: '트러플 미니 스콘' },
          { type: 'item', name: '보늬밤 몽블랑 데니쉬' },
          { type: 'item', name: '고소한 치즈 베이글' },
          { type: 'item', name: '미니 클래식 스콘' },
        ],
      },
      {
        type: 'group',
        name: '케이크',
        children: [
          { type: 'item', name: '밀당 에그 타르트' },
          { type: 'item', name: '마스카포네 티라미수 케이크' },
          { type: 'item', name: '블루베리 쿠키 치즈 케이크' },
          { type: 'item', name: '부드러운 생크림 카스텔라' },
        ],
      },
      {
        type: 'group',
        name: '샌드위치',
        children: [
          { type: 'item', name: '애플 까망베르 샌드위치' },
          { type: 'item', name: '트리플 머쉬룸 치즈 샌드위치' },
          { type: 'item', name: '로스트 치킨 샐러드 밀 박스' },
          { type: 'item', name: 'B.E.L.T 샌드위치' },
        ],
      },
      {
        type: 'group',
        name: '과일',
        children: [
          { type: 'item', name: '하루 한 컵 RED' },
          { type: 'item', name: '한라봉 가득 핸디 젤리' },
        ],
      },
      {
        type: 'group',
        name: '스낵',
        children: [
          { type: 'item', name: '리저브 초콜릿 세트' },
          { type: 'item', name: '로스티드 아몬드 앤 초콜릿' },
          { type: 'item', name: '마카롱' },
          { type: 'item', name: '자일리톨 캔디 크리스탈 민트' },
        ],
      },
      {
        type: 'group',
        name: '아이스크림',
        children: [
          { type: 'item', name: '자바 칩 유기농 바닐라 아이스크림' },
          { type: 'item', name: '넛츠 초콜릿 아포가토' },
          { type: 'item', name: '바닐라 아포가토' },
        ],
      },
    ],
  },
  {
    type: 'group',
    name: '굿즈',
    children: [
      {
        type: 'group',
        name: '머그',
        children: [
          { type: 'item', name: '우리 한글 블랙 머그 473ml' },
          { type: 'item', name: '서울 투어 머그 355ml' },
          { type: 'item', name: '스타벅스 1호점 머그 400ml' },
          { type: 'item', name: '서울 제주 데이머그 세트' },
        ],
      },
      {
        type: 'group',
        name: '텀블러',
        children: [
          { type: 'item', name: 'SS 부산 투어 텀블러 355ml' },
          { type: 'item', name: 'SS 블랙 헤리티지 오드리 텀블러 355ml' },
          { type: 'item', name: 'SS 에치드 실버 텀블러 473ml' },
        ],
      },
      {
        type: 'group',
        name: '악세사리',
        children: [
          { type: 'item', name: '리저브 오렌지 카드 홀더' },
          { type: 'item', name: '스타벅스 1호점 에코백' },
          { type: 'item', name: '스타벅스 1호점 랩탑 파우치' },
        ],
      },
    ],
  },
  {
    type: 'group',
    name: '카드',
    children: [
      { type: 'item', name: '10000원권' },
      { type: 'item', name: '30000원권' },
      { type: 'item', name: '50000원권' },
      { type: 'item', name: '100000원권' },
    ],
  },
];

(実装が必要なWebページ)
Document

ドリンク

コールドブルー

夜コールドブルー

石体コールドブルー

済州ビザ林冷ブル

コールドブルー

プラプチノ

りんごクッキークリームプラプチノ

デュアルインスタントチッププラプチノ

モカプラプチノ

ハッピーフルーツクリームロブチノ

こんごう

マンゴーバナナミックスドリンク

イチゴヨーグルトミックス

柚子ゼリー混合

桃&レモンミックス

に傷をつける

ライムファッションTシャツ

ミントブレンド茶

アイスパーク

氷甘菊混合茶

ジュース

一撃で

に耐えられる

給油青橘

イチゴジュース

度州黒黒

飲食

パン.

トラフミニ司康

ボニー栗

香チーズベーグル

ミニクラシック

/****************************************************************************************************************************************************************************************************************************************************************************************

const root = document.getElementById('root');
function createTreeView(menu, currentNode) {
  for(el of menu){
    if(el.type === 'group'){
      const li = document.createElement('li')      
      currentNode.append(li)
      const input = document.createElement('input')
      input.type = 'checkbox'
      const span = document.createElement('span')
      span.textContent = el.name;
      const ul = document.createElement('ul')
      li.append(input, span, ul)
      createTreeView(el.children, ul)
    }
   else {
     const li = document.createElement('li');
     li.textContent = el.name;
     currentNode.append(li)
   }
  }
}
createTreeView(menu, root);

コードの作成を開始する前に、HTMLドキュメントの構造とmenuの構造の共通点を見つけました.typeがgroupの場合、li、checkbox、span、ulで生成される構造はオブジェクト内のオブジェクトと同じであるため、再帰関数を使用して要素をこの順序で作成する関数を繰り返す必要がある場合があります.その後typeがitemの場合、elseに分割してliを作成できます.
createTreeView関数にmenu、currentNodeの2つのパラメータを入力します.HTMLでは重複する構造がulに入る構造で重複するため、再帰関数を使用する部分にcurrentNodeをulとして入力します.

の最後の部分

再帰関数に関する符号化問題のみが解決されているため,実際のコードを記述する際にどのように使用するかが気になり,今回のsprintで知ることができる.DOMも回復のチャンスだと思います