赖同学


  • 首页

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 留言

  • 搜索

Lodash-API

发表于 February 26, 2019|分类于 JavaScript工具库|阅读次数: –
字数统计: 1463|阅读时间: 8 min

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

Lodash 提供的辅助函数主要分成下面几类,官方文档

  • 'Array:适用于数组类型,比如填充数据、查找元素、数组分片等操作'
  • 'Collection:适用于数组和对象类型,部分用于字符串,比如分组、查找、过滤等操作'
  • 'Function:适用于函数类型,比如节流、延迟、缓存、设置钩子等操作'
  • 'Lang:普遍用于各种类型,常用语类型判断和类型转换'
  • 'Math:适用于数值类型,常用语执行数学运算'
  • 'Number:适用于生成随机数,比较数值与数值区间的关系'
  • 'Object:适用于对象类型,常用于对象的创建、扩展、类型转换、检索和集合等操作'
  • 'Seq:常用语创建链式调用,提高执行性能(惰性计算)'
  • 'String:适用于字符串类型'

lodash/fp 模块提供了更接近函数式编程的开发方式,其内部的函数经过包装,具有 immutable、auto-curried、iteratee-first、data-last(官方介绍)等特点。Lodash 在 GitHub Wiki 中对lodash/fp 的特点做了如下概述:

  • 'Fixed Arity:固化参数个数,便于柯里化'
  • 'Rearragned Arguments :重新调用参数位置,便于函数之间的聚合'
  • 'Capped Iteratee Argument:封装 Iteratee 参数'

使用方式

Array

_.chunk

创建一个包含元素的数组,该元素被分成大小相同的组。如果数组不能被评价分割,那么最后的块就是剩下的元素。

语法:

_.chunk(array,[size])

参数:

array(Array): 目标数组

[size=1](number): 每一块的长度

返回:

(Array): 新的数组块

_.chunk([1, 2, 3, 4, 5, 6], 2)
// [[1,2],[3,4],[5,6]]
_.chunk([1, 2, 3, 4, 5, 6], 5)
// [[1,2,3,4,5],[6]]

_.compact

创建一个删除所有 falsey(也叫做 falsy , 虚值) 的数组。false、null、0、""、undefined和NaN是falsey。

关于 Falsy

语法:

_.compact(array)

参数:

array(Array): 目标数组

返回:

(Array): 返回筛选好值后的数组

_.compact([false, null, 0, "", undefined, 1, 3, 4, 5, NaN])
// [1,3,4,5]

_.concat

创建一个新的数组,将数组与其他数组或者是值连接起来

语法:

_.concat(array,[values])

参数:

array(Array): 目标数组

[values](...*): 连接后的值,可以是任何类型

返回:

(Array): 返回新的连接数组

_.concat([false, null, 0, "", undefined, 1, 3, 4, 5, NaN], [2], null, null, {
    a: 2
})
// [false, null, 0, "", undefined, 1, 3, 4, 5, NaN, 2, null, null, {a:2}]

_.difference

创建不包含在其他给定数组中的数组值的数组,用于相等比较。结果的值的顺序和引用有第一个数组决定。

语法:

_.difference(array,[values])

参数:

array(Array): 目标数组

[values](... Array): 要排除的值

返回:

(Array): 返回筛选后的新数组

_.difference([false, null, 0, "", undefined, 1, 3, 4, 5, NaN], [3], [null], [null], [{
    a: 2
}])
// [false, 0, "", undefined, 1, 4, 5, NaN]

_.differenceBy

这个 Api 跟上面不同之处在于它接受 iteratee , iteratee 为数组中的每个元素和值的调用,以生成比较它们的标准。结果值的顺序和引用还是由第一个数组决定。

语法:

_.differenceBy(array,[values],[iteratee=_.identity])

参数:

array(Array): 目标数组

[values](... Array): 要排除的值

[iteratee=_.identity](Function): iteratee 调用每个元素

返回:

(Array): 返回筛选后的新数组

_.differenceBy([4.6, 1.2, 3.3], [2.1], [3.2], Math.floor)
// [4.6,1.2]
_.differenceBy([{
    'x': 2
}, {
    'y': 3
}, {
    'x': 1
}], [{
    'x': 1
}], 'y')
//[{'y':3}]
_.differenceBy([{
    'x': 2
}, {
    'y': 3
}, {
    'x': 1
}], [{
    'x': 1
}], 'x')
//[{'x':2},{'y':3}]

_.drop

创建一个数组切片,从开始删除 n 个元素。

语法:

_.drop(array,[n=1])

参数:

array(Array): 目标数组

[n=1](number): 要删除的元素的数量

返回:

(Array): 返回数组的切片

