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']]
创建一个新数组,包含原数组中所有的非假值元素。例如false
, null
, 0
, ""
, 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
位置)。
参数
array
(Array): 要填充改变的数组。value
(*): 填充给array
的值。[start=0]
(number): 开始位置(默认0)。[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/
分享笔记