javascript數(shù)組按屬性分組實(shí)現(xiàn)方法
前言
項(xiàng)目代碼中有很多時(shí)候需要按一定的條件實(shí)現(xiàn)按屬性分組
1、forEach實(shí)現(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實(shí)現(xiàn)
你可以使用JavaScript的 Array.prototype.reduce() 方法來將數(shù)組分組。這是一種高級(jí)的方法，它可以將數(shù)組元素組合成一個(gè)單值。在這種情況下，你可以使用它來把數(shù)組元素放到一個(gè)對(duì)象中，其中對(duì)象的鍵是分組的條件，值是所有滿足條件的元素組成的數(shù)組。
例如，假設(shè)你有一個(gè)數(shù)組，其中包含了若干個(gè)人的信息，你想按照性別來分組：
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() 方法，它接受一個(gè)回調(diào)函數(shù)和一個(gè)初始值?；卣{(diào)函數(shù)的參數(shù)分別是每次遍歷時(shí)的累計(jì)值（也就是 groups 變量）和當(dāng)前元素（也就是 person 變量）。每次遍歷時(shí)，回調(diào)函數(shù)都會(huì)返回一個(gè)新的累計(jì)值。在這個(gè)例子中，累計(jì)值是一個(gè)對(duì)象，它
3、對(duì)沒有屬性名的數(shù)組進(jìn)行分組
要將數(shù)組中的元素按照一定的規(guī)則分成多組，可以使用 JavaScript 中的 Array.prototype.reduce() 方法。
例如，假設(shè)你有一個(gè)數(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]
// }在上面的代碼中，我們定義了一個(gè)函數(shù) groupBy，它接受兩個(gè)參數(shù)：要分組的數(shù)組和一個(gè)函數(shù)，該函數(shù)根據(jù)元素的某個(gè)屬性或特征返回一個(gè)唯一的鍵。然后，我們使用 reduce() 方法遍歷數(shù)組中的所有元素，并根據(jù)返回的鍵將它們分組到累加器對(duì)象中。
你也可以使用這種方法將數(shù)組中的元素按照任何你喜歡的規(guī)則分組，只需要更改分組函數(shù)即可。
4、對(duì)具有屬性名的數(shù)組進(jìn)行分組
要對(duì)數(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;
}, {});
}使用方法與第一種方法相同。
請(qǐng)注意，這些方法都是基于原始數(shù)組進(jìn)行分組，并創(chuàng)建一個(gè)新對(duì)象，該對(duì)象具有將數(shù)組中每個(gè)元素分組到相應(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;
});
}使用方法與第一種方法相同。
請(qǐng)注意，這些方法都是基于原始數(shù)組進(jìn)行分組，并將每個(gè)元素分組到原始數(shù)組中的相應(yīng)元素中。 如果要?jiǎng)?chuàng)建新數(shù)組，請(qǐng)使用第一二種方法。
總結(jié)
到此這篇關(guān)于javascript數(shù)組按屬性分組實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js數(shù)組分組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信JSSDK調(diào)用微信掃一掃功能的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了深入理解ES6中l(wèi)et和閉包，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載
封裝好的省市地區(qū)聯(lián)動(dòng)控件附下載...2007-08-08
bootstrap的3級(jí)菜單樣式,支持母版頁保留打開狀態(tài)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猙ootstrap的3級(jí)菜單樣式,支持母版頁保留打開狀態(tài)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了JS ES6展開運(yùn)算符的幾個(gè)妙用，想了解ES6的同學(xué)，可以參考下2021-04-04
JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部內(nèi)容
默認(rèn)顯示部分文字，點(diǎn)擊按鈕顯示全部，類似這樣的功能在一些特殊的地方會(huì)見到吧，下面與大家分享下JS、jQuery如何實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
模塊化JavaScript的概念尤為強(qiáng)烈，似乎有趕超07年Ajax風(fēng)潮之趨勢2012-03-03
Bootstrap基本組件學(xué)習(xí)筆記之縮略圖(13)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之縮略圖,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript實(shí)現(xiàn)查找字符串中第一個(gè)不重復(fù)的字符
這篇文章主要介紹了JavaScript實(shí)現(xiàn)查找字符串中第一個(gè)不重復(fù)的字符,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了javascript中拼接HTML字符串的最快、最好的方法，本文共計(jì)介紹了3種方法,并對(duì)3個(gè)各自做了瀏覽器速度測試,需要的朋友可以參考下2014-06-06