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
vue---lodash的使用的更多相关文章
- emmet前端模板
https://github.com/emmetio/emmet/blob/master/lib/snippets.json "emmet.extensionsPath": &qu ...
- Webpack 打包优化之体积篇
谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝 ...
- Vue中使用节流Lodash throttle
在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适 ...
- 010——VUE中使用lodash库减少watch对后台请求的压力
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 10.VUE学习之使用lodash库减少watch对后台请求的压力
问题描述 使用watch监听库里word的值的变化,获取新值后,用oxios发送的ajax异步请求, 此时会多次发送请求,浪费服务器资料. 解决办法 使用lodash库里的_.debounce函数延缓 ...
- Vue 使用lodash库减少watch对后台请求压力
lodash需要新引入 我使用的是npm方式 使用lodash的_.debounce方法 具体代码: <!doctype html> <html lang="en" ...
- vue引入 lodash
vue main.js引入 // main.js 全局引入lodash import _ from 'lodash' Vue.prototype._ = _ // 使用 this._.debounce ...
- Vue 通过 Lodash 限制操作频率
<template> <div id="watch-example"> <p> Ask a yes/no question: <input ...
- vue中使用lodash
1.安装:npm i --save lodash 2.引入:import _from 'lodash' 3.使用: <template> <div class="templ ...
- Vue项目按需打包Lodash
使用的是 webpack 模板 1. 首先安装 npm install lodash --save npm install lodash-webpack-plugin babel-plugin-lod ...
随机推荐
- 201671030116 宋菲菲 实验十四 团队项目评审&课程学习总结
项目 内容 作业所属课程 所属课程 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 任务一:团队项目审核已完成.项目验收过程意见表已上交. 任务二:课程学习 ...
- 行为型模式(五) 中介者模式(Mediator)
一.动机(Motivate) 为什么要使用中介者模式呢?如果不使用中介者模式的话,各个同事对象将会相互进行引用,如果每个对象都与多个对象进行交互时,将会形成如下图所示的网状结构.从上图可以发现,如果不 ...
- ER图的构建
我们在完成一个项目前期,首要的工作是对需求进行分析,然后根据需求画出相应的数据库E-R图,这是我们后期建立数据库和对数据库进行操作的必要操作 这是一个小总结和示例 关系型数据库 关系 (表) stud ...
- (尚017)Vue插件
1.如何开发插件? 2.编写自己的vue-myPlugin.js插件库,代码如下: /** * vue的插件库 * 最好使用匿名函数包裹起来,这样代码会更加规范 * 里面的实现被隐藏了 */(func ...
- Dominating Patterns (AC 自动鸡模版题, 出现次数最多的子串)
传送门 题意: 给你n个模式串, 再给你一个 文本串,问模式串在文本串中出现次数最多是多少. 出现次数最多的模式串有哪些. 解: 模版题. #include <bits/stdc++.h> ...
- input重复上传图片失效的问题
使用input的file来上传图片 如果是重复选择相同的图片就会失效 解决的办法就是当每次上传完图片后让input的值为空就可以解决了 附上代码 只需在末尾添加这句就行$(this).val(&quo ...
- C变量作用域的分类和优先级
变量从高到低的优先级以下面展示: 1.文件作用域:变量在全局从文件开头到结尾一直有效即全局变量 2.函数作用域也称局部变量 3.代码块作用域:用{}花括号内的定义的变量:都是在代码块{}中有效 如:i ...
- IntelliJ IDEA 2017 Dubbo Elastic-job Redis Zookeeper RabbitMQ FastDFS MyCat 简介以及部分实现(三)
前言 首先需要说明一下,与前两章的安装篇不太一样,这篇主要扫清一下这些插件/框架 等都是干什么用的,大多数都会用于服务端或监测工具或其他,作为新手建立一个大概的思想更好的了解自己的项目.废话不多 ...
- Transform详解(超详细) Attention is all you need论文
一.背景 自从Attention机制在提出 之后,加入Attention的Seq2 Seq模型在各个任务上都有了提升,所以现在的seq2seq模型指的都是结合rnn和attention的模型.传统的基 ...
- Linux shell head 命令
输出前25行 head -n25 input.txt head -n input.txt head - input.txt 输出前5个字符 head -c5 test.cpp head -c test ...