ES6集合操作-分组、去重、排序

最新推荐文章于 2025-10-07 08:01:46 发布

原创最新推荐文章于 2025-10-07 08:01:46 发布 · 1.8k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

本文介绍了如何在Chrome浏览器的开发者工具中利用Lodash库进行数组去重，如使用Set对象、filter方法以及Lodash的uniq函数。此外，还展示了如何处理对象数组，包括转Map、分组和排序，使用了多种JavaScript数组方法和Lodash辅助函数。

注意：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 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);