Hướng dẫn javascript reduce use case - javascript giảm trường hợp sử dụng

Giới thiệu về mảng JavaScript giảm () và các trường hợp sử dụng của nó.

Ảnh của Joshua Aragon trên unplash

Phương thức giảm () thực thi hàm giảm (mà bạn cung cấp) trên mỗi phần tử của mảng, dẫn đến giá trị đầu ra đơn. nguồn

Phương thức reduce() làm giảm tất cả các phần tử trong một mảng thành một giá trị đầu ra duy nhất. Giá trị đầu ra có thể là một số, đối tượng hoặc chuỗi. Phương pháp reduce() có hai đối số. Cái đầu tiên là hàm gọi lại và hàm thứ hai là giá trị ban đầu.callback function and the second one is the initial value.

Chức năng gọi lại

Hàm gọi lại được thực thi trên mỗi phần tử của mảng. Giá trị trả về của hàm gọi lại được tích lũy kết quả và được cung cấp như một đối số trong lệnh gọi tiếp theo đến hàm gọi lại. Hàm gọi lại có bốn đối số.

Accumulator Tích lũy tích lũy giá trị trả về của hàm gọi lại.
The accumulator accumulates return value of the callback function.

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

0 Phần tử hiện tại của mảng được xử lý.
The current element of the array is processed.

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

1 Chỉ số của phần tử hiện tại của mảng được xử lý.
The index of the current element of the array is processed.

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

2 ARRAY

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

3 đã được yêu cầu.
The array

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

3 was called upon.

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

4and

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

5are tùy chọn.

Giá trị ban đầu

Nếu giá trị ban đầu được chỉ định, bộ tích lũy được đặt

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

6 làm phần tử ban đầu. Mặt khác, bộ tích lũy được đặt là phần tử đầu tiên của mảng là phần tử ban đầu.

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

Trong đoạn mã dưới đây, đầu tiên

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7 được gán giá trị ban đầu 0.

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

8 là phần tử của mảng

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

9 đang được xử lý. Ở đây,

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

8 được thêm vào

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7. Giá trị trả về được cung cấp dưới dạng đối số trong cuộc gọi tiếp theo cho chức năng gọi lại.

Hình 1. (Mảng sốRAr giảm xuống tổng giá trị đơn)

Output:

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

Sử dụng các trường hợp cho JavaScript giảm

1. Tổng tất cả các giá trị của một mảng

Trong mã dưới đây,

354

2Array có 5 số. Sử dụng mảng phương thức reduce() được giảm xuống một giá trị duy nhất mà tổng của tất cả các giá trị của mảng

354

4 và kết quả được gán cho

354

5.

Hình 2. (tổng tất cả các giá trị của mảng StudentResult)

Output:

354

2. Tổng giá trị trong một mảng đối tượng

Nói chung, chúng tôi đang tìm nạp dữ liệu từ phần cuối dưới dạng mảng đối tượng. Do đó, phương pháp reduce() giúp quản lý logic phía trước của chúng tôi. Trong mã dưới đây, mảng đối tượng

354

4 có ba đối tượng với điểm của chúng là đối tượng. Ở đây,

354

8 lấy dấu của mỗi đối tượng trong mảng đối tượng

354

4.

Hình 3. (tổng của các điểm trong mảng đối tượng StudentResult)

Output:

251

3. Làm phẳng một mảng mảng

Vượt qua một mảng có nghĩa là sự biến đổi của mảng đa chiều thành một chiều. Trong mã dưới đây, mảng

251

02D được chuyển thành mảng một chiều

251

1. Ở đây, mảng [1,2] đầu tiên được gán cho

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7 và sau đó mỗi phần còn lại của các yếu tố của

251

0array được nối với

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7.

Hình 4. (Làm phẳng mảng twodarr)

Output:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

4. Nhóm đối tượng bởi một tài sản

Dựa trên các thuộc tính của một đối tượng, chúng ta có thể nhóm mảng đối tượng thành một số nhóm bằng phương pháp reduce(). Bạn có thể hiểu rõ ý tưởng với đoạn mã dưới đây. Ở đây,

251

6 Mảng đối tượng có năm đối tượng mà mỗi đối tượng có thuộc tính

251

7 và

251

8. Đối tượng được thông qua nếu các dấu hiệu lớn hơn hoặc bằng 50. Nếu không thì đối tượng không thành công. reduce() được sử dụng để nhóm kết quả vào đường chuyền và thất bại. Đầu tiên

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

6 được gán cho bộ tích lũy, sau đó phương thức

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

1 thêm đối tượng

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

2 vào các thuộc tính

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

3 và

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

4 làm mảng đối tượng sau khi kiểm tra điều kiện.

Hình 5. (Nhóm đối tượng theo tài sản)

Output:

{
 pass: [
  { subject: ‘Chemistry’, marks: 59 },
  { subject: ‘Applied Maths’, marks: 90 },
  { subject: ‘English’, marks: 64 }
 ],
 fail: [
  { subject: ‘Physics’, marks: 41 },
  { subject: ‘Pure Maths’, marks: 36 }
 ]
}

5. Loại bỏ các bản sao trong một mảng

Trong đoạn mã dưới đây, các bản sao trong mảng

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

5 được loại bỏ. Đầu tiên, một mảng trống được gán cho

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7 dưới dạng giá trị ban đầu.

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

7 Kiểm tra xem mỗi phần tử của mảng

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

5 đã có sẵn trong

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7. Nếu

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

8 không có sẵn trong

accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354

7, nó sẽ được thêm vào bằng cách sử dụng

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

1.

Hình 6. (Xóa các bản sao trong mảng sao chép)

Output:

[ 1, 5, 6, 7, 8, 9 ]

Sự kết luận

Trong bài viết này, chúng tôi thảo luận về phương thức giảm mảng (). Đầu tiên, phương thức ____ 7 được giới thiệu. Sau đó, hành vi của nó được thảo luận bằng một ví dụ đơn giản. Cuối cùng, năm trường hợp sử dụng phổ biến nhất của phương pháp reduce() được thảo luận với các ví dụ. Nếu bạn là người mới bắt đầu với JavaScript, bài viết này sẽ hữu ích cho bạn.

Tài liệu tham khảo