runoops.com

Lodash 入门及常用方法汇总

1.  Lodash工具

是一个一致性、模块化、高性能的 JavaScript 实用工具库。

内部封装非常多使用函数,操作数组操作对象的方法。可以说是一个非常实用的工具函数。

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。

2.  引入使用

完整版下载地址 : https://raw.githubusercontent.com/lodash/lodash/4.17.15-npm/lodash.js

浏览器环境:

<script src="lodash.js"></script>
//jsdelivr
<script src="
https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
"></script>

通过 npm:

全局安装

$ npm i -g npm

安装在项目里

​​​​​​​$ npm i --save lodash

node.js中使用

// 加载完整版本
var _ = require('lodash');
// 加载核心版本
var _ = require('lodash/core');
// 提供了不可变auto-curried,interatee-first,data-last(自动柯里化,函数优先,数据靠后)的方法
var fp = require('lodash/fp');
 
// 加载方法类别
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// 用于较小的 browserify/rollup/webpack 捆绑包的精选方法。
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

Vue 组件内使用

首先在babel.config.js里加入

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    'lodash'
  ]
};

 组件内调用

import _ from 'lodash';

3. 常用方法汇总

使用 _ 下划线表示了lodash的对象,类似于jquery的$ 

3.1 数组方法

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

将数组(array)拆分成多个 size 长度的区块,并将这些区块组成一个新数组。 如果array 无法被分割成全部等长的区块,那么最后剩余的元素将组成一个区块。

返回一个包含拆分区块的新数组(注:相当于一个二维数组)。

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

创建一个新数组,包含原数组中所有的非假值元素。例如falsenull0""undefined, 和 NaN 都是被认为是“假值”。

返回值

返回过滤掉假值的新数组。

例子

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

_.concat(array, [values])

创建一个新数组,将array与任何数组 或 值连接在一起。

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

_.difference(array, [values])

创建一个具有唯一array值的数组,每个值不包含在其他给定的数组中。(注:即创建一个新数组,这个数组中的值,为第一个数字(array 参数)排除了给定数组中的值。)

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

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

创建一个切片数组,去除array前面的n个元素。(n默认值为1。)

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

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

使用 value 值来填充(替换) array,从start位置开始, 到end位置结束(但不包含end位置)。

参数

  1. array (Array): 要填充改变的数组。
  2. value (*): 填充给 array 的值。
  3. [start=0] (number): 开始位置(默认0)。
  4. [end=array.length] (number):结束位置(默认array.length)。
var array = [1, 2, 3];
 
_.fill(array, 'a');
console.log(array);
// => ['a', 'a', 'a']
 
_.fill(Array(3), 2);
// => [2, 2, 2]
 
_.fill([4, 6, 8, 10], '*', 1, 3);
// => [4, '*', '*', 10]

_.findIndex(array, [predicate=_.identity], [fromIndex=0])

该方法类似_.find,区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值(index),而不是元素本身。

var users = [
  { 'user': 'barney',  'active': false },
  { 'user': 'fred',    'active': false },
  { 'user': 'pebbles', 'active': true }
];
 
_.findIndex(users, function(o) { return o.user == 'barney'; });
// => 0
 
// The `_.matches` iteratee shorthand.
_.findIndex(users, { 'user': 'fred', 'active': false });
// => 1
 
// The `_.matchesProperty` iteratee shorthand.
_.findIndex(users, ['active', false]);
// => 0
 
// The `_.property` iteratee shorthand.
_.findIndex(users, 'active');
// => 2

_.flatten(array)

减少一级array嵌套深度。

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

_.flattenDeep(array)

array递归为一维数组。

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

_.fromPairs(pairs)

这个方法返回一个由键值对pairs构成的对象。

_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }

_.initial(array)

获取数组array中除了最后一个元素之外的所有元素(注:去除数组array中的最后一个元素)。

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

_.intersection([arrays])

创建唯一值的数组,这个数组包含所有给定数组都包含的元素 (取其交集)
 

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

_.nth(array, [n=0])

获取array数组的第n个元素。如果n为负数,则返回从数组结尾开始的第n个元素。

var array = ['a', 'b', 'c', 'd'];
 
_.nth(array, 1);
// => 'b'
 
_.nth(array, -2);
// => 'c';

_.pull(array, [values])

移除数组array中所有和给定值相等的元素

var array = [1, 2, 3, 1, 2, 3];
 
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

