前端js库，lodash的基本函数的使用

官方文档上的定义：Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库

中文官网：Lodash 简介 | Lodash 中文文档 | Lodash 中文网Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。https://www.lodashjs.com/

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

• 遍历 array、object 和 string

• 对值进行操作和检测

• 创建符合功能的函数

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

两种使用方式：

1.CDN的方式引入，这个比较简单，只需要下载js文件，再引入即可，或者引入在线地址

下载地址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

​

​

注意：只有后缀是lodash.js 或者lodash.min.js才可以通过CDN方式引入，其他的js相当一部分方法会报错 *** is not defined

2.项目中通过npm下载

$ npm i -g npm //全局下载npm工具 
$ npm i --save lodash //下载lodash到本地项目中 ​ 
import _ from 'lodash' //引入到项目中

数组API的使用：举几个常用api

1、 _.chunk(array,[size=1]) 数组切割

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

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

2、 _.cloneDeep(value) 深拷贝

这个方法类似_.clone，除了它会递归拷贝 value。（注：也叫深拷贝）。

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

3、 _compact(array)过滤假值

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

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

4、 remove(array,[predicate=.identity]) 移除数组对象中指定元素”

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

Note: 和.filter不同, 这个方法会改变数组 array。使用.pull来根据提供的value值从数组中移除元素。

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]

5.unionWith([arrays], [comparator]) “数组对象合并去重” 这个方法类似.union， 除了它接受一个 comparator 调用比较arrays数组的每一个元素。 comparator 调用时会传入2个参数： (arrVal, othVal)。

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

6.map(collection, [iteratee=.identity]) “过滤” 创建一个数组， value（值） 是 iteratee（迭代函数）遍历 collection（集合）中的每个元素后返回的结果。 iteratee（迭代函数）调用3个参数： (value, index|key, collection).

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' }
];
 
// The `_.property` iteratee shorthand.
_.map(users, 'user');
// => ['barney', 'fred']

7.uniqBy(array, [iteratee=.identity]) “数组对象去重” 这个方法类似_.uniq ，除了它接受一个 iteratee （迭代函数），调用每一个数组（array）的每个元素以产生唯一性计算的标准。iteratee 调用时会传入一个参数：(value)。

_.uniqBy([2.1, 1.2, 2.3], Math.floor); 
// => [2.1, 1.2] 
// The `_.property` iteratee shorthand. _.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'); 
// => [{ 'x': 1 }, { 'x': 2 }]

8_.pullAll(array, values) “移除数组指定元素”

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

Note: 不同于_.difference, 这个方法会改变数组 array。

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

9_.pullAllWith(array, values, [comparator]) “移除数组对象指定元素”

这个方法类似.pull，区别是这个方法接收一个要移除值的数组。 Note: 不同于.difference, 这个方法会改变数组 array。

var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }]; _.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);
 console.log(array); 
// => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]

 以上只是几个简单的函数的使用，更多的可查阅官方文档。