函数式编程-Lodash库学习

介绍

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

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

使用

chunk - 对数组的切分,size代表以几个元素进行切分，默认为1

• 语法_.chunk(array, size=1)

let arr = [1,2,3,4]
const chunk = _.chunk(arr, 3)
// [ [ 1, 2, 3 ], [ 4 ] ]

compact - 剔除数组中没有意义的值，比如false, null, 0, “”, undefined 和 NaN

• 语法 _.compact(array)

const result = _.compact([false, 0, "",undefined, NaN, 'xiaozhang' , '123', {}])
console.log(result)
// [ 'xiaozhang', '123', {} ]

concat - 创建一个新的数组来保存原始数组，增加值/数组之后的结果
_.concat(array, [values])

• 语法 _.concat(array, [values])

let arr = [1,2]
const arr_new = _.concat(arr, 3, [4], [[5]], null)
arr = null; //避免内存泄漏
console.log(arr) // null
console.log(arr_new) // [ 1, 2, 3, 4, [ 5 ], null ]

difference - 大概的作用就是将array和[values]进行比较，将array中比[values]中多出的值，保存到一个新的数组中。

• 语法 _.difference(array, [values])

let arr = [1,2,3];
let values = [2,3,4];
const result = _.difference(arr, values) // 不包含values中的数据
console.log(result) // [1]

_.difference([1, 1, "1", 2, 2], [1]);
// => ["1", 2, 2]
// 只要array中比[values]中多出的值，都会返回，不管个数出现了几次

differenceBy -

• .differenceBy(array, [values], [iteratee=.identity])
  对前两个参数，分别执行第三个参数过滤，然后再比较找出array中比[values]中多出的部分，然后返回这些多余部分的原始值的一个数组。
  就拿第一个说吧，执行过滤之后是[2,1]和[2,3]，应该是返回[1]的原始值[1.2]

_.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);
// => [1.2]

// The `_.property` iteratee shorthand.
_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]

differenceWith - 通过第三个参数comparator比较前两个参数，若不满足则返回第一个参数，类似c里面的sort

• 语法 _.differenceWith(array, [values], [comparator])

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
const obj = _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
console.log(obj) // [ { x: 2, y: 1 } ]

drop - Creates a slice of array with n elements dropped from the beginning. (切分数组，前n个丢弃)

