简介

​说明​

        本文介绍JavaScript的常用工具库：lodash.js。

​官网​

中文：​​https://www.lodashjs.com/​​

英文：​​https://lodash.com/docs/​​

lodash.js简介 

​说明​

官方文档上的定义：

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：

  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数

Lodash就是这样的一个工具库，方便我们在日常的开发中对数据的操作，特别是数组和对象的各种读写等操作，比如去重，拷贝，合并，过滤，求交集，求和等等，提高开发效率。 

下载与安装

​法1：先下载后导入​

1.下载

法1：WS下载

File=> Settings=> Languages&Frameworks=> Node.js and NPM=> 右侧“+”/“-”=> 可安装/删除 库

//会直接下载到本项目文件夹里

法2：下载地址：​​Lodash 中文文档 | Lodash 中文网​​

2.导入

将lodash.js放到自己项目中 

浏览器导入方法：

<script src="lodash.js所在本项目的文件夹/lodash.js"></script>

Node.js导入方法：

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');

// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');

// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

​法2：使用在线地址​

cdn方式引入：一般使用bootcdn来直接在线引入，然后通过cdn加速文件下载访问。里边有好多文件，但只有lodash.min.js和lodash.js可用。其他比如：lodash.core.min.js都不能用。

<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.min.js"></script>

或：

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


使用综述

数组


方法



作用



示例



查



head(array)



返回array的第一个元素






last(array)



获取array最后一个元素






nth(array, n)



获取第n个元素, n可以为负数






sortedIndex(array, value)



value可以插入已排序数组array的位置，返回索引






xor([arrays])



返回多个数组的唯一值



([2,1],[2,3]) => [1,3]



findIndex(array, value)



查value, 返回第一个匹配值的索引



const f = [

  { 'user': 'barney',  'active': false },

  { 'user': 'fred',    'active': false },

  { 'user': 'pebbles', 'active': true }

];

const g = _.findIndex(f, function(o) { return o.user == 'barney'; });

console.log(g) // 0

const h = _.findIndex(f, { 'user': 'fred', 'active': false });

console.log(h) // 1



改



slice(array, [start], [end])



裁剪数组






drop(array, [n=1])



切片， n是要去除的元素个数






dropRigth(array, [n=1])



切片 去除尾部元素






take(array, [n=1])



切片 从头开始取n个元素






takeRight(array, [n=1])



切片 从尾部开始提取n个元素






chunk(array, [size])



将array拆分成多个size长度的区块



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

console.log(a)  // [['a', 'b'], ['c', 'd']] // size=2



compact(array)



返回不包含（false,null,NaN,

undefined,0,''）的真数组



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

console.log(b)  // [1, 2, 3]



concat(array, [values])



合并数组



const c = [1];

var d = _.concat(c, 2, [3], [[4]]);

console.log(d)  // [ 1, 2, 3, [ 4 ] ]



fill(array, value, [start], [end])



用value值填充数组 会改变原数组






reverse(array)



反转数组






intersection([arrays])



返回多个数组的交集






difference(array, [values])



返回非交集数组



const e = _.difference([3, 2, 1], [4, 2]);

console.log(e) // [3, 1]



union([arrays])



多个数组的并集(已去重)






uniq(array)



去重数组



const l =_.uniq([2, 1, 2]);

console.log(l) // [2, 1]



flatten(array)



减少一级array嵌套深度






flattenDeep(array)



array递归为一维数组






flattenDepth(array, [depth])



减少depth层嵌套



const i = [1, [2, [3, [4]], 5]];

const j = _.flattenDepth(i, 1);

console.log(j) // [1, 2, [3, [4]], 5]

const k = _.flattenDepth(i, 2);

console.log(k) // [1, 2, 3, [4], 5]



fromPairs(pairs)



键值对数组改为对象。



[['fred', 30]] => {'fred':30}



删



tail(array)



去除array第一个元素






initial(array)



去除array最后一个元素






pull(array, [values])



去除array中等于value的值






pullAll(array, values)



类似pull 接收values数组






pullAt(array, [indexs])



原数组上移除索引为indexs的元素






remove(array, func)



原数组上移除满足func返回条件的值






