#前提・実現したいこと
- まず興味をもって開いていただきましてありがとう
- 自分はプログラム初心者というより素人です
- JavaScriptというより簡単な記述でDOM操作ができたJQueryのおかげでこの分野に興味をもった人間です。今まではWebの読み手側でした
- 変数sampledataにオブジェクトが連続で規則正しく入った配列があります(最下部参照)。
例えば「 日本人 且つ 女性 且つ 二十歳未満」にすべて合致するオブジェクトを抽出・フィルタリングしたいのですが、
これをどうにかこうにかして以下のようなメソッドチェーンライクな記述法で、オリジナルの配列から条件フィルタリングして新たな配列を作成し返り値にしたいのです。
JavaScript
1var sampledata = [{略},{略},{略},,,]; 2var newarray = sampledata.kokusekiis("Japanese").seibetsuis("female").nenreiislower(20);
JavaScript
1var sampledata = [{略},{略},{略},,,]; 2var newarray = sampledata.itchi("nationality","Japanese").itchi("sex","female").miman("age",20);
- どうしてこうしたいかというと自分が何度も絞り込みをやるからと、
自分以外の人のページ視聴者にもF12から簡単に絞り込み作業をコマンド風にやってみてほしいからです
- JQueryも好きなのでJQueryを使ったものと、依存しないネイティブなものの2パターン実現可能なのでしょうか?
できれば勉強のために2パターンあれば教えてもらえると助かります。
- もうすでにこの世にこれを実現できるプラグインが存在してるよって場合は教えていただけるとすごく助かります。
- もし土俵にもたってないちんぷんかんぷんな質問になってましたら、正直に叱ってもらって構いません。
#自力で試したこと
まだつまみ食いレベルの自分で思いついたのは以下の2つの方法なんですが、 再利用しにくかったり、
関数の引数にその前の関数での戻り値を入れたり、 読みにくいです
その1) 単発ならこれでいいのだけど・・・使い回しが効かない上に、視聴者はこんなの書けない
JavaScript
1var japanesefemale1 = sampledata.filter(function(input) { 2 if (input["nationality"] === "Japanese" && input["sex"] === "female" && input["age"] < 20) { 3 return true 4 } 5}); 6console.log(japanesefemale1); //ちゃんと思い通りにフィルタリングした新たな配列が入っている
その2) 予め関数作成し、繰り返して絞り込む
JavaScript
1function itchi(input, key, value) { 2 return input.filter(function(input) { 3 if (input[key] === value) { 4 return true 5 } 6 }); 7} 8function miman(input, key, value) { 9 return input.filter(function(input) { 10 if (input[key] < value) { 11 return true 12 } 13 }); 14} 15var japanesefemale2 = miman(itchi(itchi(sampledata, "nationality", "Japanese"), "sex", "female"),"age", 20);// 16console.log(japanesefemale2); //ちゃんと思い通りにフィルタリングした新たな配列が入っている
その3)JQuery 拡張メソッドをネット上の資料をもとに見よう見まねで作ってみた
なお、鎖のようにメソッドチェーンさせるにはJQueryオブジェクトの状態で都度返さないとチェーンが途切れることはネット上の資料を読んで学びました。
JavaScript
1(function($) { 2 $.fn.extend({ 3 hitoshii: function(key, value) { //失敗。これを使っても空っぽの配列しか返ってこない 4 return (this.filter(function(item, index, input) { 5 if (item[key] === value) return true 6 })); 7 }, 8 getfirst: function() { //成功。思い通りの結果が返ってきた 9 return this[0]; 10 }, 11 getlast: function() { //成功。思い通りの結果が返ってきた 12 return this[this.length - 1]; 13 }, 14 getvar: function(num) { //成功。思い通りの結果が返ってきた 15 if (0 <= num && num < this.length) return this[num]; 16 } 17 }); 18})(jQuery);
JavaScript
1$(sampledata).hitoshii("nationality", "Japanese"); //失敗。空っぽの配列[]が返ってきた 2$(sampledata).getfirst(); //成功。 3$(sampledata).getlast(); //成功。 4$(sampledata).getvar(3); //成功。
#最後に
- Webkit系ブラウザのデベロッパーツールのコンソールで操作
- JQueryのバージョンは3.1.1を使用
最後までお読み頂きありがとうございました
JavaScript
1var sampledata = [{ 2 "age": 21, 3 "sex": "male", 4 "id": 1001, 5 "single": true, 6 "nationality": "Japanese" 7}, { 8 "age": 10, 9 "sex": "female", 10 "id": 1002, 11 "single": true, 12 "nationality": "Japanese" 13}, { 14 "age": 18, 15 "sex": "male", 16 "id": 1003, 17 "single": true, 18 "nationality": "Chinese" 19}, { 20 "age": 23, 21 "sex": "female", 22 "id": 1004, 23 "single": true, 24 "nationality": "Japanese" 25}, { 26 "age": 15, 27 "sex": "male", 28 "id": 1005, 29 "single": true, 30 "nationality": "Japanese" 31}, { 32 "age": 29, 33 "sex": "female", 34 "id": 1006, 35 "single": false, 36 "nationality": "Chinese" 37}, { 38 "age": 36, 39 "sex": "female", 40 "id": 1007, 41 "single": false, 42 "nationality": "Korean" 43}]; 44
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/28 17:28
2017/07/28 17:33