Có rất nhiều cách để tiếp cận vấn đề này, nhưng hãy để nó đơn giản vì mục đích minh họa. Như chúng ta đã biết, Array.prototype.reduce
là một phương pháp hữu ích để giảm các tập dữ liệu thành các giá trị có ý nghĩa. Một điều không rõ ràng là bạn cũng có thể giảm mảng thành các đối tượng, không chỉ các số. làm sao chúng ta làm việc đó bây giờ?
Mọi người đều biết bạn có thể giảm mảng thành số. Nhưng bạn có biết bạn cũng có thể thu nhỏ chúng thành các đối tượng không?
Đầu tiên, tổng quan nhanh về cách thức hoạt động của reduce
const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
const sum = arr.reduce[[acc, value] => value + acc, 0]
console.log[sum] // 45
Phương thức reduce
nhận hai đối số. một chức năng và một giá trị ban đầu. Hàm sẽ chạy run cho mọi giá trị trong mảng và cũng nhận được hai đối số. bộ tích lũy, hoặc acc
, và value
hiện tại. Trả về của hàm này sau đó được chuyển thành acc
cho lần lặp tiếp theo, cho đến phần tử cuối cùng. Đối với lần lặp đầu tiên, giá trị ban đầu [đối số thứ hai của reduce
] được sử dụng làm bộ tích lũy. Trong trường hợp này, chúng tôi bắt đầu với giá trị 0 và tính tổng từng phần tử của mảng cho đến khi chúng tôi có giá trị 45 ở cuối
Bây giờ hãy giải một bài toán đơn giản. Chúng ta có một mảng các loại trái cây và chúng ta muốn đếm xem có bao nhiêu loại trái cây trong mảng đó
const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
Một cách đơn giản và hiệu quả là lặp lại từng phần tử và lưu số đếm vào một đối tượng. Độ phức tạp là O[N] và nó không thể tốt hơn thế nữa
let total = {}
for [fruit of FRUITS] {
total[fruit] = [total[fruit] || 0] + 1
}
console.log[total] // { banana: 4, apple: 3, orange: 5}
Đoạn mã trên rất đơn giản. nếu tài sản tồn tại, hãy tăng nó lên một và nếu nó không khai báo nó là 0 và sau đó tăng nó lên một [vì chúng tôi không thể làm
const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
1]Tốt như vậy, chúng ta cũng có thể giải quyết vấn đề này bằng JavaScript chức năng. Hãy xem cách sử dụng phương pháp reduce
để đạt được kết quả tương tự
const total = FRUITS.reduce[[map, fruit] => [{
...map,
[fruit]: [map[fruit] || 0] + 1,
}], {}]
console.log[total] // { banana: 4, apple: 3, orange: 5}
Điều này thanh lịch hơn nhiều, chủ yếu là do bạn có thể chuyển đổi kết quả và xâu chuỗi nó sang một phương thức khác, lọc hoặc sửa đổi nó. Hãy phá vỡ những gì đang xảy ra ở đây
Chúng tôi bắt đầu với một đối tượng trống. Điều này sẽ được chuyển dưới dạng bộ tích lũy
const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
3 cho chức năng của chúng tôi trong lần lặp đầu tiênBây giờ chúng tôi sử dụng hai tính năng cú pháp ES6. cú pháp lây lan
const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
4 và các thuộc tính được tính toán const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
5. Tóm lại những gì họ làm là. lây lan sẽ lấp đầy đối tượng với tất cả các thuộc tính hiện tại bên trong đối tượng và cho phép chúng tôi ghi đè lên bất kỳ thuộc tính nào trong số chúng và các thuộc tính được tính toán cho phép chúng tôi sử dụng giá trị của một biến làm khóa thực của đối tượngVì vậy, bây giờ đối với mỗi lần lặp lại, chúng tôi trải bộ tích lũy và tăng giá trị của trái cây trong lần lặp lại hiện tại. Cuối cùng, chúng tôi trả về toàn bộ đối tượng và đạt được kết quả tương tự như phương án thay thế
const FRUITS = ["banana", "apple", "orange", "banana", "orange", "apple", "apple", "orange", "orange", "banana", "orange", "banana"]
6 lặp đi lặp lại, với cùng tốc độ phức tạp ví dụ
Trừ tất cả các số trong một mảng
số const = [175, 50, 25];
tài liệu. getElementById["bản trình diễn"]. InternalHTML = số. giảm [myFunc];
hàm myFunc[tổng, số] {
trả về tổng - số;
}
Làm tròn tất cả các số và hiển thị tổng
số const = [15. 5, 2. 3, 1. 1, 4. 7];
tài liệu. getElementById["bản trình diễn"]. InternalHTML = số. giảm [getSum, 0];
hàm getSum[total, num] {
trả về tổng + Toán. vòng[số];
}
Định nghĩa và cách sử dụng
Phương thức reduce[]
thực thi hàm rút gọn cho phần tử mảng
Phương thức reduce[]
trả về một giá trị duy nhất. kết quả tích lũy của hàm
Phương thức reduce[]
không thực thi hàm đối với các phần tử mảng trống
Phương thức reduce[]
không thay đổi mảng ban đầu
Ghi chú
Ở lần gọi lại đầu tiên, không có giá trị trả về từ lần gọi lại trước đó
Thông thường, phần tử mảng 0 được sử dụng làm giá trị ban đầu và quá trình lặp bắt đầu từ phần tử mảng 1
Nếu một giá trị ban đầu được cung cấp, thì giá trị này được sử dụng và quá trình lặp bắt đầu từ phần tử mảng 0
Xem thêm
Phương thức Array reduceRight[]
cú pháp
mảng. giảm [hàm [tổng, giá trị hiện tại, chỉ số hiện tại, mảng], giá trị ban đầu]
Thông số
Tham sốMô tảchức năng[]Bắt buộcMột hàm được chạy cho từng phần tử trong mảng. Thông số chức năng giảm tốc. tổngBắt buộc
Giá trị ban đầu hoặc giá trị được trả về trước đó của hàm. giá trị hiện tạibắt buộc
Giá trị của phần tử hiện tại. hiện tại IndexTùy chọn
Chỉ số của phần tử hiện tại. mảngTùy chọn
Mảng phần tử hiện tại thuộc về. giá trị ban đầuTùy chọn
Một giá trị được truyền cho hàm làm giá trị ban đầu
Giá trị trả về
Kết quả tích lũy từ lần gọi cuối cùng của chức năng gọi lạiHỗ trợ trình duyệt
reduce[]
là một tính năng ECMAScript5 [ES5]
ES5 [JavaScript 2009] được hỗ trợ đầy đủ trên mọi trình duyệt
ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11