オブジェクトのプロパティ値を返すためにフィルタを使用する
質問
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.' ]
リソース
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
ボイラープレート
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/
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み] モバイルWeb HTML5フレームワークの選び方【終了しました
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] 兄弟ノードを選択する方法はありますか?
-
[解決済み] 無効になっている入力フィールドの値を送信する
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