Lodash常用API笔记

Yujiaao 发布于2019-08-20 15:12 / 3413人阅读

摘要：中文文档目前我只找到了版本，现在已经更新到了，好多文档已经过期。而且中太多，有时候常用的几个我总是记不住名字，在这里贴出来，方便自己和大家。原生用法直接使用的根据条件去除某个元素。

lodash中文文档目前我只找到了3.10.x版本，现在lodash已经更新到4.17.x了，好多文档已经过期。而且lodash中api太多，有时候常用的几个我总是记不住名字，在这里贴出来，方便自己和大家。

原生用法

直接使用的API

_.reject

根据条件去除某个元素。

var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.reject(foo, ["id", 0])

//bar = [{id: 1, name: "bbb", age: 25}]

_.pick

根据第二个参数的key的数组，筛选第一个参数中的值并返回

var foo = {id: 0, name: "aaa", age: 33}
var bar = _.pick(foo, ["name", "age"])
//bar = {name: "aaa", age: 33}

_.keys

返回object中的所有key

var foo = {id: 0, name: "aaa", age: 33}
var bar = _.keys(foo)
//bar = ["id", "name", "age"]

_.cloneDeep

深度拷贝，这个不用多说了吧，js中基础类型以外的类型，都会默认拷贝备份
var bar = _.cloneDeep(foo)

_.find

查找数组

var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.find(foo, ["id", 0])
//bar = {id: 0, name: "aaa", age: 33}

注意一下如果没找到的话，会返回undefined，要处理一下

_.keyBy

以某个属性为键，将数组转为对象

var foo = var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.keyBy(foo, "name")
//bar = {
//    aaa: {id: 0, name: "aaa", age: 33},
//    bbb: {id: 1, name: "bbb", age: 25}
//}

_.filter

根据条件过滤出符合条件的元素，返回新数组

var foo = var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.filter(foo, ["name", "aaa"])
//bar = [{id: 0, name: "aaa", age: 33}]

_.map

从集合中挑出一个key，将其值作为数组返回

var foo = var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.map(foo, "name")
//bar = ["aaa", "bbb"]

_.max/_.min/_.sum

数组中最大值、最小值、数组求和

var foo = [1, 2, 3, 4]
var bar = _.max(foo)
//bar = 4
bar = _.min(foo)
//bar = 1
bar = _.sum(foo)
//bar = 10

_.pad/_.padStart/_.padEnd

在两端、开头、末尾补齐字符

var foo = "helloworld"
var bar = _.pad(foo, 14, "-")
//bar = --helloworld--
bar = _.padStart(foo, 14, "-")
//bar = ----helloworld
bar = _.padEnd(foo, 14, "-")
//bar = helloworld----

组合用法

如果说上面是基础技能，那么下面奉上几个炫酷的组合技：

选出json数组中id最大的一项

var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
var bar = _.find(foo, ["id", _.max(_.map(foo, "id"))])
// bar = {id: 1, name: "bbb", age: 25}

ps:也可以用maxBy某个key来代替

更新json数组中某一项的值

var foo = [
    {id: 0, name: "aaa", age: 33},
    {id: 1, name: "bbb", age: 25}
]
let list = _.keyBy(foo, "id")
list[0].name = "ccc"
var bar = _.map(list)
// bar = [
//    {id: 0, name: "ccc", age: 33},
//    {id: 1, name: "bbb", age: 25}
//]

GPU云服务器云服务器常用api接口 api接口常用数据 lodash cdn lodash

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82088.html

前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
Lodash的学习笔记（一）有意思的API

摘要：是函数柯里化的函数。例子柯里化有个常见作用参数复用构建高阶函数延迟计算。是的，它其实就是柯里化的具体应用构建高阶函数。这个是我认为的中最有意思的方法。不过要注意最后的。这同样是用来组合高阶函数的一个方法。最近在学习JS函数式编程相关的内容，于是详细的翻看了Lodash的文档，感到别有洞天。这里把自己对一些API的使用和看法做个笔记记录下。 Array _.head/_.last 例子...

BingqiChen 2019-08-19 18:15 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0