介绍

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]

函数式编程-Lodash库学习相关推荐

翻译连载 | 附录 C：函数式编程函数库－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
为什么80%的码农都做不了架构师?>>> 原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS> ...
redux 函数式组件_如何从函数式编程的角度学习Redux
redux 函数式组件 Discover Functional JavaScript was named one of the best new Functional Programming book ...
Socket网络编程--Libev库学习(3)
这一小节继续讲解各个观察器(Watcher). 上一小节已经讲解了ev_io(IO可读可写观察器),ev_stat(文件属性变化观察器),ev_signal(信号处理观察器),ev_timer(定时器 ...
Modern C++ 学习笔记——C++函数式编程
往期精彩: Modern C++ 学习笔记--易用性改进篇 Modern C++ 学习笔记 -- 右值.移动篇 Modern C++ 学习笔记 -- 智能指针篇 Modern C++ 学习笔记 -- ...
深入理解函数式编程（下）
总第540篇 2022年第057篇函数式编程是一种历史悠久的编程范式.作为演算法,它的历史可以追溯到现代计算机诞生之前的λ演算,本文希望带大家快速了解函数式编程的历史.基础技术.重要特性和实践法则 ...
全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson - <You-Dont-Know-JS>作者译者团队(排名不分先后):阿希.blueken.bruc ...
3万6千字爆肝，前端进阶不得不了解的函数式编程开发，含大量实例，手写案例，所有案例均可运行
3w6爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行认识函数式编程函数相关复习函数是一等公民高级函数函数作为参数案例 1,模拟 forEach 案例 2, ...
让JavaScript回归函数式编程的本质
JavaScript是一门被误会最深的语言,这话一点不假,我们看下它的发展历史. 1995年,Netscape要推向市场,需要一门脚本语言来配套它.是使用一门已有的语言,还是发明一门新的语言,这也不是 ...
你真的理解函数式编程吗？
大数据以及人工智能越来越流程,你是否可以轻松适应大数据编程,函数式编程在其中起着重要作用,如何从面向对象编程跳槽到函数式编程?你是否觉得函数式各种概念难于理解?本场 Chat 将为你解答.我将为你分享 ...
js函数式编程最佳实践 - 持续更新
函数式编程最佳实践学习文档函数式编程术语数组字串处理 function addString(el){return el + "0"; } var newArr = arr.m ...

函数式编程-Lodash库学习

介绍

使用

函数式编程-Lodash库学习相关推荐

最新文章

热门文章