• _.drop(array, [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]

dropRight - Creates a slice of array with n elements dropped from the end.（末尾开始）
_.dropRight(array, [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]

dropRightWhile - .dropRightWhile(array, [predicate=.identity])
从右边开始裁剪数组，起点从 predicate 返回假值开始。predicate 会传入3个参数：(value, index, array)。

• 参数
  • array (Array) - 需要处理的数组
  • [predicate=_.identity] (Function|Object|string) 这个函数会在每一次迭代调用

var users = [
    { 'user': 'barney',  'active': true },
    { 'user': 'fred',    'active': false },
    { 'user': 'pebbles', 'active': false }
  ];
  
  console.log(  _.dropRightWhile(users, function(o) { return !o.active; }) )
  //[ { user: 'barney', active: true } ]
  console.log( _.dropRightWhile(users, { 'user': 'fred' }) ) // 第一个为  'user': 'pebbles' 与{ 'user': 'fred' }不想等，返回为
  /*
  [ { user: 'barney', active: true },
  { user: 'fred', active: false },
  { user: 'pebbles', active: false } ]
  */
  console.log( _.dropRightWhile(users, ['active', false])  ) //前两个为false 第三个为true，此时为false
  /*
  [ { user: 'barney', active: true } ]
  */

dropWhile - .dropWhile(array, [predicate=.identity])
裁剪数组，起点从左边开始匹配，起点从 predicate 返回假值开始。predicate 会传入3个参数：(value, index, array)。

• 同上相反

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

_.dropWhile(users, function(o) { return !o.active; });
// => 结果: ['pebbles']

// 使用了 `_.matches` 的回调处理
_.dropWhile(users, { 'user': 'barney', 'active': false });
// => 结果: ['fred', 'pebbles']

// 使用了 `_.matchesProperty` 的回调处理
_.dropWhile(users, ['active', false]);
// => 结果: ['pebbles']

// 使用了 `_.property` 的回调处理
_.dropWhile(users, 'active');
// => 结果: ['barney', 'fred', 'pebbles']

fill - 填充数据
指定 值 填充数组，从 start 到 end 的位置，但不包括 end 本身的位置。
_.fill(array, value, [start=0], [end=array.length])
注意: 这个方法会改变数组

参数

• array (Array) 需要填充的数组
• value (*) 填充的值
• [start=0] (number) 开始位置
• [end=array.length] (number) 结束位置
  返回值 (Array) - 返回数组

let array = [1, 2, 3];
_.fill(array, 'a');
console.log(array) // [ 'a', 'a', 'a' ]
console.log( _.fill(Array(3), 2) ); // [ 2, 2, 2 ]
console.log(_.fill([1,3,5,7,9], "xy2", 2,4)) // [ 1, 3, 'xy2', 'xy2', 9 ]

let arr = [{
  id: '001',
  name: 'xy1'
}, {
  id: '001', 
  name: 'xy2'
}]

_.fill(arr, {
  id: '000',
  name: 'axy2'
})
console.log(arr) // [ { id: '000', name: 'axy2' }, { id: '000', name: 'axy2' } ]

findIndex - 查找，可以根据函数规则，数组或对象
这个方法类似 _.find。除了它返回最先通过 predicate 判断为真值的元素的 index ，而不是元素本身。

参数

• array (Array) - 需要搜索的数组
• [predicate=_.identity] (Function|Object|string) - 这个函数会在每一次迭代调用

返回值 (number)

• 返回符合元素的 index，否则返回 -1。

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

console.log( _.findIndex([1, 3, 5, 7, 9], num => num>5 ) ); // 3
console.log(_.findIndex(users, item=> item.user==='pebbles')) // 2
// 使用了 `_.matchesProperty` 的回调结果
console.log( _.findIndex(users, ['active', false]) ) // 0
// 使用了 `_.property` 的回调结果
_.findIndex(users, 'active');
// => 2

findLastIndex - 与上相似，只是筛选规则，从右向左

flatten - 向上一级展平数组嵌套,这个函数的作用是将array减少一个维度。

_.flatten(array)
参数

• array (Array) - 需要展平的数组

• 返回值 (Array) - 返回展平后的新数组

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

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

flattenDeep - 递归展平 数组
_.flattenDeep(array)
参数

• array (Array) 需要展平的数组

返回值 (Array)

• 返回展平后的新数组

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

flattenDepth - 可以设定递归展开的层级
_.flattenDepth(array, [depth=1])
参数

• array (Array) - 需要展平的数组
• [depth=1] (number) - 展平的层级

返回值 (Array)

• 返回展平后的新数组

var array = [1, [2, [3, [4]], 5]];

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

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

fromPairs - 可以将数组转化为对象
_.fromPairs(pairs)
反向版 _.toPairs，这个方法返回一个由键值对构成的对象。
参数

• pairs (Array) - 键值对

返回值 (Object)

• 返回一个新对象

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

head - 别名为first, 获取第一个元素
_.head(array)
获得数组的首个元素
参数

• array (Array) - 要检索的数组

返回值 (*)

• 返回数组中的首个元素

console.log(_.head([1,2,3])) // 1
console.log(_.first([1,2,3])) // 1
console.log(_.head([{ // { name: 123 }
  name: 123
}, {
  name: 456
}]))

indexOf - 根据value，查找位置，返回下标。
_.indexOf(array, value, [fromIndex=0])
根据 value 使用 SameValueZero 等值比较返回数组中首次匹配的 index， 如果 fromIndex 为负值，将从数组尾端索引进行匹配，如果将 fromIndex 设置为 true，将使用更快的二进制检索机制。

参数

• array (Array) - 要检索的数组
• value (*) - 要检索的值
• [fromIndex=0] (number) - 需要检索的起始位置，如果为 true 将使用二进制检索方式。

返回值 (number)

• 返回匹配值的index，否则返回 -1。

示例
_.indexOf([1, 2, 1, 2], 2);
// => 1

// 使用了 `fromIndex`
_.indexOf([1, 2, 1, 2], 2, 2);
// => 3

initial - 获取数组中除了最后一个元素之外的所有元素
_.initial(array)
返回值 (Array)

• 返回没有最后一个元素的数组

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