JavaScript-ում filter() մեթոդը

filter() մեթոդը JavaScript-ի շատ կարևոր մեթոդներից մեկն է, որն օգտագործվում է՝ զանգվածից ընտրելու միայն այն տարրերը, որոնք բավարարում են որոշակի պայման։ Այս մեթոդը թույլ է տալիս հեշտությամբ ստանալ նոր զանգված, որը պարունակում է միայն համապատասխան տարրերը, առանց փոփոխելու բնօրինակ զանգվածը։

Այս հոդվածում մենք կսովորենք՝

• Ինչ է filter() մեթոդը
• Ինչպես է աշխատում
• Ինչ է վերադարձնում
• Ինչպես տարբեր է map()-ից
• Ինչպես գրել filter-ը զրոյից

---

Սինտաքս

    array.filter(function(element, index, array) {
      // եթե պայմանը ճիշտ է, տարրը կմնա նոր զանգվածում
      return condition;
    });

Պարամետրեր

• element – ընթացիկ տարրը
• index – ընթացիկ ինդեքսը
• array – ամբողջ զանգվածը

Վերադարձվող արժեքը

Նոր զանգված, որը պարունակում է միայն այն տարրերը, որոնք վերադարձնում են true։

---

Պարզ օրինակ

    const numbers = [1, 2, 3, 4, 5, 6];

    const evenNumbers = numbers.filter(function(num) {
      return num % 2 === 0;
    });
    
    console.log(evenNumbers); // [2, 4, 6]

Մեկնաբանությունը պարզ է՝ այս դեպքում մենք վերցրեցինք միայն այն տարրերը, որոնք պատկանում են զույգ թվերի կատեգորիան։

---

Տարբերությունը map()-ից

• map()-ը վերադարձնում է նոր զանգված, որը բաղկացած է այն արժեքներից, որոնք ստացել ենք callback-ի միջոցով։
• filter()-ը վերադարձնում է նոր զանգված, որը պարունակում է միայն այն տարրերը, որոնք համապատասխանեցին որոշակի պայմանին։

    const nums = [1, 2, 3, 4, 5, 6];

    const doubled = nums.map(n => n * 2);      // map() - կրկնապատկում ենք տարրը
    const evens = nums.filter(n => n % 2 === 0); // filter() - ընտրում ենք միայն զույգ թվերը
    
    console.log(doubled); // [2, 4, 6, 8, 10, 12]
    console.log(evens);   // [2, 4, 6]

map-ը վերափոխում է բոլոր տարրերը, իսկ filter-ը ընտրում է միայն համապատասխանները։

---

Կարևոր հատկություններ

• Վերադարձնում է նոր զանգված՝ սկզբնական զանգվածը չփոխելով։
• Եթե ոչ մի տարր չի համապատասխանում պայմանին, ապա վերադարձվում է դատարկ զանգված՝ []։
• Կարելի է օգտագործել ավելի բարդ պայմաններ՝ ինչպես առանձին, այնպես էլ կոմբինացված։

---

Իրական կիրառման օրինակ

Օրինակ՝ իմ բլոգում ունեմ մի շարք էջերի պարբերությունները, և ուզում եմ ստանալ միայն վերջին չհեռացված էջերը:

    const pages = [
      { id: 1, title: 'Home', isDeleted: false },
      { id: 2, title: 'About', isDeleted: true },
      { id: 3, title: 'Contact', isDeleted: false },
      { id: 4, title: 'Blog', isDeleted: false }
    ];
    
    const activePages = pages.filter(page => !page.isDeleted);
    console.log(activePages);

Արդյունք:

    [
      { id: 1, title: 'Home', isDeleted: false },
      { id: 3, title: 'Contact', isDeleted: false },
      { id: 4, title: 'Blog', isDeleted: false }
    ]

---

Ինչպես է աշխատում filter() մեթոդը ներքուստ

filter-ը մեթոդ է, որը կապված է Array.prototype-ին։

Երբ գրում ենք՝

    [1, 2, 3, 4].filter(fn);

Սա նույնն է ինչ՝

    Array.prototype.filter.call([1, 2, 3, 4], fn);

---

Գրենք մեր սեփական myFilter() ֆունկցիան

    function myFilter(array, callback) {
      const result = [];
    
      for (let i = 0; i < array.length; i++) {
        if (callback(array[i], i, array)) {
          result.push(array[i]);
        }
      }
    
      return result;
    }

Օգտագործում ենք այսպես՝

    const nums = [1, 2, 3, 4, 5, 6];

    const evenNumbers = myFilter(nums, function(num) {
      return num % 2 === 0;
    });
    
    console.log(evenNumbers); // [2, 4, 6]

---

Կարող ենք ավելացնել զանգվածի վրա (ուսումնական նպատակով)

    Array.prototype.myFilter = function(callback) {
      const result = [];
    
      for (let i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
          result.push(this[i]);
        }
      }
    
      return result;
    };

Օգտագործում ենք՝

    const evenNumbers = [1, 2, 3, 4, 5, 6].myFilter(n => n % 2 === 0);
    console.log(evenNumbers); // [2, 4, 6]

Հիշեցում․ Զերծ մնացեք պրոտոտիպների փոփոխությունից պրոդաքշն միջավայրում։