without(array, [values])



返回剔除values后的新array






打包与拆包



zip([arrays])



长度相同的数组打包



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

console.log(m) //  [['fred', 30, true], ['barney', 40, false]]



unzip(array)



对数组进行拆分（打包的反向）



([1,2,3],[4,5,6])=> [[1,4],[2,5],[3,6]]


集合


方法



作用



示例



计数



countBy(coll, func)



计数



(['one', 'two', 'three'], 'length')

=> {'3':2, '5':1}



size(coll)



数组返回元素个数，字符串返回字符长度，集合返回可遍历值个数






检查



every(coll, func)



判断是否都为真但会对空集合返回true






some(coll, func)



有真则返回true






includes(coll, value, [fromIndex])



检查value是否在collection中，fromIndex为起始位置,返回布尔值



const w = _.includes([1, 2, 3], 1);
console.log(w) //  true
const x = _.includes([1, 2, 3], 1, 2);
console.log(x) // false



过滤



filter(coll, func)



过滤 返回判断为真的新数组






reject(coll, func)



与filter相反，返回非真新数组






查找



find(coll, func)



返回第一个判断为真的第一个元素






findLast(coll, func)



类似于find，自右向左






扁平化



flatMap(coll, func)



返回扁平化后的数组



([1,2], (n)=>[n,n]) => [1,1,2,2]



flatMapDeep(coll, func)



深度扁平化



([1,2], (n)=>[[n,n]]) => [1,1,2,2]



遍历



forEach/each(coll, func)



遍历





映射


invokeMap(coll, path, [args])



调用path的方法遍历coll，args为参数



([123,456], String.property.split, '')

=> (['1','2','3'],['4','5','6'])



map(coll, func)



遍历coll后返回新的结果



function square(n) {
  return n * n;
}
 
const y = _.map([4, 8], square);
console.log(y) //  [16, 64]
 
const aa = _.map({ 'a': 4, 'b': 8 }, square);
console.log(aa) //  [16, 64]


const ab = [
  { 'user': 'barney' },
  { 'user': 'fred' }
];

const ac = _.map(ab, 'user');
console.log(ac) //  ['barney', 'fred']



排序



orderBy(coll, [func], [orders])



排序






sortBy(coll, [func])



升序排序






sample(coll)



返回随机元素






sampleSize(coll, n)



返回n个随机元素






shuffle(coll)



打乱集合顺序





收集


keyBy(coll, func)



与groupBy类似， 不过每个key为func返回的值






groupBy(coll, func)



分组聚合



(['one', 'two', 'three'], 'length')

=> {'3': ['one', 'two'], '5': ['three']}


partition(coll, [func])

创建一个分为两组的元素数组， 分别为结果为true和结果为false


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

_.partition(users, function(o) { return o.active; });
// => objects for [['fred'], ['barney', 'pebbles']]


压缩

reduce(coll, [func], [accumulator])

压缩 collection（集合）为一个值

reduceRight(coll, [func], [accumulator])

类似reduce, 自右向左

_.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {

  (result[value] || (result[value] = [])).push(key);

  return result;

}, {});

// => { '1': ['a', 'c'], '2': ['b'] }

函数


方法



作用



示例



调用次数



after(n, func)



创建一个函数，被调用n次后，执行func






before(n, func)



调用func函数次数不超过n次的函数， 超过之后返回最后一次调用的结果






限制参数



ary(func, [n])



创建一个调用func的函数, n为func参数长度






bindKey(object, key, [partials])



创建一个函数，在object[key]上通过接收partials附加参数，调用这个方法， 允许重新定义绑定函数即使它还不存在






柯里化



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



柯里化函数(笔试常考题)






curryRight(func, [arity=func.length])



柯里化函数，参数顺序自右向左






防抖与节流



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



防抖函数，func调用后等待wait毫秒后执行, options为附加参数






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



节流函数，wait秒内最多执行func一次






其他



defer(func, [args])



推迟调用， 附加参数args会传给func






delay(func, wait, [args])



延迟wait毫秒后调用func






flip(func)



翻转func参数 返回新的函数






memoize(func, [resolver])



缓存func结果






negate(predicate)



