位置: IT常識 - 正文
【JS】js數(shù)組分組，javascript實(shí)現(xiàn)數(shù)組的按屬性分組(js數(shù)組分組并排序)
編輯：rootadmin推薦整理分享【JS】js數(shù)組分組，javascript實(shí)現(xiàn)數(shù)組的按屬性分組(js數(shù)組分組并排序)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。
文章相關(guān)熱門搜索詞:js數(shù)組分隔符,js數(shù)組分割方法,js 數(shù)組切分,js將數(shù)組分割為新的數(shù)組,js 數(shù)組切分,js數(shù)組分隔符,js數(shù)組分隔符,js數(shù)組分組,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！
項(xiàng)目代碼中有很多時候需要按一定的條件實(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ù)組分組。這是一種高級的方法，它可以將數(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ù)分別是每次遍歷時的累計(jì)值（也就是 groups 變量）和當(dāng)前元素（也就是 person 變量）。每次遍歷時，回調(diào)函數(shù)都會返回一個新的累計(jì)值。在這個例子中，累計(jì)值是一個對象，它
4、對沒有屬性名的數(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ù)組，請使用第一二種方法。
下一篇：視覺SLAM總結(jié)——SuperPoint / SuperGlue(視覺slam ba)
