.map (), .filter () và .reduce () trong JavaScript

Nếu bạn là một nhà phát triển JavaScript hoặc mới bắt đầu với JavaScript, Bạn đã từng nghe nói về map (), filter () và Reduce () ở đâu đó. Đôi khi những người mới làm quen với các chức năng này cảm thấy bối rối không biết chính xác thì những chức năng này làm gì và sử dụng chúng như thế nào? Chúng ta hãy thảo luận về nó trong bài viết này dưới đây từng cái một.

.bản đồ()

.map () được sử dụng để biến đổi một mảng. Chuyển đổi có nghĩa là giả sử bạn có một mảng chứa một số số và bạn cần tìm nhân đôi của mỗi số hoặc bộ ba của mỗi số, Vì vậy, bạn muốn biến đổi nó bằng một số logic chuyển đổi và tạo ra một mảng mới.

const arr = [2, 4, 5, 6, 8]
//  double arr = [4, 8, 10, 12, 16]
//  triple arr = [8, 12, 15, 18, 24]

let array = [1, 2, 3, 4, 5, 6]
function double(x){
return x * 2;
}
const result = array.map(double); // take callback function
//   Or with arrow function
const result = array.map(x => x * 2);
console.log(result);        // will print an array with double

Phương thức .filter () được sử dụng để lọc một mảng. Nó sẽ lọc một mảng dựa trên một số logic và sẽ trả về cho bạn một mảng có giá trị đã lọc. Ví dụ, bạn có một mảng và muốn tìm hiểu những phần tử nào lớn hơn một số cụ thể? Hãy thử nó ra.

let arr = [2, 8, 3, 4, 5, 6]
function greaterThan3(x){
return x > 3;
}
const result = arr.filter(greaterThan3); // take callback function
//   or with arrow function
const result = arr.filter(x => x > 3);
console.log(result);

Phương thức .reduce () được sử dụng ở nơi bạn cần lấy tất cả phần tử của một mảng và đưa ra một giá trị duy nhất từ ​​nó. Ví dụ, giả sử chúng ta có một mảng và chúng ta cần tìm tổng của nó hoặc tối đa của nó.

let arr = [1, 5, 6, 8, 9, 3]
// sum, maximum

// Sum with non functional way
let arr = [2, 8, 3, 4, 5, 6];
function findSum(){
 let sum = 0;
  for(let i = 0; i < arr.length; i++){
   sum = sum + arr[i];
   }
  return sum;
 }
console.log(findSum());

arr.reduce(function(acc, curr){ // first parameter
// it will iterate over each element of array and this current(curr) with refer to current element of this array.
// Accumulator(acc) will accumulate the result for elements of the array.
},0) // second parameter
 it represents the initial value for the accumulator

let arr = [1, 2, 3, 4, 5, 6]
const result = arr.reduce(function(acc, curr){
   acc = acc + curr;
   return acc;
});
console.log(result);

Đây là cách đơn giản nhất để sử dụng .map (), .filter () và .reduce (). Nếu bạn thay thế vòng lặp for bằng các phương thức này, nơi nó phù hợp. Nó sẽ giúp bạn rất nhiều để làm cho bạn viết mã sạch hơn và dễ đọc hơn.

Chúc bạn viết mã vui vẻ!