javascript數(shù)組按屬性分組實現(xiàn)方法
前言
項目代碼中有很多時候需要按一定的條件實現(xiàn)按屬性分組
1、forEach實現(xiàn)
let arr = [
{name: '張三', age: 18},
{name: '李四', age: 20},
{name: '王五', age: 18},
{name: '趙六', age: 20},
{name: '孫七', age: 21},
];
let obj = {};
arr.forEach(item => {
if (!obj[item.age]) {
obj[item.age] = [];
}
obj[item.age].push(item);
});
console.log(obj);
// {
// 18: [{name: '張三', age: 18}, {name: '王五', age: 18}],
// 20: [{name: '李四', age: 20}, {name: '趙六', age: 20}],
// 21: [{name: '孫七', age: 21}],
// }2、reduce實現(xiàn)
你可以使用JavaScript的 Array.prototype.reduce() 方法來將數(shù)組分組。這是一種高級的方法，它可以將數(shù)組元素組合成一個單值。在這種情況下，你可以使用它來把數(shù)組元素放到一個對象中，其中對象的鍵是分組的條件，值是所有滿足條件的元素組成的數(shù)組。
例如，假設(shè)你有一個數(shù)組，其中包含了若干個人的信息，你想按照性別來分組：
const people = [
{ name: 'Alice', gender: 'female' },
{ name: 'Bob', gender: 'male' },
{ name: 'Charlie', gender: 'male' },
{ name: 'Diana', gender: 'female' },
];
const groups = people.reduce((groups, person) => {
const key = person.gender;
if (!groups[key]) {
groups[key] = [];
}
groups[key].push(person);
return groups;
}, {});
console.log(groups);
// Output:
// {
// female: [
// { name: 'Alice', gender: 'female' },
// { name: 'Diana', gender: 'female' },
// ],
// male: [
// { name: 'Bob', gender: 'male' },
// { name: 'Charlie', gender: 'male' },
// ],
// }上面的代碼使用了 reduce() 方法，它接受一個回調(diào)函數(shù)和一個初始值?；卣{(diào)函數(shù)的參數(shù)分別是每次遍歷時的累計值（也就是 groups 變量）和當(dāng)前元素（也就是 person 變量）。每次遍歷時，回調(diào)函數(shù)都會返回一個新的累計值。在這個例子中，累計值是一個對象，它
3、對沒有屬性名的數(shù)組進(jìn)行分組
要將數(shù)組中的元素按照一定的規(guī)則分成多組，可以使用 JavaScript 中的 Array.prototype.reduce() 方法。
例如，假設(shè)你有一個數(shù)組，要將它按照奇偶性分成兩組，可以這樣寫：
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const groupBy = (arr, fn) =>
arr.reduce((acc, el) => {
const key = fn(el);
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(el);
return acc;
}, {});
const groups = groupBy(numbers, (n) => (n % 2 === 0 ? 'even' : 'odd'));
console.log(groups);
// Output:
// {
// even: [2, 4, 6, 8],
// odd: [1, 3, 5, 7, 9]
// }在上面的代碼中，我們定義了一個函數(shù) groupBy，它接受兩個參數(shù)：要分組的數(shù)組和一個函數(shù)，該函數(shù)根據(jù)元素的某個屬性或特征返回一個唯一的鍵。然后，我們使用 reduce() 方法遍歷數(shù)組中的所有元素，并根據(jù)返回的鍵將它們分組到累加器對象中。
你也可以使用這種方法將數(shù)組中的元素按照任何你喜歡的規(guī)則分組，只需要更改分組函數(shù)即可。
4、對具有屬性名的數(shù)組進(jìn)行分組
要對數(shù)組進(jìn)行分組，你可以使用以下方法之一：
1.使用 reduce() 方法：
function groupBy(arr, key) {
return arr.reduce((acc, curr) => {
(acc[curr[key]] = acc[curr[key]] || []).push(curr);
return acc;
}, {});
}使用方法：
const people = [
{ name: 'Alice', age: 21 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 23 },
{ name: 'Dave', age: 24 },
{ name: 'Eve', age: 22 },
];
const groupedPeople = groupBy(people, 'age');
console.log(groupedPeople);
// 打印結(jié)果:
// {
// 21: [{ name: 'Alice', age: 21 }],
// 22: [{ name: 'Bob', age: 22 },{ name: 'Eve', age: 25 }],
// 23: [{ name: 'Charlie', age: 23 }],
// 24: [{ name: 'Dave', age: 24 }],
// }2.使用 map() 和 reduce() 方法：
function groupBy(arr, key) {
return arr.map(item => item[key]).reduce((acc, curr, i) => {
acc[curr] = acc[curr] || [];
acc[curr].push(arr[i]);
return acc;
}, {});
}使用方法與第一種方法相同。
請注意，這些方法都是基于原始數(shù)組進(jìn)行分組，并創(chuàng)建一個新對象，該對象具有將數(shù)組中每個元素分組到相應(yīng)分組中的屬性。 如果要在原始數(shù)組上進(jìn)行分組，則可以使用以下方法之一：
使用 Array.prototype.forEach() 方法：
function groupBy(arr, key) {
arr.forEach(item => {
item[key] = item[key] || [];
item[key].push(item);
});
}使用方法：
const people = [
{ name: 'Alice', age: 21 },
{ name: 'Bob', age: 22 },
{ name: 'Charlie', age: 23 },
{ name: 'Dave', age: 24 },
{ name: 'Eve', age: 22 },
];
groupBy(people, 'age');
console.log(people);
// 打印結(jié)果:
// [
// { name: 'Alice', age: 21, ageGroup: [{ name: 'Alice', age: 21 }] },
// { name: 'Bob', age: 22, ageGroup: [{ name: 'Bob', age: 22 }] },
// { name: 'Charlie', age: 23, ageGroup: [{ name: 'Charlie', age: 23 }] },
// { name: 'Dave', age: 24, ageGroup: [{ name: 'Dave', age: 24 }] },
// { name: 'Eve', age: 25, ageGroup: [{ name: 'Eve', age: 25 }] }
// ]3. 使用 map() 方法：
function groupBy(arr, key) {
return arr.map(item => {
item[key] = item[key] || [];
item[key].push(item);
return item;
});
}使用方法與第一種方法相同。
請注意，這些方法都是基于原始數(shù)組進(jìn)行分組，并將每個元素分組到原始數(shù)組中的相應(yīng)元素中。 如果要創(chuàng)建新數(shù)組，請使用第一二種方法。
總結(jié)
到此這篇關(guān)于javascript數(shù)組按屬性分組實現(xiàn)的文章就介紹到這了,更多相關(guān)js數(shù)組分組內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)多功能計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
JS前端組件設(shè)計以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考
這篇文章主要為大家介紹了JS前端組件設(shè)計以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
詳解javascript appendChild()的完整功能
這篇文章主要介紹了詳解javascript appendChild()的完整功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
javascript實現(xiàn)獲取cookie過期時間的變通方法
這篇文章主要介紹了javascript實現(xiàn)獲取cookie過期時間的變通方法,因為cookie過期時間是由瀏覽器控制的,所以想獲取過期時間只能通過本文的變通方法來實現(xiàn),需要的朋友可以參考下2014-08-08
這篇文章主要介紹了微信小程序開發(fā)實戰(zhàn)教程之手勢解鎖的相關(guān)資料,本文分步驟給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Webpack5正式發(fā)布，有哪些新特性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript實現(xiàn)數(shù)字格式化的示例詳解
在處理數(shù)字時,為了提高可讀性,我們通常會將整數(shù)部分的數(shù)字以千分位或百分位分隔,本文將詳細(xì)介紹如何使用JavaScript來實現(xiàn)數(shù)字的千分位和百分位分隔,需要的可以參考下2024-04-04
使用JavaScript為一張圖片設(shè)置備選路徑的方法
在做網(wǎng)頁開發(fā)的時候，有時候希望給圖片設(shè)置一個備選路徑，即，當(dāng)src屬性對應(yīng)的主路徑加載失敗的時候，圖片可以馬上切換到備選路徑，怎么實現(xiàn)呢?下面通過本文給大家分享JavaScript為一張圖片設(shè)置備選路徑的方法，一起看看吧2017-01-01
javascript中offset、client、scroll的屬性總結(jié)
這篇文章主要介紹了javascript中offset、client、scroll的屬性總結(jié)的相關(guān)資料,需要的朋友可以參考下2015-08-08