Tự học javascript - Trường hợp nào sử dụng map, filter, reduce trong javascript

Nội dung bài viết

Trong javascript rất có nhiều phương thức giúp chúng ta xử lý trong dự án của mỗi cá nhân như reduce javascript, filter javascript,  map javascript. Nhưng tôi chắc rằng có nhiều bạn thật sự chưa biết or chưa hiểu về cách sử dụng cũng như áp dụng làm sao cho triệt để những phương thức của javascript.

Có rất nhiều trường hợp hay nhiều bài toán được làm nhiều phương pháp nhưng cùng một kết quả. Điều đó tuỳ thuộc vào kỹ năng của mỗi người và kèm theo đó là kiến thức áp dụng của mỗi người. Trong bài này tôi sẽ giới thiệu về 3 phương thức khá là quan trọng và được giới thiệu rất nhiều trên google và sẽ có một ví dụ cụ thể, để chúng ta xem xét mỗi phương án sẽ đem lại được gì? Về khía cạnh nó rất basic thôi.

Chúng tôi đã có bài viết nâng cao về việc Map, filter and reduce với async/await. Các bạn có thể sử dụng kiến thức hạinaox hơn. 


Reduce javascript 

Reduce được giới thiệu nhiều nhất, bởi vì method này gây rất nhiều hiểu lầm và khó nhiểu nhất so với map() và filter(). Chính vì thế, tipjs có 2 bài phân tích về Method Reduce này đó là bài "Phân tích cú pháp reduce javascript" và bài "Tìm hiểu sâu về Reduce method và ví dụ". Hy vọng, bạn sẽ ghé qua và tìm hiểu thêm về

method này.

-- Tìm tổng của array thì dùng reduce javascript.

var numbers = [1,2,3,4,5];
var initialVal = 0;
let result=numbers.reduce((accu, val) => val + accu , initialVal);
console.log(result) // 15

Hoặc chúng ta có thể sử dụng reduce() để tạo một array từ một object như ví dụ dưới đây

var names = ["ram", "raj"];
 var result = names.reduce( (acc, name) => {
   
      let obj = {
            name,
            len : name.length
       }
       acc.push(obj);
      
      return acc;
}, []);

result;

[
  {
    "name": "ram",
    "len": 3
  },
  {
    "name": "raj",
    "len": 3
  }
]

Map javascript

Sử dụng map() để thực hiện một chức năng trên mỗi phần tử của một mảng như ví dụ dưới đây.

var numbers= [1,2,3,4,5];
var doubled  = numbers.map(n => n * 2);
doubled; // [2,4,6,8,10]

Notes: Khi nào sử dụng map(): Nếu chúng ta muốn thực hiện cùng một thao tác / chuyển đổi trên từng phần tử của mảng và lấy lại một array mới có cùng length với các value được chuyển đổi, như ví dụ trên.

Filter javascript

Sử dụng filter() khi chúng ta muốn xóa các mục không thỏa mãn điều kiện. Đọc thêm về cú pháp filter javascript và những điều lưu ý khi sử dụng

var numbers = [1,2,3,4,5];
var greaterThan2 = numbers.filter(n => n > 2);
greaterThan2; // [3,4,5]

Mỗi phần tử của mảng được truyền cho hàm callback. Trên mỗi lần lặp, nếu cuộc callback trả về true, thì phần tử đó sẽ được thêm vào mảng mới, nếu không, nó không được thêm vào mảng mới.

Có thể bạn đã bị miss