vue---lodash的使用

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

原文地址:https://www.cnblogs.com/e0yu/p/10843420.html