乐闻世界logo
搜索文章和话题

Lodash的集合操作有哪些常用方法？如何使用它们？

2月18日 21:59

Lodash提供了丰富的集合操作方法，以下是关于Lodash集合操作的详细解答：

Lodash集合操作概述

Lodash的集合操作方法可以处理数组和对象，提供了丰富的数据处理能力。

1. 集合遍历方法

_.forEach(collection, [iteratee])

遍历集合中的每个元素。

javascript
// 遍历数组
_.forEach([1, 2], function(value) {
  console.log(value);
});
// => Logs `1` then `2`

// 遍历对象
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b'

// 使用break的替代方案
var array = [1, 2, 3, 4, 5];
var shouldBreak = false;

_.forEach(array, function(value) {
  if (value === 3) {
    shouldBreak = true;
    return false; // 返回false可以中断遍历
  }
  console.log(value);
});

_.forEachRight(collection, [iteratee])

从右到左遍历集合。

javascript
_.forEachRight([1, 2], function(value) {
  console.log(value);
});
// => Logs `2` then `1`

2. 集合过滤方法

_.filter(collection, [predicate])

过滤集合中符合条件的元素。

javascript
var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];

// 使用函数
var result = _.filter(users, function(o) { return !o.active; });
// => objects for ['fred']

// 使用对象匹配
var result = _.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']

// 使用属性路径
var result = _.filter(users, ['active', false]);
// => objects for ['fred']

// 使用属性值
var result = _.filter(users, 'active');
// => objects for ['barney']

// 链式调用
var result = _.chain(users)
  .filter('active')
  .sortBy('age')
  .value();

_.reject(collection, [predicate])

过滤集合中不符合条件的元素（与filter相反）。

javascript
var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];

var result = _.reject(users, function(o) { return !o.active; });
// => objects for ['barney']

3. 集合映射方法

_.map(collection, [iteratee])

映射集合中的每个元素。

javascript
// 映射数组
function square(n) {
  return n * n;
}

_.map([4, 8], square);
// => [16, 64]

// 映射对象
_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64]

// 使用对象属性
var users = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

_.map(users, 'user');
// => ['barney', 'fred']

// 链式调用
var result = _.chain(users)
  .map('user')
  .map(_.upperFirst)
  .value();
// => ['Barney', 'Fred']

_.flatMap(collection, [iteratee])

映射并扁平化集合。

javascript
function duplicate(n) {
  return [n, n];
}

_.flatMap([1, 2], duplicate);
// => [1, 1, 2, 2]

// 实际应用：展开嵌套数组
var data = [
  { id: 1, tags: ['javascript', 'react'] },
  { id: 2, tags: ['vue', 'typescript'] }
];

var allTags = _.flatMap(data, 'tags');
// => ['javascript', 'react', 'vue', 'typescript']

_.flatMapDeep(collection, [iteratee])

递归映射并扁平化集合。

javascript
function duplicate(n) {
  return [[[n, n]]];
}

_.flatMapDeep([1, 2], duplicate);
// => [1, 1, 2, 2]

4. 集合查找方法

_.find(collection, [predicate], [fromIndex])

查找集合中符合条件的第一个元素。

javascript
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

// 使用函数
var result = _.find(users, function(o) { return o.age < 40; });
// => object for 'barney'

// 使用对象匹配
var result = _.find(users, { 'age': 1, 'active': true });
// => object for 'pebbles'

// 使用属性路径
var result = _.find(users, ['active', false]);
// => object for 'fred'

// 使用属性值
var result = _.find(users, 'active');
// => object for 'barney'

// 指定起始索引
var result = _.find(users, 'active', 1);
// => object for 'pebbles'

_.findLast(collection, [predicate], [fromIndex])

从右到左查找集合中符合条件的第一个元素。

javascript
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

var result = _.findLast(users, function(o) { return o.age < 40; });
// => object for 'pebbles'

5. 集合分组方法

_.groupBy(collection, [iteratee])

根据条件对集合进行分组。

javascript
// 根据函数分组
_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }

// 根据属性分组
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

// 根据对象属性分组
var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 36, 'active': true }
];

_.groupBy(users, 'age');
// => { '36': [objects for 'barney' and 'pebbles'], '40': [object for 'fred'] }

