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

Lodash中有哪些常用的数组操作方法？请举例说明它们的用法

2月18日 21:59

Lodash提供了丰富的数组操作方法，以下是Lodash数组操作的详细解答：

Lodash常用数组操作方法

1. 数组创建和转换

_.chunk(array, [size=1])

将数组分割成指定大小的块。

javascript
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

_.chunk(['a', 'b', 'c', 'd'], 3);
// => [['a', 'b', 'c'], ['d']]

// 实际应用：分页显示
function paginate(items, pageSize) {
  return _.chunk(items, pageSize);
}

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const pages = paginate(items, 3);
// => [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]

_.compact(array)

移除数组中的假值（false, null, 0, "", undefined, NaN）。

javascript
_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

// 实际应用：清理表单数据
function cleanFormData(formData) {
  return _.compact(formData);
}

const formData = ['', 'John', null, 'john@example.com', undefined];
const cleaned = cleanFormData(formData);
// => ['John', 'john@example.com']

_.concat(array, [values])

将数组和值连接成新数组。

javascript
var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
console.log(other);
// => [1, 2, 3, [4]]

// 实际应用：合并多个数组
function mergeArrays(...arrays) {
  return _.concat([], ...arrays);
}

const result = mergeArrays([1, 2], [3, 4], [5, 6]);
// => [1, 2, 3, 4, 5, 6]

2. 数组过滤和查找

_.difference(array, [values])

创建一个不包含在给定数组中的值的新数组。

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

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

// 实际应用：获取新增的项
function getNewItems(currentItems, previousItems) {
  return _.difference(currentItems, previousItems);
}

const current = [1, 2, 3, 4, 5];
const previous = [1, 2, 3];
const newItems = getNewItems(current, previous);
// => [4, 5]

_.differenceBy(array, [values], [iteratee])

类似于_.difference，但接受一个迭代器函数。

javascript
_.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);
// => [1.2]

// 实际应用：根据对象属性查找差异
const users1 = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];
const users2 = [
  { id: 1, name: 'Alice' },
  { id: 3, name: 'Charlie' }
];

const newUsers = _.differenceBy(users2, users1, 'id');
// => [{ id: 3, name: 'Charlie' }]

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

查找数组中满足条件的第一个元素。

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

_.find(users, function(o) { return o.age < 40; });
// => { 'user': 'barney', 'age': 36, 'active': true }

_.find(users, { 'age': 1, 'active': true });
// => { 'user': 'pebbles', 'age': 1, 'active': true }

_.find(users, ['active', false]);
// => { 'user': 'fred', 'age': 40, 'active': false }

_.find(users, 'active');
// => { 'user': 'barney', 'age': 36, 'active': true }

_.filter(collection, [predicate])

遍历集合，返回满足条件的元素组成的数组。

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

_.filter(users, function(o) { return !o.active; });
// => [{ 'user': 'fred', 'age': 40, 'active': false }]

_.filter(users, { 'age': 36, 'active': true });
// => [{ 'user': 'barney', 'age': 36, 'active': true }]

_.filter(users, ['active', false]);
// => [{ 'user': 'fred', 'age': 40, 'active': false }]

_.filter(users, 'active');
// => [{ 'user': 'barney', 'age': 36, 'active': true }]

3. 数组去重

_.uniq(array)

创建一个去重后的数组。

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

// 实际应用：获取唯一值
function getUniqueValues(array) {
  return _.uniq(array);
}

const values = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4];
const unique = getUniqueValues(values);
// => [1, 2, 3, 4]

_.uniqBy(array, [iteratee])

根据迭代器函数的结果进行去重。

javascript
_.uniqBy([2.1, 1.2, 2.3], Math.floor);
// => [2.1, 1.2]

// 实际应用：根据对象属性去重
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, name: 'Alice' }
];

const uniqueUsers = _.uniqBy(users, 'id');
// => [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

_.uniqWith(array, [comparator])

使用比较函数进行去重。

javascript
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

4. 数组排序

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

按指定顺序对集合进行排序。

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

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

// 实际应用：多字段排序
function sortUsers(users) {
  return _.orderBy(users, ['lastName', 'firstName'], ['asc', 'asc']);
}

const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Doe' },
  { firstName: 'John', lastName: 'Smith' }
];

const sorted = sortUsers(users);
// => [
//      { firstName: 'Jane', lastName: 'Doe' },
//      { firstName: 'John', lastName: 'Doe' },
//      { firstName: 'John', lastName: 'Smith' }
//    ]

_.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]]

5. 数组转换

_.map(collection, [iteratee])

创建一个数组，包含集合中每个元素经过迭代器函数处理后的结果。

javascript
function square(n) {
  return n * n;
}

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

_.map({ 'a': 4, 'b': 8 }, square);
// => [16, 64] (iteration order is not guaranteed)

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

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

_.flatMap(collection, [iteratee])

创建一个扁平化的数组，包含集合中每个元素经过迭代器函数处理后的结果。

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

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

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

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

_.flatMapDeep(collection, [iteratee])

类似于_.flatMap，但会递归扁平化。

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

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

6. 数组分组

_.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'] }

// 实际应用：按类别分组
const products = [
  { id: 1, name: 'Product A', category: 'Electronics' },
  { id: 2, name: 'Product B', category: 'Clothing' },
  { id: 3, name: 'Product C', category: 'Electronics' }
];

const grouped = _.groupBy(products, 'category');
// => {
//      'Electronics': [
//        { id: 1, name: 'Product A', category: 'Electronics' },
//        { id: 3, name: 'Product C', category: 'Electronics' }
//      ],
//      'Clothing': [
//        { id: 2, name: 'Product B', category: 'Clothing' }
//      ]
//    }

_.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 } }

7. 数组截取

_.take(array, [n=1])

从数组开头获取n个元素。

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

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

_.take([1, 2, 3], 5);
// => [1, 2, 3]

_.take([1, 2, 3], 0);
// => []

_.takeRight(array, [n=1])

从数组末尾获取n个元素。

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

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

_.takeRight([1, 2, 3], 5);
// => [1, 2, 3]

_.slice(array, [start=0], [end=array.length])

截取数组的部分元素。

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

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

8. 数组检查

_.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

_.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

_.every(collection, [predicate])

检查集合中是否所有元素都满足条件。

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

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

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

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

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

实际应用示例

数据处理管道

javascript
class DataProcessor {
  constructor(data) {
    this.data = data;
  }

  process() {
    return _.chain(this.data)
      .filter(item => item.active)
      .map(item => this.transformItem(item))
      .uniqBy('id')
      .orderBy('createdAt', 'desc')
      .take(10)
      .value();
  }

  transformItem(item) {
    return {
      id: item.id,
      name: _.upperFirst(item.name),
      value: _.round(item.value, 2)
    };
  }
}

表格数据处理

javascript
function processTableData(rawData) {
  return _.chain(rawData)
    .filter(row => !_.isEmpty(row))
    .map(row => _.mapValues(row, value => _.trim(value)))
    .uniqBy('id')
    .orderBy(['category', 'name'], ['asc', 'asc'])
    .value();
}

总结

Lodash提供了丰富的数组操作方法，涵盖了数组创建、过滤、查找、去重、排序、转换、分组、截取和检查等各个方面。掌握这些方法可以大大提高数组处理的效率和代码的可读性。在实际开发中，建议根据具体需求选择合适的方法，并充分利用链式调用来简化代码。

标签：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)