loadsh.js常用方法讲解

loadsh.js 是一款 JavaScript 实用库,提供了许多常用的函数,可以帮助我们简化开发过程,提高代码质量和效率。本文将详细介绍 loadsh.js 中常用的方法。

1. _.map

该函数可以将数组中的每个元素都执行一次指定的操作,并返回由操作的结果组成的新数组。

// 示例代码
_.map([1, 2, 3], function(n) {
  return n * 2;
});
// => [2, 4, 6]

2. _.filter

该函数可以过滤数组中的元素,只保留符合条件的元素,并返回一个新的数组。

// 示例代码
_.filter([1, 2, 3, 4, 5, 6], function(n) {
  return n % 2 == 0;
});
// => [2, 4, 6]

3. _.reduce

该函数可以将数组中的元素依次应用于一个函数,并将函数的返回值累加至一个最终的值。

// 示例代码
_.reduce([1, 2], function(sum, n) {
  return sum + n;
}, 0);
// => 3

4. _.forEach

该函数可以遍历数组中的每个元素,并执行指定的操作。

// 示例代码
_.forEach([1, 2], function(value) {
  console.log(value);
});
// => Logs `1` then `2`.

5. _.isEqual

该函数可以比较两个对象是否相等。

// 示例代码
_.isEqual({ 'a': 1 }, { 'a': 1 });
// => true

6. _.cloneDeep

该函数可以深度复制一个对象,包括其子对象。

// 示例代码
var objects = [{ 'a': 1 }, { 'b': 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

7. _.debounce

该函数可以延迟函数的执行,直到过了一定的时间段后才执行。

// 示例代码
_.debounce(function() {
  console.log('Hello from debounce');
}, 1000);

8. _.throttle

该函数可以限制函数的执行频率,确保函数在一定时间内只执行一次。

// 示例代码
_.throttle(function() {
  console.log('Hello from throttle');
}, 1000);

9. _.chunk

该函数可以将数组拆分成指定大小的小数组。

// 示例代码
_.chunk(['a', 'b', 'c', 'd'], 2);
// => [['a', 'b'], ['c', 'd']]

10. _.compact

该函数可以去除数组中的假值元素(falsenull0""undefinedNaN)。

// 示例代码
_.compact([0, 1, false, 2, '', 3]);
// => [1, 2, 3]

11. _.concat

该函数可以将多个数组连接成一个新数组。

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

12. _.difference

该函数可以返回一个剔除了所有给定数组中的元素后的数组。

// 示例代码
_.difference([2, 1], [2, 3]);
// => [1]

13. _.fill

该函数可以用指定的值填充一个数组。

// 示例代码
var array = [1, 2, 3];
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']

14. _.flatten

该函数可以将一个多维数组展开成一个一维数组。

// 示例代码
_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]

15. _.head

该函数可以返回数组的第一个元素。

// 示例代码
_.head([1, 2, 3]);
// => 1

16. _.tail

该函数可以返回数组中除了第一个元素之外的所有元素。

// 示例代码
_.tail([1, 2, 3]);
// => [2, 3]

17. _.indexOf

该函数可以返回数组中指定元素的第一个索引值,如果数组中不存在该元素,则返回 -1

// 示例代码
_.indexOf([1, 2, 1, 2], 2);
// => 1

18. _.lastIndexOf

该函数可以返回数组中指定元素的最后一个索引值,如果数组中不存在该元素,则返回 -1

// 示例代码
_.lastIndexOf([1, 2, 1, 2], 2);
// => 3

19. _.reverse

该函数可以返回一个反转后的数组。

// 示例代码
_.reverse([1, 2, 3]);
// => [3, 2, 1]

20. _.uniq

该函数可以返回一个去重后的数组。

// 示例代码
_.uniq([2, 1, 2]);
// => [2, 1]

21. _.zip

该函数可以将多个数组的相同位置的元素组合成新的数组。

// 示例代码
_.zip(['a', 'b'], [1, 2], [true, false]);
// => [['a', 1, true], ['b', 2, false]]

22. _.range

该函数可以生成一个数字序列。

// 示例代码
_.range(4);
// => [0, 1, 2, 3]
_.range(1, 5);
// => [1, 2, 3, 4]
_.range(0, 20, 5);
// => [0, 5, 10, 15]
_.range(0, -4, -1);
// => [0, -1, -2, -3]
_.range(1, 4, 0);
// => [1, 1, 1]
_.range(0);
// => []

23. _.orderBy

该函数可以根据指定的条件对数组进行排序。

// 示例代码
var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 36 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 34 }
];

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