_.drop([1, 2, 3, 4, 5], -1) // [1,2,3,4,5]
_.drop([1, 2, 3, 4, 5], 0) // [1,2,3,4,5]
_.drop([1, 2, 3, 4, 5], 1) // [2,3,4,5]
_.drop([1, 2, 3, 4, 5], 2) // [3,4,5]
_.drop([1, 2, 3, 4, 5], 3) // [4,5]
_.drop([1, 2, 3, 4, 5], 4) // [5]
_.drop([1, 2, 3, 4, 5], 5) // []
_.drop([1, 2, 3, 4, 5], 6) // []

_.dropRight

与 ._drop 相似,创建一个数组切片,不同的是从数组结尾开始删除元素

语法:

_.dropRight(array,[n=1])

参数:

array(Array): 目标数组

[n=1](number): 要删除的元素的数量

返回:

(Array): 返回数组的切片

_.dropRight([1, 2, 3, 4, 5], -1) // [1,2,3,4,5]
_.dropRight([1, 2, 3, 4, 5], 0) // [1,2,3,4,5]
_.dropRight([1, 2, 3, 4, 5], 1) // [1,2,3,4]
_.dropRight([1, 2, 3, 4, 5], 2) // [1,2,3]
_.dropRight([1, 2, 3, 4, 5], 3) // [1,2]
_.dropRight([1, 2, 3, 4, 5], 4) // [1]
_.dropRight([1, 2, 3, 4, 5], 5) // []
_.dropRight([1, 2, 3, 4, 5], 6) // []

_.dropRightWhile

创建一个数组切片,从末尾丢弃掉一些元素。被丢弃的元素是从末尾开始循环的,直到 predicate 返回 falsey . predicate 函数有三个参数:value, index, array

语法:

_.dropRightWhile(array,[predicate=_.identity])

参数:

array(Array): 目标数组

[predicate=_.identity](Function): 每次迭代要调用的函数

返回:

(Array): 返回数组的切片

var users = [{
        'user': 'barney',
        'active': true
    },
    {
        'user': 'fred',
        'active': false
    },
    {
        'user': 'pebbles',
        'active': false,
        'haha': 1
    },
];
_.dropRightWhile(users, function(o) {
    return !o.active
})
//[{ 'user': 'barney', 'active': true }]
_.dropRightWhile(users, function(o) {
    return o.active
})
//[{ 'user': 'barney', 'active': true },{ 'user': 'fred', 'active': false },{ 'user': 'pebbles', 'active': false,'haha':1 }]
_.dropRightWhile(users, {
    'user': 'pebbles',
    'active': false
})
//[{ 'user': 'barney', 'active': true },{ 'user': 'fred', 'active': false }]
_.dropRightWhile(users, ['active', false])
//[{ 'user': 'barney', 'active': true }]
_.dropRightWhile(users, 'haha')
//[{ 'user': 'barney', 'active': true },{ 'user': 'fred', 'active': false }]

_.dropWhile

创建一个数组切片,从开头丢弃掉一些元素。被丢弃的元素是从开头开始循环的,直到 predicate 返回 falsey . predicate 函数有三个参数:value, index, array

语法:

_.dropWhile(array,[predicate=_.identity])

参数:

array(Array): 目标数组

[predicate=_.identity](Function): 每次迭代要调用的函数

返回:

(Array): 返回数组的切片

var users = [{
        'user': 'barney',
        'active': true
    },
    {
        'user': 'fred',
        'active': false
    },
    {
        'user': 'pebbles',
        'active': false,
        'haha': 1
    },
];
_.dropWhile(users, function(o) {
    return !o.active
})
//[{ 'user': 'barney', 'active': true },{ 'user': 'fred', 'active': false },{ 'user': 'pebbles', 'active': false,'haha':1 }]
_.dropWhile(users, function(o) {
    return o.active
})
//[{ 'user': 'fred', 'active': false },{ 'user': 'pebbles', 'active': false,'haha':1 }]
_.dropWhile(users, {
    'user': 'barney',
    'active': false
})
//[{ 'user': 'barney', 'active': true },{ 'user': 'fred', 'active': false },{ 'user': 'pebbles', 'active': false,'haha':1 }]
_.dropWhile(users, ['active', true])
//[{ 'user': 'fred', 'active': false },{ 'user': 'pebbles', 'active': false,'haha':1 }]
_.dropWhile(users, 'user')
//[]

参考链接

Lodash

Lodash
JavaScript设计模式——组合模式
类属性中的箭头函数可能不如我们想象的那么伟大
  • 文章目录
  • 站点概览
  1. 1.Array
    1. 1._.chunk
    2. 2._.compact
    3. 3._.concat
    4. 4._.difference
    5. 5._.differenceBy
    6. 6._.drop
    7. 7._.dropRight
    8. 8._.dropRightWhile
    9. 9._.dropWhile
  2. 2.参考链接
© 2018 — 2023赖彬鸿
1.6k
载入天数...载入时分秒...
0%