_.pullAll(array, values)

这个方法类似_.pull,区别是这个方法接收一个要移除值的数组。

var array = [1, 2, 3, 1, 2, 3];
 
_.pullAll(array, [2, 3]);
console.log(array);
// => [1, 1]

_.remove(array, [predicate=_.identity])

移除数组中predicate(断言)返回为真值的所有元素,并返回移除元素组成的数组。predicate(断言) 会传入3个参数: (value, index, array)

var array = [1, 2, 3, 4];
var evens = _.remove(array, function(n) {
  return n % 2 == 0;
});
 
console.log(array);
// => [1, 3]
 
console.log(evens);
// => [2, 4]

_.reverse(array)

反转array,使得第一个元素变为最后一个元素,第二个元素变为倒数第二个元素,依次类推。

var array = [1, 2, 3];
 
_.reverse(array);
// => [3, 2, 1]
 
console.log(array);
// => [3, 2, 1]

_.sortedUniq(array)

 返回一个新的不重复的数组。

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

_.sortedUniqBy(array, [iteratee])

 返回一个新的不重复的数组。

_.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
// => [1.1, 2.3]

_.tail(array)

获取除了array数组第一个元素以外的全部元素。

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

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

返回 array 数组的切片(从起始元素开始n个元素)。

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

创建一个数组切片,从array数组的最后一个元素开始提取n个元素。

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

_.zip([arrays])

创建一个分组元素的数组,数组的第一个元素包含所有给定数组的第一个元素,数组的第二个元素包含所有给定数组的第二个元素,以此类推。

_.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]

_.zipObject([props=[]], [values=[]])

它接受2个数组,第一个数组中的值作为属性标识符(属性名),第二个数组中的值作为相应的属性值。

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

3.2 集合方法

_.forEach(collection, [iteratee=_.identity])

_([1, 2]).forEach(function(value) {
  console.log(value);
});
// => Logs `1` then `2`.
 
_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key);
});
// => Logs 'a' then 'b' (iteration order is not guaranteed).

_.forEachRight(collection, [iteratee=_.identity])

这个方法类似 _.forEach,不同之处在于,_.forEachRight 是从右到左遍历集合中每一个元素的。

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

_.every(collection, [predicate=_.identity])

如果所有元素经 predicate(断言函数) 检查后都都返回真值,那么就返回true,否则返回 false 

和es6中every相同

_.every([true, 1, null, 'yes'], Boolean);
// => false
 
var users = [
  { 'user': 'barney', 'age': 36, 'active': false },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
// The `_.matches` iteratee shorthand.
_.every(users, { 'user': 'barney', 'active': false });
// => false
 
// The `_.matchesProperty` iteratee shorthand.
_.every(users, ['active', false]);
// => true
 
// The `_.property` iteratee shorthand.
_.every(users, 'active');
// => false

_.filter(collection, [predicate=_.identity])

遍历 collection(集合)元素,返回 predicate(断言函数)返回真值 的所有元素的数组。 predicate(断言函数)调用三个参数:(value, index|key, collection)

var users = [
  { 'user': 'barney', 'age': 36, 'active': true },
  { 'user': 'fred',   'age': 40, 'active': false }
];
 
_.filter(users, function(o) { return !o.active; });
// => objects for ['fred']
 
// The `_.matches` iteratee shorthand.
_.filter(users, { 'age': 36, 'active': true });
// => objects for ['barney']
 
// The `_.matchesProperty` iteratee shorthand.
_.filter(users, ['active', false]);
// => objects for ['fred']
 
// The `_.property` iteratee shorthand.
_.filter(users, 'active');
// => objects for ['barney']

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

通过遍历,返回累加后的值, 每次返回的值作为下次迭代使用,第三个参数作为前一个函数的第一个参数,可以理解为初始值。

_.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'] } (无法保证遍历的顺序)

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

排序! 指定 iteratee(迭代函数)结果如何排序。 如果没指定 orders(排序),所有值以升序排序。 否则,指定为"desc" 降序,或者指定为 "asc" 升序,排序对应值。

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// 以 `user` 升序排序 再  `age` 以降序排序。
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

_.sample(collection)

返回随机元素。

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

_.groupBy(collection, [iteratee=_.identity])

创建一个对象,key 是 iteratee 遍历 collection(集合) 中的每个元素返回的结果。 分组值的顺序是由他们出现在 collection(集合) 中的顺序确定的。每个键对应的值负责生成 key 的元素组成的数组。iteratee 调用 1 个参数: (value)

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

_.groupBy([{'id':1,'a':'one'}, {'id':2,'a':'two'}, {'id':3,'a':'three'}], 'id')
// => {
  '1': [ { id: 1, a: 'one' } ],
  '2': [ { id: 2, a: 'two' } ],
  '3': [ { id: 3, a: 'three' } ]
}

