객체의 값이 ture인 요소의 키를 쉼표로 구분된 문자열로 변환

입력 및 출력

제목만으로는 잘 모르겠다고 생각하기 때문에, 데이터를 예로 나타냅니다.

입력

const input = {
    '1': false,
    '2': true,
    '3': true,
    '4': false
}

예를 들어 위와 같은 데이터를 입력한 경우에는 다음과 같은 문자열로 수정합니다.

'2,3'

사용 사례

예를 들어, 설문지 페이지에 확인란을 두고 선택한 항목의 키를 쉼표로 구분된 문자열로 수정하여 API를 호출할 수 있습니다.
예를 들어, Material-UI의 Checkbox 은 true/false 로 값을 관리하기 때문에, 어플리케이션으로서는 상기와 같은 데이터 구조가 될 수가 있습니다.

구현 예

sample.js

const selectedKeysString = Object.keys(input).map(
  (value, index) => {
    if(input[value] === true) {
      return value;
    }
    return null;
  }).filter((element, index, array) => {
    return element !== null;
  }).join(',');

Object.keys()

htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 쟈 / ㅇ cs / ぇ b / 쟈 ゔ Sc 리 pt / 레후 렌 세 / G
객체로부터 키를 꺼내 배열로 해 주는 메소드입니다.

const input = {
    '1': false,
    '2': true,
    '3': true,
    '4': false
}

이 개체가

['1', '2', '3', '4']

라는 배열로 변환됩니다.

알라 y. p로와 type. 마 p ()

htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / 우 b
배열의 요소를 하나씩 꺼내 각 요소에 콜백 함수를 적용할 수 있습니다. 결과는 콜백 함수에서 반환된 값의 배열을 제공합니다. 콜백 함수의 인수는 value 및 index입니다. Object.keys에서 전개된 결과를 사용하여 작성해 보겠습니다.

map.js

['1', '2', '3', '4'].map(
    // value: 配列の要素の値, index: 対応する添字
    // '1'のときindexは0
  (value, index) => {
    if(input[value] === true) {
        // inputは入力のオブジェクト
        // input[value]とすることで、true, falseの値が取得できる
        // trueの場合はキーであるvalueを返す
      return value;
    }
    return null;    // falseの場合はnullを返す
  })

map 함수를 거쳐 아래의 배열을 얻을 수 있습니다.

[null, '2', '3', null]

이대로 문자열에 고치려고 하면 false에 대응하는 개소가 null가 되어 불필요합니다.

Array.prototype.filter

인수로서 준 테스트 함수에 적합하는 값만의 배열을 돌려주는 메소드입니다.

[null, '2', '3', null].filter((element, index, array) => {
    // テスト関数ではelementがnullでなければtrueを返す
    return element !== null;
  })

filter를 거쳐 아래의 배열을 얻을 수 있습니다.

['2', '3']

Array.prototype.join

인수에 준 캐릭터 라인을 단락 문자로서 배열을 캐릭터 라인으로 변환하는 메소드입니다.

['2', '3'].join(',') // ,区切りで配列の要素をつなげる

조인을 거쳐 싶은 쉼표로 구분 된 문자열을 얻을 수 있습니다.

2,3