// 多条件分组
_.groupBy(users, function(user) {
  return user.active ? 'active' : 'inactive';
});
// => { 'active': [objects for 'barney' and 'pebbles'], 'inactive': [object for 'fred'] }

_.keyBy(collection, [iteratee])

根据条件将集合转换为对象。

javascript
var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];

_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }

_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

_.countBy(collection, [iteratee])

统计集合中每个元素的出现次数。

javascript
_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }

_.countBy(['one', 'two', 'three'], 'length');
// => { '3': 2, '5': 1 }

// 实际应用：统计标签出现次数
var posts = [
  { tags: ['javascript', 'react'] },
  { tags: ['vue', 'javascript'] },
  { tags: ['react', 'typescript'] }
];

var allTags = _.flatMap(posts, 'tags');
var tagCounts = _.countBy(allTags);
// => { javascript: 2, react: 2, vue: 1, typescript: 1 }

6. 集合排序方法

_.sortBy(collection, [iteratees])

对集合进行排序。

javascript
var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];

// 单条件排序
_.sortBy(users, function(o) { return o.user; });
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

// 使用属性路径
_.sortBy(users, ['user', 'age']);
// => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]

// 降序排序
_.sortBy(users, ['user', 'age']).reverse();

_.orderBy(collection, [iteratees], [orders])

指定排序方向对集合进行排序。

javascript
var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];

_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

7. 集合统计方法

_.size(collection)

获取集合的大小。

javascript
_.size([1, 2, 3]);
// => 3

_.size({ 'a': 1, 'b': 2 });
// => 2

_.size('pebbles');
// => 7

_.sample(collection)

从集合中随机获取一个元素。

javascript
_.sample([1, 2, 3, 4]);
// => 2

_.sample({ 'a': 1, 'b': 2 });
// => 1

_.sampleSize(collection, [n=1])

从集合中随机获取n个元素。

javascript
_.sampleSize([1, 2, 3], 2);
// => [3, 1]

_.sampleSize([1, 2, 3], 4);
// => [2, 3, 1]

_.shuffle(collection)

随机打乱集合。

javascript
_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]

8. 集合归约方法

_.reduce(collection, [iteratee], [accumulator])

归约集合为一个值。

javascript
// 数组归约
_.reduce([1, 2], function(sum, n) {
  return sum + n;
}, 0);
// => 3

// 对象归约
_.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
  (result[value] || (result[value] = [])).push(key);
  return result;
}, {});
// => { '1': ['a', 'c'], '2': ['b'] }

_.reduceRight(collection, [iteratee], [accumulator])

从右到左归约集合。

javascript
var array = [[0, 1], [2, 3], [4, 5]];

_.reduceRight(array, function(flattened, other) {
  return flattened.concat(other);
}, []);
// => [4, 5, 2, 3, 0, 1]

9. 集合检查方法

_.every(collection, [predicate])

检查集合中的所有元素是否都符合条件。

javascript
_.every([true, 1, null, 'yes'], Boolean);
// => false

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': true }
];

_.every(users, { 'user': 'barney', 'active': true });
// => false

_.every(users, ['active', true]);
// => true

_.every(users, 'active');
// => true

_.some(collection, [predicate])

检查集合中是否有元素符合条件。

javascript
_.some([null, 0, 'yes', false], Boolean);
// => true

var users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];

_.some(users, { 'user': 'barney', 'active': false });
// => false

_.some(users, ['active', false]);
// => true

_.some(users, 'active');
// => true

_.includes(collection, value, [fromIndex=0])

检查集合中是否包含指定值。

javascript
_.includes([1, 2, 3], 1);
// => true

_.includes([1, 2, 3], 1, 2);
// => false

_.includes({ 'a': 1, 'b': 2 }, 1);
// => true

_.includes('abcd', 'bc');
// => true

10. 集合转换方法

_.toArray(collection)

将集合转换为数组。

javascript
_.toArray({ 'a': 1, 'b': 2 });
// => [1, 2]

_.toArray('abc');
// => ['a', 'b', 'c']

_.toArray(1);
// => []

_.toArray(null);
// => []

_.toPlainObject(value)

将值转换为普通对象。