对断言函数(返回值为true/false)结果取反






once(func)



返回只能调用func一次的函数，重复调用返回第一次调用结果






overArgs(func, [transforms])



func参数为transforms的返回值






rest(func, [start])



除start外，其他参数作为数组传入， 类似于apply






spread(func, [start=0])



参数作为数组传入






unary(func)



返回一个最多接收一个参数的函数， 忽略多余参数






wrap(value, [wrapper=identity])



创建一个函数,value包装在wrapper函数的第一个参数里， 附加参数给wrapper





语言


方法



作用



示例



转为数组



castArray(value)



强制转换为数组






toArray(value)



转换value为数组






转为数字



toFinite(value)



转换为有限数字






toInteger(value)



转换为一个整数






toLength(value)



转换为可以用作数组长度的整数






toNumer(value)



转换为一个数字






toSafeInteger(value)



转换为安全整数






转为对象



toPlainObject(value)



转为普通对象






toString(value)









拷贝









clone(value)



浅拷贝






cloneDeep(value)



深拷贝






比较



conformsTo(object, source)



检查object是否符合

source_.conformsTo({'a':1}, {'a': o=>o>1})

// false






eq(value, other)



比较value与other值是否相等






gt(value, other)



大于






lt(value, other)



小于






lte(v, o)



小于等于






gte(value, other)



大于等于






isEqual(value, other)



深比较值完全相等 不比较类型






判断类型



isArguments(value)



value是否是类arguments对象






isArray(value)



判断是否为array






isArrayBuffer(value)









isBoolean(value)









isBuffer(value)









isDate(value)









isElement(value)









isEmpty(value)



检查 value 是否为一个空对象，集合，映射或者set






isArrayLike(value)



是否是类数组






isArrayLikeObject(value)



是否是类数组对象






isFinite(value)



是否是有限数值






isFunction(value)









isInteger(value)









isLength(value)



检查 value 是否为有效的类数组长度






isMap(value)



检查 value 是否为一个 Map 对象。






isNaN(value)









isNative(value)



是否是一个原生函数






isNil(value)



是否是null或undefined






isNull(value)



是否是null






isNumber(value)









isString(value)









isSymbol(value)









isUndefined(value)









isSet(value)



检查 value 是否是一个Set对象。






isObject(value)









isObjectLike(value)



是否是类对象






isPlainObject(value)



是否是普通对象。 也就是说该对象由 Object 构造函数创建，或者 [[Prototype]] 为 null






isRegExp(value)



是否为RegExp对象





数学


方法



作用



示例



舍入



ceil(number, [precision])



按precision（精度）向上舍入number






floor(number, [precision])



向下舍入number






round(number, [precision])



四舍五入






sumBy(array, func)



按precision（精度）向上舍入number






其他



add(augend, addend)



两数相加






divide()



两数相除






max(array)









maxBy(array, func)



func为排序标准 对数组中对象求最值






mean(array)



平均值






meanBy(array, func)



数组中对象求均值






min(array)









minBy(array, func)









multiply(a,b)



求a,b乘积






subtract(a,b)



两数相减






sum(array)



总和





数字


方法



作用



示例



clamp(number, [lower], upper)



返回限制在 lower 和 upper 之间的值






inRange(number, [start], end)



返回n是否在start与end之间，但不包括end






random([lower], [upper], [floating])



区间内的随机数





对象


方法



作用



示例



分配









assign(object,[sources])



分配source对象的可枚举属性到object上






assignIn(object,[sources])



类似于assign，会遍历源对象






其他



at(object, [paths])



创建一个数组，值来自object的paths路径对应的值






create(protoptype, [properties])



返回继承protoptype对象的新对象






defaults(object, [sources])



分配来源对象的可枚举属性到目标对象所有解析为 undefined 的属性上。 来源对象从左到右应用。 一旦设置了相同属性的值，后续的将被忽略掉。






findKey(object, [func])



返回最先被判断为真的元素key






findLastKey(object, [func])



类似于findKey, 反向遍历






forIn(object, [func])



遍历object






forInRight(object, [func])



分配source对象的可枚举属性到object上





字符串


方法



作用



示例



