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. linux系统编程之文件与io(二)

    今天继续学习文件与io,话不多说,开始进入正题: 文件的read和write系统调用: 说明:函数中出现在size_t和ssize_t是针对系统定制的数据类型:     下面以一个实现文件简单拷贝的示 ...

  2. flask的基础1

    1.python 现阶段三大主流web框架Django Tornado Flask的对比 1.Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不管你 ...

  3. discuz论坛门户资讯入库接口【原创】

    最近想打造一个社区门户站点,所以写了这个入库接口,可以对接数据入库. <?php /* * Discuz x3.2 门户免登陆发布接口 * 2018-08-10 * Copyright 68xi ...

  4. 评估预测函数(2)---对hypothesis进行评估

    当有多个features时,无法通过图像来评估hypothesis 当我们的hypothesis只有一个features时,可以通过观察它的图像来看它是否overfitting,但是如果我们有多个fe ...

  5. .net框架-栈(Stack)

    栈(Stack) 栈代表一个后进先出的集合 栈元素为Object类型 .net框架提供Stack<T>泛型栈类 压栈(Push)和出栈(Pop)是栈的基本操作,压栈入栈顶,出栈也出栈顶. ...

  6. 接口测试工具soapUI

    一.下载 官网:https://www.soapui.org/ 链接:https://pan.baidu.com/s/15LITTKIvfIoAq5IBpID8gA 提取码:l7p6 二.SoapUI ...

  7. jquery 如何控制音乐打开和关闭

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. Tensorflow细节-P202-数据集的高层操作

    本节是对上节的补充 import tempfile import tensorflow as tf # 输入数据使用本章第一节(1. TFRecord样例程序.ipynb)生成的训练和测试数据. tr ...

  9. cocoapods安装错误的原因

    gem 可以理解为管理RUBY库和程序包的查找,安装,升级和卸载是个非常好用的工具. gem install cocoapods过程中出现错误的问题.1.gem的源设置错误应该参照,下面来执行gem ...

  10. 利用HTML和CSS设计一个静态的“小米商城官网首页”

    一.小项目说明 这是个例行的小项目练习,主要利用html和css的基础知识,复刻一个缩减版的小米商城网页.包括[导航栏].[头部logo区,快捷键.搜索框].[网页主体].[网页尾部]几个部分.目前只 ...