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. test20190805 夏令营NOIP训练20

    100+0+0=100,由于第二题写挂rank 1就没了 山 xyz现在站在一个斜坡面前 这个斜坡上依次排布这n座山峰,xyz打算爬上其中的一座 因为xyz体力不好,所以他只能爬上最矮的一座山 又因为 ...

  2. Oracle字符串中包含数字、特殊符号的排序

    问题描述: 某小区,需要按照小区.楼栋.单元号.房间号进行排序,但是按照地址描述排序时,因为字符串中包含数字,所以造成了如下的结果, 1号楼之后应该是2号楼,但是查询结果却是10号楼 . 尝试解决 使 ...

  3. python实现抽样分布描述

    本次使用木东居士提供数据案例,验证数据分布等内容, 参考链接:https://www.jianshu.com/p/6522cd0f4278 #数据读取 df = pd.read_excel('C:// ...

  4. JUC-10-ReadWriteLock读写锁

    ReadWriteLock同Lock一样也是一个接口,提供了readLock和writeLock两种锁的操作机制,一个是只读的锁,一个是写锁  

  5. Vue 实例成员

    Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架:Angular React Vue Vue结合了其他框架优点.轻量级. ...

  6. mysql 端口号被占用

    开始-运行-cmd, 输入 netstat -ano, 看第一列,后面的就是端口,找到3306 ,记住对应的PID!!    然后打开任务管理器 查看 -> 选择列 -> 勾上 PID(进 ...

  7. 接口中的JSON报文

    原始报文: 请求报文: [ { "appNo" : "", "applicantCredentialCode" : "" ...

  8. JAVA中使用Dom解析XML

    在G盘下新建XML文档:person.xml,XML代码: <?xml version="1.0" encoding="utf-8"?> <s ...

  9. SQL 删除字段 增加字段

    SQL增加字段需要用到sql语句 ALTER TABLE 加(表格名称) ADD 加(字段名称) 加(字段类型)实例:ALTER TABLE T_Basic ADD SEODescription Nv ...

  10. Oracle Replace()函数与translate()函数 替换函数

    简要比较: replace 字符串级别的代替 如:SELECT REPLACE('accd','cd','ef') from dual; --> aefd translate 字符级别的代替 如 ...