_.keyBy(collection, [iteratee=_.identity])

创建一个对象组成, key(键) 是 collection(集合)中的每个元素经过 iteratee(迭代函数) 处理后返回的结果。 每个 key(键)对应的值是生成key(键)的最后一个元素。iteratee(迭代函数)调用1个参数:(value)

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

_.keyBy([{'id':1,'a':'one'}, {'id':2,'a':'two'}, {'id':3,'a':'three'}], 'id')
// => 注意结果与groupBy的区别
{
  '1': { id: 1, a: 'one' },
  '2': { id: 2, a: 'two' },
  '3': { id: 3, a: 'three' }
}

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

如果找到 value 返回 true, 否则返回 false

_.includes([1, 2, 3], 1);
// => true
 
_.includes([1, 2, 3], 1, 2);
// => false
 
_.includes({ 'user': 'fred', 'age': 40 }, 'fred');
// => true
 
_.includes('pebbles', 'eb');
// => true

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

获得 n 个随机元素

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

_.shuffle(collection)

返回打乱的新数组。

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

_.now()

返回当前时间戳

_.size(collection)

返回collection(集合)的长度,如果集合是类数组或字符串,返回其 length ;如果集合是对象,返回其可枚举属性的个数。

_.size([1, 2, 3]);
// => 3
 
_.size({ 'a': 1, 'b': 2 });
// => 2
 
_.size('pebbles');
// => 7

_.some(collection, [predicate=_.identity])

通过 predicate(断言函数) 检查collection(集合)中的元素是否存在 任意 truthy(真值)的元素,一旦 predicate(断言函数) 返回 truthy(真值),遍历就停止。 predicate 调用3个参数:(value, index|key, collection)

_.some([null, 0, 'yes', false], Boolean);
// => true
 
var users = [
  { 'user': 'barney', 'active': true },
  { 'user': 'fred',   'active': false }
];
 
// The `_.matches` iteratee shorthand.
_.some(users, { 'user': 'barney', 'active': false });
// => false
 
// The `_.matchesProperty` iteratee shorthand.
_.some(users, ['active', false]);
// => true
 
// The `_.property` iteratee shorthand.
_.some(users, 'active');
// => true

3.3 函数方法

_.after(n, func)

此方法创建一个函数,当他被调用n或更多次之后将马上触发

let a = 20;
let done = _.after(5, function() {
 console.log(a++)
})
for(let i=0;i< 10 ; i++) {
  console.log(i);
  done();
}

// 结果 
0 1 2 3 4 20 5 21 6 22 7 23 8 24 9 25

_.before(n, func)

限制执行  创建一个调用func的函数,通过this绑定和创建函数的参数调用func,调用次数不超过 n 次。 之后再调用这个函数,将返回一次最后调用func的结果。

_.curry(func, [arity=func.length])

返回新的柯里化(curry)函数。

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]
 
// Curried with placeholders.
curried(1)(_, 3)(2);
// => [1, 2, 3]

_.debounce(func, [wait=0], [options={}])

防抖动   简单点来说,在一定时间内函数只执行一次。

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));

_.delay(func, wait, [args])

延迟 wait 毫秒后调用 func。 调用时,任何附加的参数会传给func

_.delay(function(text) {
  console.log(text);
}, 1000, 'later');
// => 一秒后输出 'later'。

_.once(func)

创建一个只能调用 func 一次的函数。 重复调用返回第一次调用的结果。

var initialize = _.once(createApplication);
initialize();
initialize();
// `initialize` 只能调用 `createApplication` 一次。

_.throttle(func, [wait=0], [options={}])

创建一个节流函数

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
 
// 点击后就调用 `renewToken`,但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
 
// 取消一个 trailing 的节流调用。
jQuery(window).on('popstate', throttled.cancel);

3.4 语言相关

_.castArray(value)

如果 value 不是数组, 那么强制转为数组。

_.castArray(1);
// => [1]
 
_.castArray({ 'a': 1 });
// => [{ 'a': 1 }]
 
