lodash的使用
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。
为什么选择 Lodash ?
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。Lodash 的模块化方法 非常适用于:
- 遍历 array、object 和 string
- 对值进行操作和检测
- 创建符合功能的函数
一、安装
浏览器环境,在页面的sript里直接引用lodash.js
<script src="lodash.js"></script>
通过 npm:
$ npm i --save lodash
二、引用
import * as _ from 'lodash'
然后就可以使用lodash的各种方法了
下面列举一些常用的lodash方法
_.range(10)
//生成元素为0到9的数组
_.times(10, (i)=>console.log(i))
//循环10次
_.uniqueId()
//生成不同的id,用于元素中的id值再好不过
_.startWith
//判断字符串是否以xx开头
_.endWith
//判断字符串是否以xx结尾
_.truncat
//截取指定长度后加… 用于处理标题过长再好不过
_.template
//es6有字符串模板的语法,而lodash是es5的替代方案
_.assign
//合并,es6有Object.assign,类似于jQuery.extend
_.assignIn
//lodash里很多方法带In的都是可枚举原型链上的属性
_.defaults
//安全合并,即忽略undefined/null的重写
_.findKey
//根据value的属性值找key
.mapKeys
//遍历重写key, 相当于.forIn
.mapValues
//遍历重写value , 相当于.forIn
_.invert
//反转映射,快速通过value值找key
_.omit
//返回移除部分属性的副本,比如提交表单时有些字段不要提交
_.pick
//与omit相反,提取部分属性的副本,比如只提交某些字段
_. clamp
//确认所给值只在min,max之间
_.max
//最大
_.min
//最小
_.sum
//求和
_.random
//生成随机数
_.round
//四舍五入,允许指定精确位数
_.isNumber
_.isInterger
_.isFunction
_.isPlainObject
_.isArray
_.isDate
_.isElement
_.isNil
//null or undefined
_.isEmpty
//{} or 空数组
_.isEqual
//支持对象和数组
_.isMatch
//匹配对象属性值
_.cloneDeep
//深度复制
_.clone
//浅复制
_.once
//只执行一次
_.before
//最多n-1次
_.after
//n次后执行
_.debounce
//忽略频繁执行
_.union
//合并两数组,去重
_.uniq
//去重
_.pull(array,element1,element2)
// 直接在array中移除元素,
_.without(array,element1,element2)
//得到新array中移除元素
_.remove(array, function)
//直接在array移除在function返回true的元素
_.sameple(array)
//随机取1
_.samepleSize(array, int)
// 随机取n
_.shuffle(array)
//乱序, jQuery.shuffle
_.find(array, function | object)
//根据function返回值和对象查找1个结果
_.filter(array, function | object)
//根据function返回值和对象查找多个结果
_.groupBy(array, string)
//分组,与多合一相反
_.keyBy(array, string)
//分组,类似groupBy, 但只有唯一值
_.countBy(array, string)
//分组统计
_.orderBy(array, array, array)
_.sortBy(array, array)
_.difference(array1,array2)
//找不同于array2,元素是Object用differenceBy
_.xor(array1,array2)
//得到非交集,元素是Object用xorBy
_.intersection(array1,array2)
//得到交集,元素是Object用intersectionBy
建议去自己读一下lodash官网,官网有实例可以帮助我们更好地理解一些方法的使用 https://www.lodashjs.com/
lodash的使用的更多相关文章
- 延迟求值-如何让Lo-Dash再提速x100?
「注释」作者在本文里没有说明这么一个事实: 目前的版本Lo-Dash v2.4.1并没有引入延迟求值的特性,Lo-Dash 3.0.0-pre中部分方法进行了引入,比如filter(),map(),r ...
- 函数式 js 接口实现原理,以及 lodash/fp 模块
函数式 js 接口 之前在 youtube 上看到一个技术视频,讲“underscore.js的接口为什么不好用”,以及什么样的接口更好用.演讲者是 lodash.js 的作者,他提出了一种“全面函数 ...
- lodash
lodash常用函数一 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- lodash 替换 underscore
不少知名项目都在用lodash替换underscore lodash Lazy evaluation 英文原文:http://filimanjaro.com/blog/2014/introducin ...
- JavaScript工具库之Lodash
你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很 ...
- inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice'
inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice' 在公司的电脑上出现过这个错误,后来 ...
- lodash链式使用
chain var _ = require('lodash'); var user1 = { name: 'zhangsan', height: 180, weight: 120 }; var use ...
- lodash常用方法1--查询
1.find var _ = require('lodash'); var user1 = { name: 'zhangsan', height: 180, weight: 120 }; var us ...
- 高性能的JavaScript库---Lodash
上周在仿做Nodejs社区的时候,遇到了lodash这个javascript库,很惭愧,那也是我第一次听说lodash.人嘛,对于新鲜的事物总是会或多或少感到些好奇的,于是就毫不犹豫地去lodash官 ...
- lodash源码(2)
1.flatten 对深层嵌套数组的抹平 _.flatten([1, [2, 3, [4]]]);* // => [1, 2, 3, [4]]** // using `isDeep`* _.fl ...
随机推荐
- Wp8滚动区域(ScrollViewer)控件的使用
1. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28" ...
- C-printf/sprintf/snprintf中的类型转换详解
源码1 #include <stdio.h> void f1() { double x = -5.5625; printf("%d\n",x); //输出为0,为什么? ...
- MongoDB笔记(一):MongoDB介绍及Windows下安装
一.前言 MongoDB火了也蛮久了,关于简介看看这里吧.项目中一直没用上,最近闲的慌就自己学了下,顺便记录下以便今后复习. 本系列是基于MongoDB 2.4.8 windows 64位讲解,后面的 ...
- opencv的C语言接口和C++接口差别(入门篇)
opencv是一个开源的图像处理库,最经典的1.0版本号提供的接口都是C语言接口. 后来的opencv2.x版本号保留了C语言接口,可是提供了C++接口,当中的C语言接口仅仅是为了向后兼容,而C++接 ...
- Windows环境下完全手工配置Apache、MySQL和PHP
现在LAMP(Linux.Apache.MySQL.PHP/Perl/Python的简称)已经很流行了.在Windows下也有类似的,比如 WAMP(Apache, MySQL, PHP on Win ...
- Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构
Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构 1. 54.order_info 订单 数据结构1 2. Ecshop 的订单api1 2.1. 生成订单 code b ...
- 605. Can Place Flowers【easy】
605. Can Place Flowers[easy] Suppose you have a long flowerbed in which some of the plots are plante ...
- Django学习之URLconf
Django处理request的步骤: 1.确定根URLconf 2.载入urls.py,找到变量urlpatterns,urlpatterns是django.conf.urls.url()的实例对象 ...
- Perl/C#连接Oracle/SQL Server和简单操作
连接数据库是一个很常见也很必须的操作.先将我用到的总结一下. 1. Perl 连接数据库 Perl 连接数据库的思路都是: 1)使用DBI模块: 2)创建数据库连接句柄dbh: 3)利用dbh创建语句 ...
- 【Ubuntu安装,ATX基于uiautomator2】之安装步骤
Ubuntu系统下安装uiautomator2步骤: 1.安装命令: pip install --upgrade --pre uiautomator2 但是报错: Command "pyth ...