1. ホーム
  2. javascript

オブジェクトのプロパティ値を返すためにフィルタを使用する

2023-10-22 13:30:50

質問

forやwhileループ、foreach関数ではなく、filterを使用して、オブジェクトの配列をループして、そのプロパティ値を返す関数を作ろうとしています。例えば、次のようなものです。

function getShortMessages(messages) {
    return messages.filter(function(obj){
        return obj.message
    });
}

ということで、もし私が

getShortMessages([{message:"bleh"},{message:"blah"}]); 

配列 = ["bleh","blah"] が返ってくるはずなのですが。 ただ、このガイドラインでfilterをどのように実装すればいいのかがわかりません。また、私は.mapのようなチェーン関数を使用することを考えていました。

////以下はコードチャレンジの仕様です/////。

基本:フィルタ 練習問題4/18

タスク

Array#filterを使って、getShortMessagesという関数を書きなさい。

getShortMessagesは'.message'プロパティを持つオブジェクトの配列を受け取り、長さが< 50文字未満のメッセージの配列を返します。

この関数は、メッセージそのものを含む配列を返すべきであり、それらを含むオブジェクトは含まれません。

引数

  • messages: 以下のような10~100個のランダムなオブジェクトのArray。
{
    message: 'Esse id amet quis eu esse aute officia ipsum.' // random
}

条件

  • for/whileループやArray#forEachは一切使用しない。
  • ヘルパーなどの不要な関数を作らない。

ヒント

  • Arrayのメソッドを連結してみましょう。

[ 'Tempor quis esse consequat sunt ea eiusmod.',
  'Id culpa ad proident ad nulla laborum incididunt.',
  'Ullamco in ea et ad anim anim ullamco est.',
  'Est ut irure irure nisi.' ]

リソース

ボイラープレート

function getShortMessages(messages) {
  // SOLUTION GOES HERE
}

module.exports = getShortMessages

" これらの指示を再度印刷するには、次のように実行します。 Functional-javascript print " テスト環境でプログラムを実行するには、次のコマンドを実行します。 " プログラムを検証するには、次のコマンドを実行します。 " ヘルプを見るには次のように実行します。

どのように解決するのですか?

使用方法 .filter は、指定されたプロパティにマッチするオブジェクト全体を取得したい場合に使用します。使用方法 .map を使用します。これは、オブジェクトの配列があり、それに対して何らかの処理を行い、その結果を取得したい場合です。

課題は、50文字以下のメッセージをすべて取得することです。そこで filter を使ってそのテストに合格したメッセージだけを取得し、次に map でメッセージのテキストのみを取得します。

function getShortMessages(messages) {
  return messages
    .filter(function(obj) {
      return obj.message.length <= 50;
    })
    .map(function(obj) {
      return obj.message;
    });
}

JSFiddleです。 http://jsfiddle.net/rbbk65sq/

もし、入力オブジェクトに message プロパティを持たない可能性がある場合、それをテストするために obj.message && obj.message.length <= 50 のようにします。

function getShortMessages(messages) {
  return messages
    .filter(function(obj) {
      return obj.message && obj.message.length <= 50;
    })
    .map(function(obj) {
      return obj.message;
    });
}

ES6

ES6での同じコードサンプルです。

const getShortMessages = (messages) => messages
  .filter(obj => obj.message.length <= 50)
  .map(obj => obj.message);

また、入力オブジェクトが message プロパティを持っていないかもしれません。

const getShortMessages = (messages) => messages
  .filter(obj => obj.message && obj.message.length <= 50)
  .map(obj => obj.message);

JSFiddleです。 http://jsfiddle.net/npfsrwjq/