我们在使用JS处理集合数据时候，经常要去进行遍历、去重、转换Map、分组、排序等操作，方法有很多种，依据个人习惯来选择。
注意：Chrome浏览器会将Lodash库作为开发工具的一部分加载到控制台中，从而使你能够直接在控制台中使用Lodash的方法(比如_.groupBy等)。
1、数组去重复
1.1使用Set对象转换
const numbers = [1, 2, 3, 2, 4, 1, 5];
const uniqueNumbers = Array.from(new Set(numbers));
console.log(uniqueNumbers);
1.2使用Array.filter()方法
const numbers = [1, 2, 3, 2, 4, 1, 5];
const uniqueNumbers = numbers.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(uniqueNumbers);
1.3使用第三方库lodash的_.uniq()方法
const _ = require('lodash');
const numbers = [1, 2, 3, 2, 4, 1, 5];
const uniqueNumbers = _.uniq(numbers);
console.log(uniqueNumbers);
2、对象数组转Map操作
2.1使用Array.map()方法
const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const map = new Map(arr.map(obj => [obj.id, obj.name]));
console.log(map);
2.2使用Array.reduce()方法
const arr = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const map = arr.reduce((result, obj) => {
result.set(obj.id, obj.name);
return result;
}, new Map());
console.log(map);
2.3使用第三方库lodash的.keyBy()和.mapValues()方法
const _ = require('lodash');
const arr = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
const map = _.mapValues(_.keyBy(arr, 'id'), 'name');
console.log(map);
3、对象数组进行分组
3.1使用Array.forEach()方法
const arr = [
{ id: 1, name: 'Alice', group: 'A' },
{ id: 2, name: 'Bob', group: 'B' },
{ id: 3, name: 'Charlie', group: 'A' },
{ id: 4, name: 'David', group: 'B' }
];
const grouped = {};
arr.forEach(item => {
grouped[item.group] = grouped[item.group] || [];
grouped[item.group].push(item);
});
console.log(grouped);
3.2使用Array.reduce()方法
const arr = [
{ id: 1, name: 'Alice', group: 'A' },
{ id: 2, name: 'Bob', group: 'B' },
{ id: 3, name: 'Charlie', group: 'A' },
{ id: 4, name: 'David', group: 'B' }
];
const grouped = arr.reduce((result, item) => {
(result[item.group] = result[item.group] || []).push(item);
return result;
}, {});
console.log(grouped);
3.3使用Array.map()方法
const arr = [
{ id: 1, name: 'Alice', group: 'A' },
{ id: 2, name: 'Bob', group: 'B' },
{ id: 3, name: 'Charlie', group: 'A' },
{ id: 4, name: 'David', group: 'B' }
];
const grouped = {};
arr.map(({ group, ...rest }) => {
grouped[group] = grouped[group] || [];
grouped[group].push(rest);
});
console.log(grouped);
3.4使用第三方库lodash的_.groupBy()方法
const _ = require('lodash');
const users = [
{ id: 1, name: 'Alice', group: 'A' },
{ id: 2, name: 'Bob', group: 'B' },
{ id: 3, name: 'Charlie', group: 'A' },
{ id: 4, name: 'David', group: 'B' },
{ id: 5, name: 'Eva', group: 'A' }
];
const groupedByGroup = _.groupBy(users, user => user.group);
console.log(groupedByGroup);
4、数组对象排序
4.1使用Array.sort()方法
const arr = [
{ name: 'John', age: 30 },
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 35 }
];
// 按照age属性进行升序排序
arr.sort((a, b) => a.age - b.age);
console.log(arr);
4.2使用第三方库lodash的_. orderBy()方法
const _ = require('lodash');
const arr = [
{ name: 'John', age: 30, score: 80 },
{ name: 'Alice', age: 25, score: 90 },
{ name: 'Bob', age: 35, score: 70 }
];
// 按照age属性升序,score降序排序
const sortedArr = _.orderBy(arr, ['age', 'score'], ['asc', 'desc']);
console.log(sortedArr);
