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));vue json字符串转数组
}
},
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论