_.castArray('abc');
// => ['abc']
 
_.castArray(null);
// => [null]
 
_.castArray(undefined);
// => [undefined]
 
_.castArray();
// => []
 
var array = [1, 2, 3];
console.log(_.castArray(array) === array);
// => true

_.clone(value)

创建一个 value 的浅拷贝。

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

_.cloneDeep(value)

深拷贝

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

_.isEmpty(value)

检查 value 是否为一个空对象,集合,映射或者set。 判断的依据是除非是有枚举属性的对象,length 大于 0 的 arguments object, array, string 或类jquery选择器。

对象如果被认为为空,那么他们没有自己的可枚举属性的对象。

类数组值,比如arguments对象,array,buffer,string或者类jQuery集合的length 为 0,被认为是空。类似的,map(映射)和set 的size 为 0,被认为是空。

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

_.isNil(value)

检查 value 是否是 null 或者 undefined

_.isNil(null);
// => true
 
_.isNil(void 0);
// => true
 
_.isNil(NaN);
// => false

3.5 数学相关

  • _.add
  • _.ceil
  • _.divide
  • _.floor
  • _.max
  • _.maxBy
  • _.mean
  • _.meanBy
  • _.min
  • _.minBy
  • _.multiply
  • _.round
  • _.subtract
  • _.sum
  • _.sumBy

_.random([lower=0], [upper=1], [floating])

产生一个包括 lower 与 upper 之间的数。 如果只提供一个参数返回一个0到提供数之间的数。 如果 floating 设为 true,或者 lower 或 upper 是浮点数,结果返回浮点数。

_.random(0, 5);
// =>  0 and 5 之间数字
 
_.random(5);
// =>  0 and 5 之间数字
 
_.random(5, true);
// =>  0 and 5 的小数
 
_.random(1.2, 5.2);
// =>  1.2 and 5.2  小数

3.6 对象操作

_.assign(object, [sources])

分配来源对象的可枚举属性到目标对象上。

function Foo() {
  this.a = 1;
}
 
function Bar() {
  this.c = 3;
}
 
Foo.prototype.b = 2;
Bar.prototype.d = 4;
 
_.assign({ 'a': 0 }, new Foo, new Bar);
// => { 'a': 1, 'c': 3 }

_.has(object, path)

检查参数 path 是否是object对象的直接属性。

var object = { 'a': { 'b': 2 } };
var other = _.create({ 'a': _.create({ 'b': 2 }) });
 
_.has(object, 'a');
// => true
 
_.has(object, 'a.b');
// => true
 
_.has(object, ['a', 'b']);
// => true
 
_.has(other, 'a');
// => false

3.7 字符串操作

_.camelCase([string=''])

转换字符串string为驼峰写法。

_.camelCase('Foo Bar');
// => 'fooBar'


_.camelCase('foo_bar');
// => 'fooBar'
 
_.camelCase('--foo-bar--');
// => 'fooBar'
 
_.camelCase('__FOO_BAR__');
// => 'fooBar'

_.capitalize([string=''])

转换字符串string首字母为大写,剩下为小写。

_.capitalize('FRED');
// => 'Fred'

_.lowerCase([string=''])

转换字符串string以空格分开单词,并转换为小写。

_.lowerCase('--Foo-Bar--');
// => 'foo bar'
 
_.lowerCase('fooBar');
// => 'foo bar'
 
_.lowerCase('__FOO_BAR__');
// => 'foo bar'

_.lowerFirst([string=''])

转换字符串string的首字母为小写。

_.lowerFirst('Fred');
// => 'fred'
 
_.lowerFirst('FRED');
// => 'fRED'

_.trim([string=''], [chars=whitespace])

string字符串中移除前面和后面的 空格 或 指定的字符。

_.trim('  abc  ');
// => 'abc'
 
_.trim('-_-abc-_-', '_-');
// => 'abc'
 
_.map(['  foo  ', '  bar  '], _.trim);
// => ['foo', 'bar']

_.words([string=''], [pattern])

拆分字符串string中的词为数组 。

_.words('fred, barney, & pebbles');
// => ['fred', 'barney', 'pebbles']
 
_.words('fred, barney, & pebbles', /[^, ]+/g);
// => ['fred', 'barney', '&', 'pebbles']

官方文档地址: https://www.lodashjs.com/

Captcha Code

0 笔记

分享笔记

Inline Feedbacks
View all notes