TIL88. zip array

他の2つの配列を1つの配列にしましょう。

状況を解決する.

ハードコーディングされた部分を地図に変換してきれいにします.
ターゲット:2つの異なるレイアウトが必要で、1つの地図が画面に表示されます.
->zip arrayの利用

하드코딩, 수정해야 하는 부분

<div className="estimate">
          <span>위 : {summaryOfEvaluation?.count[0].value}</span>
          <span>아래 : {summaryOfEvaluation?.count[1].value} </span>
          <span>왼쪽 : {summaryOfEvaluation?.count[2].value} </span>
          <span>오른쪽 : {summaryOfEvaluation?.count[3].value} </span>
</div>

zipのデフォルトの例

const arr1 = ['a', 'b', 'c'];
const arr2 = [1, 2, 3];

const arr3 = arr1.map((el, i) => {
  return [el, arr2[i]];
});

console.log(arr3);
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ] 

スパイクシェイプの配列内の要素の数が決定されました.

zipの適用

  //데이터 형태
 "summary": {
        "count": [
          {
            "type": "TOP",
            "value": 3
          },
          {
            "type": "BOTTOM"
            "value": 1
          },
            "type": "LEFT"
          "value": 0
          },
          {
            "type": "RIGHT"
            "value": 1
          }
        ],
          ...생략
      },
        

const organizeData = () => {
    const direction = ["위", "아래", "왼쪽", "오른쪽"];
    const value = summary?.count?.map((item) => {
      return item.value;
    });
    const zip = direction.map((key, i) => {
      return [key, value?.[i]];
    });
    return zip;
  };

//jsx 부분
 <div className="estimate">
          {organizeData().map(([key, value]) => {
            return (
              <span>
                {key} : {value}
              </span>
            );
          })}
</div>

まずデータから必要な部分を抽出し,配列形式を形成する.
mapを最初の配列に回転させ、配列の最初の要素として挿入し、インデックス値によって2番目の配列値を抽出するtuple形式に2番目の要素を返します.

改造する

もっと簡潔に!

const organizeData = () => {
  return direction.map(( key, i ) => [key, summary?.count?.[i]?.value])  
};

完了した画面

上
以下:1
左:0
右:1