オブジェクト内の値がtureの要素のキーをカンマ区切りの文字列に変換する

インプットとアウトプット

タイトルだけではよくわからないと思うので、データを例で示します。

input

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()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
オブジェクトからキーを取り出して配列にしてくれるメソッドです。

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

このオブジェクトが

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

という配列に変換されます。

Array.prototype.map()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
配列の要素を一つずつ取り出して、各要素に対してコールバック関数を適用できます。結果としてはコールバック関数でreturnした値の配列が得られます。コールバック関数の引数は、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(',') // ,区切りで配列の要素をつなげる

joinを経てめでたくカンマ区切りの文字列が得られます。

2,3