24. _.shuffle

该函数可以随机打乱数组中的元素。

// 示例代码
_.shuffle([1, 2, 3, 4, 5, 6]);
// => [4, 1, 6, 3, 5, 2]

25. _.sample

该函数可以从数组中随机抽取一个元素。

// 示例代码
_.sample([1, 2, 3, 4, 5]);
// => 3

26. _.isEmpty

该函数可以判断一个值是否为空。

// 示例代码
_.isEmpty(null);
// => true
_.isEmpty('');
// => true
_.isEmpty({});
// => true
_.isEmpty([]);
// => true
_.isEmpty({ 'a': 1 });
// => false
_.isEmpty([1, 2, 3]);
// => false

27. _.isNil

该函数可以判断一个值是否为 nullundefined

// 示例代码
_.isNil(null);
// => true
_.isNil(undefined);
// => true
_.isNil(void 0);
// => true
_.isNil(NaN);
// => false

28. _.pick

该函数可以从对象中选取指定的属性。

// 示例代码
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

29. _.omit

该函数可以从对象中剔除指定的属性。

// 示例代码
var object = { 'a': 1, 'b': '2', 'c': 3 };
_.omit(object, ['a', 'c']);
// => { 'b': '2' }

30. _.invert

该函数可以将对象的键和值对调。

// 示例代码
var object = { 'a': 1, 'b': 2, 'c': 1 };
_.invert(object);
// => { '1': 'c', '2': 'b' }

31. _.groupBy

该函数可以将数组中的元素按照指定的条件进行分组,并返回一个对象。

// 示例代码
var array = [
  { 'name': 'apple', 'color': 'red' },
  { 'name': 'banana', 'color': 'yellow' },
  { 'name': 'grape', 'color': 'red' }
];
_.groupBy(array, 'color');
// => { 'red': [{ 'name': 'apple', 'color': 'red' }, { 'name': 'grape', 'color': 'red' }], 'yellow': [{ 'name': 'banana', 'color': 'yellow' }] }

32. _.keyBy

该函数可以将数组中的元素按照指定的键进行分组,并返回一个对象。

// 示例代码
var array = [
  { 'id': '1', 'name': 'apple' },
  { 'id': '2', 'name': 'banana' },
  { 'id': '3', 'name': 'grape' }
];
_.keyBy(array, 'id');
// => { '1': { 'id': '1', 'name': 'apple' }, '2': { 'id': '2', 'name': 'banana' }, '3': { 'id': '3', 'name': 'grape' } }

33. _.countBy

该函数可以将数组中的元素按照指定的条件进行分组,并返回一个对象,对象的值为该分组中元素的数量。

// 示例代码
var array = [
  { 'name': 'apple', 'color': 'red' },
  { 'name': 'banana', 'color': 'yellow' },
  { 'name': 'grape', 'color': 'red' }
];
_.countBy(array, 'color');
// => { 'red': 2, 'yellow': 1 }

34. _.partition

该函数可以将数组中的元素分为两个数组,分别是符合条件和不符合条件的元素。

// 示例代码
var array = [1, 2, 3, 4, 5, 6];
_.partition(array, function(n) {
  return n % 2 == 0;
});
// => [[2, 4, 6], [1, 3, 5]]

35. _.forIn

该函数可以遍历对象的可枚举属性,并执行指定的操作。

