lodash学习

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

简介

Lodash 是一个著名的 javascript 原生库，不需要引入其他第三方依赖，是一个意在提高开发者效率，提高 JS 原生方法性能的 JS 库。简单的说就是，很多方法 lodash 已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。
Lodash 使用了一个简单的 _ 符号，就像 Jquery 的 $ 一样，十分简洁。
类似的还有 Underscore.js 和 Lazy.js。

---

安装，引入和使用

1. 安装

npm i --save lodash

2. 引入

import _ from 'lodash'

3. 使用

  data() {
    return {
      arr: [1,2,3,4,5]
    }
  },

  mounted(){
    this.calc()
  },

  methods: {
    calc() {
      console.log(_.chunk(this.arr, 2));
    }
  }

方法

1. 数组类方法

1.1 _.chunk()

_.chunk(array, [size=1])：将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。 如果 array 无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。

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

1.2 _.compact()

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

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

1.3 _.concat()

_.concat(array, [values])：创建一个新数组，将 array 与任何数组 或 值连接在一起，原数组 array 不改变。

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

1.4 _.difference()

_.difference(array, [values])： 创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中；即创建一个新数组，这个数组中的值，为第一个数字（array 参数）排除了给定数组中的值。该方法使用SameValueZero做相等比较。结果值的顺序是由第一个数组中的顺序确定。

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

1.5 _.differenceBy()

_.differenceBy(array, [values],iteratee)： 这个方法类似 _.difference() ，不同点是它还要接受一个 iteratee（迭代器）， 调用 array 和 values 中的每个元素以产生比较的标准， 结果值是从第一数组中选择。

_.differenceBy([3.1, 2.2, 1.3], [4.4, 2.5], Math.floor);
// => [3.1, 1.3]
 
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]

1.6 _.differenceWith()

_.differenceWith(array, [values],comparator)： 这个方法类似 _.difference ()，不同点是它还要接受 comparator （比较器），它调用比较array，values中的元素。 结果值是从第一数组中选择。

let arr = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(arr, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

1.7 _.drop()

_.drop(array, n)： 创建一个切片数组，去除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]

1.8 _.dropRight()

_.dropRight(array, n)： 创建一个切片数组，去除array 尾部 的n个元素（n的默认值为1）。

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

1.9 _.dropRightWhile()

.dropRightWhile(array, [predicate=.identity])： 创建一个切片数组，去除 array 中从 predicate 返回假值开始到尾部的部分。predicate 会传入3个参数： (value, index, array)。

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

1.10 _.dropWhile()

.dropWhile(array, [predicate=.identity])： 创建一个切片数组，去除 arra y中从起点开始到 predicate 返回假值结束部分。predicate 会传入3个参数： (value, index, array)。

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

1.11 _.fill()

_.fill(array, value, [start=0], [end=array.length])： 使用 value 值来填充替换 array，从start位置开始, 到end位置结束（但不包含end位置）。。

let 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]

1.12 _.findIndex()

.findIndex(array, [predicate=.identity], [fromIndex=0])： 该方法类似_.find，区别是该方法返回第一个通过 predicate 判断为真值的元素的索引值index，而不是元素本身。

let 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

1.13 _.findLastIndex()

.findLastIndex(array, [predicate=.identity], [fromIndex=0])： 这个方式类似_.findIndex， 区别是它是从右到左的迭代集合array中的元素。

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

1.13 _.flatten()

_.flatten(array)： 减少一级 array 嵌套深度。

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

1.14 _.flattenDeep()

_.flattenDeep(array)： 将array递归为一维数组。。

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

1.15 _.flattenDepth()

_.flattenDepth(array, [depth=1])： 根据 depth 递归减少 array 的嵌套层级。

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

1.16 _.fromPairs()

_.fromPairs(pairs)： 与_.toPairs正好相反；这个方法返回一个由键值对pairs构成的对象。。

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

1.17 _.head()

_.head(array)： 获取数组 array 的第一个元素。

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

1.18 _.head()

_.head(array)： 获取数组 array 的第一个元素。

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

1.19 _.indexOf()

_.indexOf(array, value, [fromIndex=0])： 使用SameValueZero 等值比较，返回首次 value 在数组array中被找到的索引值； 如果 fromIndex 为负值，将从数组array尾端索引进行匹配。

_.indexOf([1, 2, 1, 2], 2);
// => 1
 
// Search from the `fromIndex`.
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

1.20 _.initial()

_.initial(array)： 获取数组array中除了最后一个元素之外的所有元素（去除数组array中的最后一个元素）。

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

1.21 _.intersection()

_.intersection([arrays])： 创建唯一值的数组，这个数组包含所有给定数组都包含的元素，使用SameValueZero进行相等性比较（可以理解为给定数组的交集）。

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

1.22 _.intersectionBy()

.intersectionBy([arrays], [iteratee=.identity])： 这个方法类似_.intersection，区别是它接受一个 iteratee 调用每一个 arrays 的每个值以产生一个值，通过产生的值进行比较。结果值是从 第一数组中 选择。iteratee 会传入一个参数：(value)。

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

1.23 _.intersectionWith()

_.intersectionWith([arrays], [comparator])： 这个方法类似_.intersection，区别是它接受一个 comparator 调用比较arrays中的元素。结果值是从第一数组中选择。comparator 会传入两个参数：(arrVal, othVal)。

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

1.24 _.join()

_.join(array, separator)： 将 array 中的所有元素转换为由 separator 分隔的字符串。

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

---

总结

Lodash 中文文档