Lodash就是这样的一套工具库,它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数,其中部分是目前ECMAScript尚未制订的规范,但同时被业界所认可的辅助函数。莫倩每天使用npm安装Lodash的数量在百万级以上,这在一定程度上证明了其代码的健壮性,值得我们在项目中一试。

模块组成:

Array, 适合于数组类型,比如填充数据、查找元素、数组分片等操作
Collocation, 适用于数组和对象类型,部分适用于字符串,比如分组、查找、过滤等操作
Function, 适用于函数类型,比如节流、延迟、缓存、设置钩子等操作
Lang, 普遍适用于各种类型,常用于执行类型判断和类型转换
Math, 使用与数值类型,常用于执行数学运算
Number, 适用于生成随机数,比较数值与数值区间的关系
Object, 适用于对象类型,常用于对象的创建、扩展、类型转换、检索、集合等操作
Seq, 常用于创建链式调用,提高执行性能(惰性计算)
String, 适用于字符串类型
lodash/fp 模块提供了更接近函数式编程的开发方法,其内部的函数经过包装,具有immutable、auto-curried、iteratee-first、data-last(官方介绍)等特点。
Fixed Arity,固化参数个数,便于柯里化
Rearragned Arguments, 重新调整参数位置,便于函数之间的聚合
Capped Iteratee Argument, 封装Iteratee参数

安装使用:

npm install --save lodash
npm install --save-dev babel-plugin-lodash

具体的使用方法:

import _ from 'lodash';
import { add } from 'lodash/fp'; const addOne = add(1);
_.map([1, 2, 3], addOne);

测试的几个常用的使用方法:

lodashTest:function(){
// 循环5次数
_.times(5,function(i){
console.log(i);
});
// 深度 copy
let objA = {name:'zzl'};
let objB = _.cloneDeep(objA);
console.log(objB);
// 随机数
console.log(_.random(5,80));
// 对象扩展
let objC = {"names": "colin", "car": "suzuki"};
let objD = {"name": "james", "age": 17};
let objE = _.assign(objC, objD);
console.log(objE); // 合并到了一起
// 筛选
let objF = {"name": "colin", "car": "suzuki", "age": 17};
console.log(_.omit(objF,['car','age'])); // 移除 car 和 age 保留 name
console.log(_.omit(objF,'name')); // 移除 name 保留 car 和 age
console.log(_.pick(objF,['name','age'])); // 筛选出 name age
// 随机元素
let objG = ["Colin", "John", "James", "Lily", "Mary"];
console.log(_.sample(objG));// 随机一个
console.log(_.sample(objG,2));// 随机两个
// JSON.parse 错误处理
console.log(parseLodash('{"name": "colin"}'));
function parseLodash(str){
return _.attempt(JSON.parse.bind(null, str));
}
},

参考文档:https://www.cnblogs.com/webbest/p/8268115.html

vue---lodash的使用的更多相关文章

  1. emmet前端模板

    https://github.com/emmetio/emmet/blob/master/lib/snippets.json "emmet.extensionsPath": &qu ...

  2. Webpack 打包优化之体积篇

    谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...

  3. Vue中使用节流Lodash throttle

    在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适 ...

  4. 010——VUE中使用lodash库减少watch对后台请求的压力

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 10.VUE学习之使用lodash库减少watch对后台请求的压力

    问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...

  6. Vue 使用lodash库减少watch对后台请求压力

    lodash需要新引入 我使用的是npm方式 使用lodash的_.debounce方法 具体代码: <!doctype html> <html lang="en" ...

  7. vue引入 lodash

    vue main.js引入 // main.js 全局引入lodash import _ from 'lodash' Vue.prototype._ = _ // 使用 this._.debounce ...

  8. Vue 通过 Lodash 限制操作频率

    <template> <div id="watch-example"> <p> Ask a yes/no question: <input ...

  9. vue中使用lodash

    1.安装:npm i --save lodash 2.引入:import _from 'lodash' 3.使用: <template> <div class="templ ...

  10. Vue项目按需打包Lodash

    使用的是 webpack 模板 1. 首先安装 npm install lodash --save npm install lodash-webpack-plugin babel-plugin-lod ...

随机推荐

  1. 手写热更新阐述tinker实现原理

    关于热更新如今面试也是基本上都会提及到的,我上一家公司用的是tinker,而这里准备研究的也是它的原理,而关于tinker的原理网上也是一大堆文章进行介绍,为了对它有个更加进一步的认识,所以自己动手来 ...

  2. Burp Suite的代理Brup Proxy的使用详解

    Burp Proxy 是Burp Suite以用户驱动测试流程功能的核心,通过代理模式,可以让我们拦截.查看.修改所有在客户端和服务端之间传输的数据.  

  3. Dubbo源码分析(4):Protocol

    Protocol接口是Dubbo框架的核心组件.Dubbo框架启动protocol接口实现类,由spring的xml文件配置决定.RegistryProtocol协议是Protocol协议的核心,它负 ...

  4. 使用SAXReader对XML进行操作

    该例子主要使用SAXReader对XML进行操作,browse.xml是Ango框架里面的XML文件 采用两种方法,第一种的全部是iterator,另外一种采用了部分的for each 代码如下 pr ...

  5. Linux 之 光标消失隐藏术

    下面是 Linux 光标突然不见的解决办法: 直接敲命令行就行 echo -e "\033[?25l"  隐藏光标 echo -e "\033[?25h" 显示 ...

  6. python - django (路由)

    # """ # Django路由分配系统简介: Django project目录中的urls.py文件中, 以Python [ ( ) ]的数据类型记录了可以访问到该站点 ...

  7. 织梦cmsf表单提交到邮箱 织梦表单发送到邮箱 织梦自定义表单发邮箱

    大家在做织梦做网站开发时会遇到一个问题:织梦的自定义表单是一个很鸡肋的功能,不仅在后台展示得奇丑,而且也没有提醒功能,使用起来很不方便.很多人用织梦自定义表单时,都想用户提交表单的时候可以发送到自己的 ...

  8. LightOJ - 1336 - Sigma Function(质数分解)

    链接: https://vjudge.net/problem/LightOJ-1336 题意: Sigma function is an interesting function in Number ...

  9. PHP文件载入

    一.介绍 在实际开发中,经常会在一个PHP文件中引入其他的文件,被引入的文件可以是HTML文档,也可以是PHP文件 二.语法 require(文件名)和require_once(文件名) includ ...

  10. 题解 UVA11105 【H-半素数 Semi-prime H-numbers】

    做这道题之前首先要掌握的是线性筛的模板 附上题目链接 https://www.luogu.org/problem/P3383 首先这道题目的范围有些特殊必须是% 4 == 1的数才行 所以可以这样 直 ...