// 示例代码
function Foo() {
  this.a = 1;
  this.b = 2;
}

Foo.prototype.c = 3;

_.forIn(new Foo, function(value, key) {
  console.log(key);
});
// => Logs 'a', 'b', then 'c' (无法保证属性的顺序)

36. _.forOwn

该函数可以遍历对象的自有属性,并执行指定的操作。

// 示例代码
function Foo() {
  this.a = 1;
  this.b = 2;
}

Foo.prototype.c = 3;

_.forOwn(new Foo, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (无法保证属性的顺序)

37. _.find

该函数可以在数组中查找符合条件的元素,并返回该元素。

// 示例代码
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 }

38. _.findLast

该函数可以在数组中查找最后一个符合条件的元素,并返回该元素。

// 示例代码
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.findLast(users, function(o) { return o.age < 40; });
// => { 'user': 'pebbles', 'age': 1, 'active': true }

39. _.findIndex

该函数可以在数组中查找符合条件的元素,并返回该元素的索引值。

// 示例代码
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.findIndex(users, function(o) { return o.age < 40; });
// => 0

40. _.findLastIndex

该函数可以在数组中查找最后一个符合条件的元素,并返回该元素的索引值。

// 示例代码
var users = [
  { 'user': 'barney',  'age': 36, 'active': true },
  { 'user': 'fred',    'age': 40, 'active': false },
  { 'user': 'pebbles', 'age': 1,  'active': true }
];

_.findLastIndex(users, function(o) { return o.age < 40; });
// => 2

41. _.flattenDeep

该函数可以将一个多维数组展开成一个一维数组。

// 示例代码
_.flattenDeep([1, [2, [3, [4]], 5]]);
// => [1, 2, 3, 4, 5]

42. _.flattenDepth

该函数可以将一个多维数组展开成一个一维数组,但是可以指定展开的深度。

// 示例代码
_.flattenDepth([1, [2, [3, [4]], 5]], 1);
// => [1, 2, [3, [4]], 5]

43. _.fromPairs

该函数可以将一个二维数组转换为一个对象。

// 示例代码
_.fromPairs([['a', 1], ['b', 2]]);
// => { 'a': 1, 'b': 2 }

44. _.initial

该函数可以返回数组中除了最后一个元素之外的所有元素。

// 示例代码
_.initial([1, 2, 3]);
// => [1, 2]

45. _.intersection

该函数可以返回多个数组中公共的元素。

// 示例代码
_.intersection([2, 1], [2, 3]);
// => [2]

46. _.join

该函数可以将数组中的元素用指定的分隔符连接成一个字符串。

// 示例代码
_.join(['a', 'b', 'c'], '~');
// => 'a~b~c'

47. _.nth

该函数可以返回数组中指定位置的元素。

// 示例代码
var array = ['a', 'b', 'c', 'd'];

_.nth(array, 1);
// => 'b'
_.nth(array, -2);
// => 'c'

48. _.pull

该函数可以从数组中移除指定的元素。

// 示例代码
var array = ['a', 'b', 'c', 'a', 'b', 'c'];

_.pull(array, 'a', 'c');
console.log(array);
// => ['b', 'b']

49. _.pullAll

该函数可以从数组中移除指定的多个元素。

// 示例代码
var array = ['a', 'b', 'c', 'a', 'b', 'c'];

_.pullAll(array, ['a', 'c']);
console.log(array);
// => ['b', 'b']

50. _.pullAt

该函数可以从数组中移除指定位置的元素,并返回移除的元素组成的新数组。

// 示例代码
var array = ['a', 'b', 'c', 'd'];

var pulled = _.pullAt(array, [1, 3]);
console.log(array);
// => ['a', 'c']
console.log(pulled);
// => ['b', 'd']

51. _.toPairs

该函数可以将一个对象转换为一个键值对数组。

// 示例代码
_.toPairs({ 'a': 1, 'b': 2 });
// => [['a', 1], ['b', 2]]

你可能感兴趣的:(前端)