JavaScript Mảng giảm và giảm Quyền: Giảm Mảng thành một giá trị – giảm mảng trong javascript

Bảng sau minh họa logic khi phương thức Reduce () thực thi hàm callbackFn () lần đầu tiên theo initialValue a rgument:

initialValue beforeValue currentValue đã chuyển initialValue mảng [0] không được truyền array [0]

array [1]

Ví dụ sau cho thấy tiến trình của hàm Reduce () với một initialValue as 100:

 
  
 let 
 number = [
 1 
, 
 2 
, 
 3 
];

 
 function 
 
 getOrdinalSuffix 
 (
 tôi 
) 
 {
  
 let 
 j = i% 
 10 
, k = i% 
 100 
;
  
 if 
 (j == 
 1 
 & amp; & amp; k! = 
 11 
) 
 return 
 i + 
 'st' 
;
  
 if 
 (j == 
 2 
 & amp; & amp; k! = 
 12 
) 
 return 
 i + 
 'nd' 
;
  
 if 
 (j == 
 3 
 & amp; & amp; k! = 
 13 
) 
 return 
 i + 
 'rd' 
;
  
 return 
 i + 
 'th' 
;
}

 let 
 call = 
 1 
;
 let 
 sum = number.reduce (
 
 function 
 (
 beforeValue, currentValue, currentIndex, mảng 
) 
 {
    
 let 
 result = beforeValue + currentValue;

     
    
 console 
 .log (
 `
 $ {getOrdinalSuffix (call)} 
 gọi` 
);
    gọi ++;

     
    
 console 
 .table ({beforeValue, currentValue, currentIndex, result});

    
 trả về kết quả 
;
}, 
 100 
);

 console 
 .log (
 `Kết quả: 
 $ {sum} 
` 
);  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Kết quả:

 
 Cuộc gọi đầu tiên
┌────────────────┬─────────┐
│ (chỉ số) │ Giá trị │
├────────────────┼─────────┤
│ trước Giá trị │ 100 │
│ currentValue │ 1 │
│ currentIndex │ 0 │
│ kết quả │ 101 │
└────────────────┴─────────┘
Cuộc gọi thứ 2
┌────────────────┬─────────┐
│ (chỉ số) │ Giá trị │
├────────────────┼─────────┤
│ trước Giá trị │ 101 │
│ currentValue │ 2 │
│ currentIndex │ 1 │
│ kết quả │ 103 │
└────────────────┴─────────┘
Cuộc gọi thứ 3
┌────────────────┬─────────┐
│ (chỉ số) │ Giá trị │
├────────────────┼─────────┤
│ trước Giá trị │ 103 │
│ currentValue │ 3 │
│ currentIndex │ 2 │
│ kết quả │ 106 │
└────────────────┴─────────┘
Kết quả: 106  
 
 Ngôn ngữ mã: 
 
 plaintext 
 
 (
 
 plaintext 
 
) 
 

Và phần sau minh họa Phương thức Reduce () không có đối số initialValue :

 
  cuộc gọi đầu tiên
┌────────────────┬─────────┐
│ (chỉ số) │ Giá trị │
├────────────────┼─────────┤
│ trước Giá trị │ 1 │
│ currentValue │ 2 │
│ currentIndex │ 1 │
│ kết quả │ 3 │
└────────────────┴─────────┘
Cuộc gọi thứ 2
┌────────────────┬─────────┐
│ (chỉ số) │ Giá trị │
├────────────────┼─────────┤
│ trước Giá trị │ 3 │
│ currentValue │ 3 │
│ currentIndex │ 2 │
│ kết quả │ 6 │
└────────────────┴─────────┘
Kết quả: 6  
 
 Ngôn ngữ mã: 
 
 plaintext 
 
 (
 
 plaintext 
 
) 
 

Thêm mảng JavaScript giảm ( ) ví dụ

Giả sử bạn có mảng đối tượng sản phẩm shoppingCart sau:

 
  
 let 
 shoppingCart = [
  {
    
 product 
: 
 'phone' 
,
    
 qty 
: 
 1 
,
    
 price 
: 
 500 
,
  },
  {
    
 product 
: 
 'Screen Protector' 
,
    
 qty 
: 
 1 
,
    
 price 
: 
 10 
,
  },
  {
    
 product 
: 
 'Thẻ nhớ' 
,
    
 qty 
: 
 2 
,
    
 price 
: 
 20 
,
  },
];  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Để tính tổng số tiền sản phẩm trong giỏ hàng, bạn có thể sử dụng phương thức Reduce () , như sau:

 
  
 let 
 total = shoppingCart.reduce (
 
 function  (
 beforeValue, currentValue 
) 
 {
  
 return 
 beforeValue + currentValue.qty * currentValue.price;
}, 
 0 
);  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 

Đầu ra:

 
  550  
 < / pre> 
 Lưu ý rằng trong ví dụ này, chúng tôi đã chuyển đối số  initialValue  vào phương thức  Reduce () . 
 
 Nếu chúng tôi không làm như vậy ' Nếu không, phương thức  Reduce ()  sẽ lấy phần tử đầu tiên của mảng  shoppingCart , là một đối tượng, làm giá trị ban đầu và thực hiện phép tính trên đối tượng này. Do đó, nó sẽ gây ra kết quả không chính xác. 
 
 Phương thức JavaScript Array ReduceRight () 
 
 Phương thức  ReduceRight ()  hoạt động giống như phương thức  Reduce () , nhưng theo hướng ngược lại. 
 
 Phương thức  Reduce ()  bắt đầu từ phần tử đầu tiên và đi về phía cuối cùng, trong khi  ReduceRight ()  bắt đầu ở phần tử cuối cùng và lùi lại phần tử đầu tiên. 
 
 Xem ví dụ sau: 
 
 
  
 let 
 number = [
 1 
, 
 2 
, 
 3 
];

 let 
 sum = number.reduceRight (
 
 function 
 (
 beforeValue, currentValue 
) 
 {
 console 
 .log ({beforeValue, currentValue});
  
 return 
 beforeValue + currentValue;
});

 console 
 .log (
 `Kết quả: 
 $ {sum} 
` 
);  
 
 Ngôn ngữ mã: 
 
 JavaScript 
 
 (
 
 javascript 
 
) 
 
 Kết quả < / p> 
 
  {
 beforeValue 
: 
 3 
, currentValue: 
 2 
}
{
 beforeValue 
: 
 5 
, currentValue: 
 1 
 }
 Kết quả 
 
: 6 
  
 
 Ngôn ngữ mã: 
 
 CSS 
 
 (
 
 css 
 
) 
 
 Hình ảnh sau minh họa sự khác biệt giữa  Reduce ()  và  ReduceRight ()  các phương thức: 
 Trong hướng dẫn này, bạn đã học cách sử dụng phương thức mảng JavaScript  Reduce ()  và  ReduceRight ()  để giảm một mảng thành một giá trị. 
 Hướng dẫn này có hữu ích không?