大小写



camelCase(string)



字符串转为驼峰写法






kebabCase(string)



以-分开单词并小写kebabCase






lowerCase(string)



以空格分开单词并小写






upperCase(string)



以空格分开单词并大写






snakeCase(string)



以_分开单词并小写snakeCase






startCase(string)



首字母大写并以空格分隔单词,原string为全大写则不变'Foo Bar'






lowerFirst(string)



string首字母小写






upperFirst(string)



string首字母大写






capitalize(string)



字符串首字母转为大写，其他为小写






deburr(string)



转换string中的字母为基本的拉丁字母，去除变音标记






toLower(string)



整个string转为小写






toUpper(string)



全大写






移除



trim(string, [chars])



移除前面或后面的空格或指定字符






trimEnd(string, [chars])



移除后面的空格或指定字符






trimStart(string, [chars])



移除前面的空格或指定字符






truncate(string, [options={}])



超出options.length截断字符串, 截断后超出部分显示options.omission（默认为...）






转换HTML



unescape(string)



转换string字符串中的 HTML 实体 &, <, >, ", &






其他



startsWith(string, target, position)



检查字符串string是否以 target 开头






endsWith(string, target, position)



检查字符串string是否以给定的target字符串结尾






escape(string)



转义string中的"&", "<", ">", '"', "'", 和 "`" 字符为HTML实体字符






escapeRegExp(string)



转义 RegExp 字符串中特殊的字符 "^", "$", "", ".", "*", "+", "?", "(", ")", "[", "]", "{", "}", 和 "|" '.






pad(string, length, [chars=''])



如果string长度小于length，则从左右侧填充chars字符






padEnd(string,lenght,[chars=''])



右侧填充






padStart(string,length,[chars=''])



左侧填充






repeat(string, [n=1])



重复n次给定字符串






split(string, separator, limit)



拆分






replace(string, pattern, replacement)



替换string字符串中匹配的pattern为给定的replacement






words(string, pattern)



拆分string中的词为数组





template

template(string, options)
// 创建一个预编译模板方法，可以插入数据到模板中 "interpolate" 分隔符相应的位置。 HTML会在 "escape" 分隔符中转换为相应实体。 在 "evaluate" 分隔符中允许执行JavaScript代码。 在模板中可以自由访问变量。 如果设置了选项对象，则会优先覆盖 _.templateSettings 的值。

// 使用 "interpolate" 分隔符创建编译模板
var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'
 
// 使用 HTML "escape" 转义数据的值
var compiled = _.template('<b><%- value %></b>');
compiled({ 'value': '<script>' });
// => '<b><script></b>'
 
// 使用 "evaluate" 分隔符执行 JavaScript 和 生成HTML代码
var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
 
// 在 "evaluate" 分隔符中使用内部的 `print` 函数
var compiled = _.template('<% print("hello " + user); %>!');
compiled({ 'user': 'barney' });
// => 'hello barney!'
 
// 使用 ES 分隔符代替默认的 "interpolate" 分隔符
var compiled = _.template('hello ${ user }!');
compiled({ 'user': 'pebbles' });
// => 'hello pebbles!'
 
// 使用自定义的模板分隔符
_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'
 
// 使用反斜杠符号作为纯文本处理
var compiled = _.template('<%= "\\<%- value %\\>" %>');
compiled({ 'value': 'ignored' });
// => '<%- value %>'
 
// 使用 `imports` 选项导入 `jq` 作为 `jQuery` 的别名
var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'
 
// 使用 `sourceURL` 选项指定模板的来源URL
var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
compiled(data);
// => 在开发工具的 Sources 选项卡 或 Resources 面板中找到 "greeting.jst"
 
// 使用 `variable` 选项确保在编译模板中不声明变量
var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
compiled.source;
// => function(data) {
//   var __t, __p = '';
//   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
//   return __p;
// }
 
// 使用 `source` 特性内联编译模板
// 便以查看行号、错误信息、堆栈
fs.writeFileSync(path.join(cwd, 'jst.js'), '\
  var JST = {\
    "main": ' + _.template(mainText).source + '\
  };\
');

其他网址


lodash.js (v0.1.0) BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务