質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.60%

Javascript | filter + arrow関数末尾の[0] とは?

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 970
退会済みユーザー

退会済みユーザー

下記コードのArray.prototype.filterの最後にある[0]の意味がわかりません。
これはどういう名称の文法でしょうか。初見の記法でしたので、
お尋ねをさせていただきたいです、ご教授をいただけると幸いです。

const setIsHeaderLabel = (model/*: Sequelize */, columnName/*: string */, value/*: string */) => {
  if (!value) return;
  const flag = Object.keys(constant.IS_HEADER_LABEL).filter(k => {
    return constant.IS_HEADER_LABEL[k] === value;
  })[0];
  model.setDataValue(columnName, flag);
};

constant.IS_HEADER_LABEL は下記だとします。

c.IS_HEADER_LABEL = {
  1: '付与する',
  0: '付与しない',
};

宜しくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/02/27 11:37

    普通に添え字ではないかと思うのですが、そういうお話ではなく?

    キャンセル

回答 2

checkベストアンサー

+5

ES5ではArray.prototype.filterしか存在しませんでした。
該当するもののうち、先頭のものだけ取り出したい場合は一度filterで配列にしてから[0]というプロパティにアクセスしていました。

ES2015ではArray.prototype.findがあるのでそちらを使いましょう。
アロー関数使ってるのにArray.prototype.findが存在してないってのもありえません。

const setIsHeaderLabel = (model/*: Sequelize */, columnName/*: string */, value/*: string */) => {
  if (!value) return;

  // "0" or "1" or undefinedが結果の候補になっちゃう
  // このundefinedは駄目そう
  const flag = Object.keys(constant.IS_HEADER_LABEL).find(k =>
    constant.IS_HEADER_LABEL[k] === value
  );

  // 意図を考慮するとこの行が抜けてるんじゃないかな?
  if (flag == null) return;

  model.setDataValue(columnName, flag);
};

ついでにアロー関数は{}を省略すると1つの式をそのままreturnするのでより自然になります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/01 21:38

    ありがとうございます!このコードは基本1つの値しか期待していない関数なのですが、
    Array.prototype.filterを用いる以上、配列で返されるので添字[0]を利用することで
    値を取得していたことが、ご回答のおかげで把握できました。
    またfindの件も、とても勉強になりました。確かにこのコードはArray.prototype.findで
    書換をした方がいいですね。

    ------------------------------
    // 意図を考慮するとこの行が抜けてるんじゃないかな?
    if (flag == null) return;
    ------------------------------

    これは if(flag==undefined) return; ではなくやはりnullであるべきでしょうか?
    もしよろしければご教授いただけると幸いです。

    キャンセル

  • 2019/03/01 22:53 編集

    追加講義ということで普段の口調を使うね。

    > これは if(flag==undefined) return; ではなくやはりnullであるべきでしょうか?
    そうだね。
    普段JavaScriptで比較演算子を使う場合は`===`を使えと教わるんだけど、
    このケースだけは`===`ではなく`==`を使うべきだし、比較するのはnullが最もふさわしい。

    理由として、JavaScriptの仕様でundefinedが予約語ではない。
    つまりundefinedという変数を宣言して上書きできる小ネタがある。
    いやびっくりだよ。

    そして==は型変換可能という意味で、nullやundefinedはif文に単体で放り込むとfalseとして扱われる。
    https://developer.mozilla.org/ja/docs/Glossary/Falsy
    なので、`0 == null`や`"" == undefined`は一見trueになりそうなんだけど、
    nullやundefinedと==で比較してtrueが返ってくるのは、nullかundefinedのみ。
    この仕様があるので、nullとundefined両対応で弾く時は基本的に`if (a == null)`が使われるのだ。

    ---

    ついでに別方向、
    `if (!flag) return;`という選択肢も見ていこう。

    Object.keys(obj)は必ずStringの配列を返す。
    そしてJavaScriptはif文に単体で放り込んだ場合、Boolean型でないものがtrueになるかfalseになるかという変換先が仕様で厳格に決められている。

    では問題、Stringの"0"はtrueであるか?それともfalseであるか?
    これは結構難問だね。正解できたかな?

    それに比べると、Array.prototype.findが見つからなかったらundefined返すって言ってるんだから素直にundefinedを弾いた方がわかりやすい
    まず無いだろうけど`Object.keys({"": "taro"})`の場合falseになる値が取れるからバグになるしね。

    ```
    (undefined => undefined)(1)
    // 1 <- デベロッパツール上で引数束縛でいけることを確認

    Object.keys({"0": "taro"})
    // ["0"]

    Boolean('0')
    // true

    Object.keys({"": "taro"})
    ```

    キャンセル

  • 2019/03/03 20:20 編集

    大変為になりました、ありがとうございます。

    ■ undefinedが予約語でない点
    ■型変換可能==をnullやundefinedで用いる場合、それぞれnullやundefinedでしかtrueにならない点
    ■console.log(Boolean('0')); // trueになること
    ■アロー関数の{}を省略することで、returnを省略できる点など

    知らないこと、整理できたことが多くありました、ありがとうございます!

    キャンセル

+5

filterが配列を返すので、要はarray[0]、つまり配列の最初の要素、です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/27 11:41

    細かくいうなら
    まず、Object.keys(constant.IS_HEADER_LABEL)が、[0,1]を返す
    次に、[0,1].filter(callback)で、callback内の処理は、ヘッダラベル[0]、ヘッダラベル[1]としたときの値がvalueと同じかを判定。例えばvalueが"付与する"だったら[1]になる。
    で、その0番目の要素である、Number(1)が得られる。

    処理を全体として見ると、valueで表現される文字列をフラグである値に変換している処理。フラグが数値じゃなくても汎用的に使える構文になっている。

    キャンセル

  • 2019/03/01 21:43

    ありがとうございます、非常に勉強になりました!
    「フラグが数値じゃなくても汎用的に使える構文になっている」
    のフラグの部分というのは、
    ----------------------------------
    c.IS_HEADER_LABEL = {
    1: '付与する',
    0: '付与しない',
    };
    ----------------------------------
    の'1'や'0'の部分を指し、これらが必ずしも数字である必要はないような
    設計になっているという認識ですよね!

    キャンセル

  • 2019/03/04 10:21

    そうです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.60%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る