javascript
function Foo() {
  this.a = 1;
}

Foo.prototype.b = 2;

_.toPlainObject(new Foo);
// => { 'a': 1 }

实际应用示例

数据分析和统计

javascript
class DataAnalyzer {
  static analyzeSales(salesData) {
    return {
      totalSales: _.sumBy(salesData, 'amount'),
      averageSale: _.meanBy(salesData, 'amount'),
      salesByProduct: _.groupBy(salesData, 'product'),
      topSellingProducts: _.chain(salesData)
        .groupBy('product')
        .mapValues(items => ({
          product: items[0].product,
          totalAmount: _.sumBy(items, 'amount'),
          count: items.length
        }))
        .values()
        .orderBy('totalAmount', 'desc')
        .take(5)
        .value(),
      salesByMonth: _.chain(salesData)
        .groupBy(item => item.date.substring(0, 7))
        .mapValues(items => ({
          month: items[0].date.substring(0, 7),
          totalAmount: _.sumBy(items, 'amount'),
          count: items.length
        }))
        .values()
        .orderBy('month')
        .value()
    };
  }
}

const salesData = [
  { date: '2024-01-01', product: 'A', amount: 100 },
  { date: '2024-01-02', product: 'B', amount: 150 },
  { date: '2024-01-03', product: 'A', amount: 200 },
  { date: '2024-02-01', product: 'C', amount: 300 }
];

const analysis = DataAnalyzer.analyzeSales(salesData);

用户数据处理

javascript
class UserProcessor {
  static processUsers(users) {
    return _.chain(users)
      .filter(user => user.active)
      .map(user => ({
        id: user.id,
        name: _.upperFirst(user.name),
        email: _.toLower(user.email),
        role: user.role || 'user',
        createdAt: new Date(user.created_at)
      }))
      .sortBy('createdAt')
      .groupBy('role')
      .mapValues(items => ({
        count: items.length,
        users: items
      }))
      .value();
  }

  static findUserByEmail(users, email) {
    return _.find(users, { email: _.toLower(email) });
  }

  static getUsersByRole(users, role) {
    return _.filter(users, { role });
  }

  static getActiveUsers(users) {
    return _.filter(users, 'active');
  }

  static getUserStats(users) {
    return {
      total: users.length,
      active: _.filter(users, 'active').length,
      inactive: _.reject(users, 'active').length,
      byRole: _.countBy(users, 'role')
    };
  }
}

总结

Lodash的集合操作方法包括：

  1. 遍历方法：

    • _.forEach() - 遍历集合
    • _.forEachRight() - 从右到左遍历

  2. 过滤方法：

    • _.filter() - 过滤符合条件的元素
    • _.reject() - 过滤不符合条件的元素

  3. 映射方法：

    • _.map() - 映射元素
    • _.flatMap() - 映射并扁平化
    • _.flatMapDeep() - 递归映射并扁平化

  4. 查找方法：

    • _.find() - 查找第一个符合条件的元素
    • _.findLast() - 从右到左查找

  5. 分组方法：

    • _.groupBy() - 分组
    • _.keyBy() - 转换为对象
    • _.countBy() - 统计出现次数

  6. 排序方法：

    • _.sortBy() - 排序
    • _.orderBy() - 指定排序方向

  7. 统计方法：

    • _.size() - 获取大小
    • _.sample() - 随机获取一个元素
    • _.sampleSize() - 随机获取n个元素
    • _.shuffle() - 随机打乱

  8. 归约方法：

    • _.reduce() - 归约
    • _.reduceRight() - 从右到左归约

  9. 检查方法：

    • _.every() - 检查所有元素
    • _.some() - 检查是否有元素
    • _.includes() - 检查是否包含

  10. 转换方法：

    • _.toArray() - 转换为数组
    • _.toPlainObject() - 转换为普通对象

这些方法可以单独使用，也可以通过链式调用组合使用，提供强大的数据处理能力。

标签：Lodash
热门标签
更多
Git(114)C语言(23)C++(15)前端(148)React(32)JavaScript(56)Linux(20)Rust(10)Docker(65)Cypress(4)TypeScript(23)Tailwind CSS(29)Vue(13)CSS(19)网络(12)MySQL(7)TypeORM(31)Next.js(30)