Bạn có thể rút gọn một mảng đối tượng trong JavaScript không?

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ên

Bâ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ượng

Vì 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ố;
}

Tự mình thử »

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ố);
}

Tự mình thử »

---

Đị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ộc
Mộ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ại

---

---

Hỗ 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

Làm cách nào để giảm kích thước của một mảng trong JavaScript?

Tôi có thể sử dụng giảm đối tượng JavaScript không?

Làm cách nào để giảm mảng của mảng trong JavaScript?