filter

ArrayはArray Classの例です.したがって,Array Classで定義した手法を利用することができる.主人はArrayの助けでOOPとFRPの基礎を学びたいと思っています.

filter

let heroes = [{ name: 'superman', type: 'Flying', cost: 400 }, 
              { name: 'batman', type: 'Flying', cost: 320 }, 
              { name: 'X-man', type: 'Mutant', cost: 200 }, 
              { name: 'Ironman', type: 'Metal', cost: 530 },  
              { name: 'Antman', type: 'Insect', cost: 180 }];

// Filtering Heroes
let filterHeroes = [];  


// Impelative
for(let i = 0; i < heroes.length; i++) {
  if(heroes[i].type === 'Flying' && heroes[i].cost > 300) {
   	filterHeroes.push(heroes[i]); 
  }
}
// Declarative
filterHeroes = heroes.filter(function(hero) {
	return hero.type === 'Flying' && hero.cost > 300;
});

上記の例のようにfilterもforeachやmapのような感じがしますが、機能は少し違います.
しかし、例から分かるように、filterメソッドは非常に役立ち、簡潔なコードを書くのに役立ちます.
上記の例は、3つのキー値しかない簡単な例ですが、将来のWeb例やアプリケーションプロジェクトでは、100以上のキー値をフィルタする必要がある場合があります.この場合,フィルタにより所望の形状,加工データを簡単に抽出できる.

フィルタ練習

最初の練習問題

// 1. Filter numbers larger than 50.
let numbers = [15, 25, 35, 45, 55, 65, 75, 85, 95];

let filteredNumbers;

// 2. filter users having admin right.
let users = [
    { id: 1, admin: true },
    { id: 2, admin: false },
    { id: 3, admin: false },
    { id: 4, admin: false },
    { id: 5, admin: true },
];

let filteredUsers;

// 1. Filter numbers larger than 50.
filteredNumbers = numbers.filter(el => el > 50);

// 2. filter users having admin right.
filteredUsers = users.filter(el => el.admin === true);

2番目の練習問題
上記の例と練習問題は、フィルタリングを1つの変数として適用しただけです.filterを使用して、より多くの機能を実現できます.

let heroes = [
    { id: 1, name: 'superman', type: 'Flying', cost: 400 },
    { id: 2, name: 'batman', type: 'Flying', cost: 320 },
    { id: 3, name: 'X-man', type: 'Mutant', cost: 200 },
    { id: 4, name: 'Ironman', type: 'Metal', cost: 530 },
    { id: 5, name: 'Antman', type: 'Insect', cost: 180 },
];

let comments = [
    { idOfWriter: 1, content: '아름다운 우리 나라' },
    { idOfWriter: 2, content: '아름다운 박쥐 나라' },
    { idOfWriter: 1, content: '아름다운 크립톤' },
    { idOfWriter: 3, content: '아름다운 장미 한송이' },
    { idOfWriter: 5, content: '아름다운 제주도 밤바다' },
    { idOfWriter: 4, content: '아름다운 제주도 한라산' },
    { idOfWriter: 4, content: '아름다운 올레길' },
    { idOfWriter: 2, content: '아름다운 돌담길' },
];

// 슈퍼맨이 적은 댓글만 뽑아내시오.
let supermanComment;

上の例を見ると英雄と評論があります.この2つのデータは、それぞれデータベースのストレージ領域に格納されます.このような場合、スーパーマンがわずかなコメントしか書かない場合は、どうすればいいのでしょうか.
(上記の例では、ヒーローとidOfWriterのIDが同じであると仮定しています.)

function commentPerWriter(comments, id) {
    let sorted = comments.filter(comment => comment.idOfWriter === id);
    return sorted;
}

console.log(commentPerWriter(comments, 1));

もっと複雑な条件のフィルタリングを練習します.上記の場合は,スーパーマンのIDを入れる場合,条件に応じてコメントにフィルタリングを行う.
では、ID値ではなく「スーパーマン」を入れるとしたら、どうすればいいのでしょうか.
ヒーローの列の中で「スーパーマン」を探して、彼のID値を探します.
その後、commentsにアイデンティティ値を渡し、フィルタリングの2つのステップを行う論理によって必要なフィルタリングを実現することができる.

function commentPerWriter(comments, name) {
    function searchId(heroes, name) {
        return heroes.filter(function (hero) {
            return hero.name === name;
        });
    }
    let searchedHero = searchId(heroes, name);

    let sorted = comments.filter(comment => comment.idOfWriter === searchedHero[0].id);
    return sorted;
}

console.log(commentPerWriter(comments, 'superman'));

上の論理構造は合理的であるが、より簡潔に体現することができる.これについて、RxJSについての文章を書く際に、再度検討します.
3番目の練習問題

// Example
let numbers = [10, 20, 30];
let lessThanFifteen = reject(numbers, function (number) {
    return number >= 15;
});
console.log(lessThanFifteen); // [10];

// Implement reject();
function reject(array, iteratorFunction) {}

上記の例は、拒否とは逆の結果値を返す関数を実装する問題です.
lessThanFifteenこの変数は15未満の数値を返さなければならないが、拒否関数がパラメータに渡されると、彼の逆条件を適用して返さなければならない.

// Implement reject();
function reject(array, iteratorFunction) {
    return array.filter(item => !iteratorFunction(item));
}

あるいはforeachを用いて実装することもできる.

function reject(array, iteratorFunction) {
    let results = [];
    array.forEach(function (el) {
        if (!iteratorFunction(el)) results.push(el);
    });
    return results;
}