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

模块组成:

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

安装使用:

  1. npm install --save lodash
  2. npm install --save-dev babel-plugin-lodash

具体的使用方法:

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

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

  1. lodashTest:function(){
  2. // 循环5次数
  3. _.times(5,function(i){
  4. console.log(i);
  5. });
  6. // 深度 copy
  7. let objA = {name:'zzl'};
  8. let objB = _.cloneDeep(objA);
  9. console.log(objB);
  10. // 随机数
  11. console.log(_.random(5,80));
  12. // 对象扩展
  13. let objC = {"names": "colin", "car": "suzuki"};
  14. let objD = {"name": "james", "age": 17};
  15. let objE = _.assign(objC, objD);
  16. console.log(objE); // 合并到了一起
  17. // 筛选
  18. let objF = {"name": "colin", "car": "suzuki", "age": 17};
  19. console.log(_.omit(objF,['car','age'])); // 移除 car 和 age 保留 name
  20. console.log(_.omit(objF,'name')); // 移除 name 保留 car 和 age
  21. console.log(_.pick(objF,['name','age'])); // 筛选出 name age
  22. // 随机元素
  23. let objG = ["Colin", "John", "James", "Lily", "Mary"];
  24. console.log(_.sample(objG));// 随机一个
  25. console.log(_.sample(objG,2));// 随机两个
  26. // JSON.parse 错误处理
  27. console.log(parseLodash('{"name": "colin"}'));
  28. function parseLodash(str){
  29. return _.attempt(JSON.parse.bind(null, str));
  30. }
  31. },

参考文档: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. 《你们都是魔鬼吗》团队作业Beta冲刺---第一天

    团队作业Beta冲刺 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 你们都是魔鬼吗 作业学习目标 (1)掌握软件黑盒测试技术:(2)学会编制软件 ...

  2. IDEA使用入门设置(从入门到放弃)

      激活 1:设置JDK路径 2:设置maven环境 3:设置tomcat 4:设置快捷键与eclipse相同 4.1:设置字体大小 5:创建maven  java 工程并进行编译打包等操作 6:创建 ...

  3. Oracle数据库中的dual表

    select user from dual; select to_char(sysdate,'yyyy-mm-dd hh24:mi:ss') from dual;--获得当前系统时间 select S ...

  4. Oracle-分析函数之排序值rank()和dense_rank()

    聚合函数RANK 和 dense_rank 主要的功能是计算一组数值中的排序值. 在9i版本之前,只有分析功能(analytic ),即从一个查询结果中计算每一行的排序值,是基于order_by_cl ...

  5. Django --- csrf相关,auth相关

    目录 1.csrf相关 1.跨站请求伪造 2.跨站请求伪造问题解决 3.crsf中间件 4.csrf装饰FBV的装饰器 5.csrf装饰CBV的装饰器 6.django settings源码刨析 2. ...

  6. lstm-bp过程的手工源码实现

    近些年来,随着深度学习的崛起,RNN模型也变得非常热门.如果把RNN模型按照时间轴展开,它也类似其它的深度神经网络模型结构.因此,我们可以参照已有的方法训练RNN模型. 现在最流行的一种RNN模型是L ...

  7. Ubuntu 16.04LTS 安装和配置Bochs

    环境:VMWare14+Ubuntu16.04 安装Bochs2.6.9 1.去官网下载 下载 bochs-2.6.9.tar.gz 2.安装一系列的包 因为Bochs 需要在 X11 环境下运行,因 ...

  8. Maximal Square II

    Description Given a 2D binary matrix filled with 0's and 1's, find the largest square which diagonal ...

  9. LeetCode 321. Create Maximum Number

    原题链接在这里:https://leetcode.com/problems/create-maximum-number/description/ 题目: Given two arrays of len ...

  10. gosched

    Go语言runtime.Gosched()函数浅析 这个函数的作用是让当前goroutine让出CPU,好让其它的goroutine获得执行的机会.同时,当前的goroutine也会在未来的某个时间点 ...