快捷導(dǎo)航

javascript數(shù)組按屬性分組實(shí)現(xiàn)方法

更新時(shí)間：2023年05月31日 11:19:40 作者：卸載引擎

在開發(fā)過程中,前端有時(shí)需要對(duì)后端返回的數(shù)據(jù)進(jìn)行一些處理,當(dāng)后端返回給我們json對(duì)象數(shù)組時(shí),我們可能會(huì)需要按照對(duì)象中的某一個(gè)屬性來進(jìn)行分組,下面這篇文章主要給大家介紹了關(guān)于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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript數(shù)組按屬性分組實(shí)現(xiàn)方法

目錄

前言

1、forEach實(shí)現(xiàn)

2、reduce實(shí)現(xiàn)

3、對(duì)沒有屬性名的數(shù)組進(jìn)行分組

4、對(duì)具有屬性名的數(shù)組進(jìn)行分組

1.使用 reduce() 方法：

2.使用 map() 和 reduce() 方法：

3. 使用 map() 方法：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript數(shù)組按屬性分組實(shí)現(xiàn)方法

目錄

前言

1、forEach實(shí)現(xiàn)

2、reduce實(shí)現(xiàn)

3、對(duì)沒有屬性名的數(shù)組進(jìn)行分組

4、對(duì)具有屬性名的數(shù)組進(jìn)行分組

1.使用 reduce() 方法：

2.使用 map() 和 reduce() 方法：

3. 使用 map() 方法：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

1、forEach實(shí)現(xiàn)

2、reduce實(shí)現(xiàn)

3、對(duì)沒有屬性名的數(shù)組進(jìn)行分組