Nhóm bằng cách sử dụng rút gọn trong JavaScript

Question

Nhiều lập trình viên thích ngôn ngữ lập trình Ruby vì thư viện tiện ích chuẩn phong phú. Ví dụ, mảng trong Ruby có rất nhiều phương thức

Nội dung chính Show

1. mảng. nhómBy()
2. mảng. nhómByToMap()
3. Phần kết luận
Bài đăng chất lượng vào hộp thư đến của bạn
Làm cách nào để nhóm bằng cách sử dụng giảm trong JavaScript?
Làm cách nào để sử dụng groupBy trong JavaScript?
Làm cách nào để tạo một nhóm trong JavaScript?
Giảm được sử dụng để làm gì trong JavaScript?

JavaScript từng bước cũng làm phong phú thêm thư viện chuẩn của nó về chuỗi và mảng. Ví dụ trong một bài viết trước tôi đã mô tả mảng mới. phương thức at()

Người hùng của ngày hôm nay là đề xuất nhóm mảng mới (hiện đang ở giai đoạn 3) giới thiệu các phương pháp mới

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 và

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

9. Chúng có sẵn trong thư viện

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

0

Hãy xem bạn có thể hưởng lợi như thế nào từ các phương pháp nhóm

1. mảng. nhómBy()

Bạn có một danh sách các sản phẩm, trong đó mỗi sản phẩm là một đối tượng có 2 thuộc tính.

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

1 và

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

0

javascript
const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];

Trong ví dụ trên,

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

1 là một mảng các đối tượng sản phẩm

Bây giờ bạn phải thực hiện một thao tác đơn giản với danh sách sản phẩm — nhóm sản phẩm theo danh mục

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

Làm cách nào bạn có được một mảng như

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

2 từ mảng

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

1?

Cách thông thường là gọi phương thức

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

4 với chức năng gọi lại bên phải

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

Hãy thử bản trình diễn

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

5 giảm mảng

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

1 thành một đối tượng gồm các sản phẩm được nhóm theo danh mục

Mặc dù tôi coi phương pháp

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

4 hữu ích và mạnh mẽ, nhưng đôi khi khả năng đọc của nó không phải là tốt nhất

Bởi vì nhóm dữ liệu là một nhiệm vụ thường xảy ra (nhớ lại

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 từ SQL?), đề xuất nhóm mảng giới thiệu hai phương pháp hữu ích.

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 và

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

9

Đây là cách bạn sẽ sử dụng

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 để tạo cùng một nhóm theo danh mục

javascript
const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];

2

Hãy thử bản trình diễn

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

2 trả về một đối tượng trong đó mỗi thuộc tính có khóa là tên danh mục và giá trị dưới dạng một mảng với các sản phẩm từ danh mục tương ứng

Nhóm sử dụng

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

3 cần ít mã hơn và dễ hiểu hơn so với sử dụng

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

4

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

5 chấp nhận chức năng gọi lại được gọi với 3 đối số. mục mảng hiện tại, chỉ mục và chính mảng đó.

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

6 sẽ trả về một chuỗi. tên nhóm nơi bạn muốn thêm mục

javascript
const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];

8

2. mảng. nhómByToMap()

Đôi khi bạn có thể muốn sử dụng một

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

7 thay vì một đối tượng đơn giản. Lợi ích của

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

7 là nó chấp nhận bất kỳ loại dữ liệu nào làm khóa, nhưng đối tượng đơn giản chỉ giới hạn ở chuỗi và ký hiệu

Vì vậy, nếu bạn muốn nhóm dữ liệu vào một

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

7, bạn có thể sử dụng phương pháp

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

9

javascript
const products = [
  { name: 'apples', category: 'fruits' },
  { name: 'oranges', category: 'fruits' },
  { name: 'potatoes', category: 'vegetables' }
];

21 hoạt động chính xác như

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

5, chỉ khác là nó nhóm các mục thành một

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

7 thay vì một đối tượng JavaScript đơn giản

Ví dụ: nhóm mảng sản phẩm thành bản đồ theo tên danh mục được thực hiện như sau

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

5

Hãy thử bản trình diễn

3. Phần kết luận

Nếu bạn muốn dễ dàng nhóm các phần tử của một mảng (tương tự như

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 trong SQL), thì hãy chào đón các phương thức mới

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 và

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

9

Cả hai hàm đều chấp nhận một cuộc gọi lại sẽ trả về khóa của nhóm nơi các mục hiện tại phải được chèn vào

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

8 nhóm các mục thành một đối tượng JavaScript đơn giản, trong khi

javascript
const groupByCategory = {
  'fruits': [
    { name: 'apples', category: 'fruits' }, 
    { name: 'oranges', category: 'fruits' },
  ],
  'vegetables': [
    { name: 'potatoes', category: 'vegetables' }
  ]
};

9 nhóm chúng thành một thể hiện

javascript
const groupByCategory = products.reduce((group, product) => {
  const { category } = product;
  group[category] = group[category] ?? [];
  group[category].push(product);
  return group;
}, {});
console.log(groupByCategory);
// {
//   'fruits': [
//     { name: 'apples', category: 'fruits' }, 
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

7

Nếu bạn muốn sử dụng ngay các chức năng này thì hãy sử dụng thư viện core-js do core-js cung cấp

Thích bài viết?

đề xuất cải tiến

Bài đăng chất lượng vào hộp thư đến của bạn

Tôi thường xuyên xuất bản bài viết có chứa

Các khái niệm JavaScript quan trọng được giải thích bằng các từ đơn giản
Tổng quan về các tính năng JavaScript mới
Cách sử dụng TypeScript và cách gõ
Thiết kế phần mềm và thực hành mã hóa tốt

Đăng ký nhận bản tin của tôi để nhận chúng ngay trong hộp thư đến của bạn

Đặt mua

Tham gia cùng 6845 người đăng ký khác

Giới thiệu về Dmitri Pavlutin

Nhà văn và huấn luyện viên công nghệ. Thói quen hàng ngày của tôi bao gồm (nhưng không giới hạn) uống cà phê, viết mã, viết, huấn luyện, vượt qua sự nhàm chán 😉

Làm cách nào để nhóm bằng cách sử dụng giảm trong JavaScript?

reduce((acc, currentValue) => { let groupKey = currentValue[key]; if (. acc[groupKey]) { acc[groupKey] = []; . push(currentValue); . And that is all we need to do to implement our own groupBy function.

Làm cách nào để sử dụng groupBy trong JavaScript?

groupBy(dog => { return dog. giống; . groupBy nhận một hàm gọi lại được gọi cho từng phần tử trong mảng theo thứ tự tăng dần. use the new groupBy function by calling it on the array instance, just like using a map , filter , or reduce function. groupBy takes a callback function which is called for each element in the array in ascending order.

Làm cách nào để tạo một nhóm trong JavaScript?

Nhóm bảng điều khiển() .

Ví dụ. Tạo một nhóm tin nhắn trong bảng điều khiển. bảng điều khiển. log("Xin chào thế giới. " ); bảng điều khiển. nhóm(); . .

Kết thúc một nhóm với bảng điều khiển. nhómEnd(). bảng điều khiển. log("Xin chào thế giới. " ); bảng điều khiển. nhóm(); . .

Chỉ định nhãn cho nhóm. bảng điều khiển. log("Xin chào thế giới. " ); bảng điều khiển. nhóm("MyLabel");

Giảm được sử dụng để làm gì trong JavaScript?

reduce() trong JavaScript được sử dụng để giảm mảng thành một giá trị duy nhất và thực thi một hàm được cung cấp cho từng giá trị của mảng . 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)

programming javascript