Lodash

Lodash是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，其中部分是目前ECMAScript尚未制订的规范，但同时被业界所认可的辅助函数。

常用

assign:合并对象
map :获取对象数组中某一同名属性的属性值集合；
find : 根据function返回值和对象查找1个结果；
filter:根据function返回值和对象查找多个结果；
reject: filter的反向方法；
omit：返回移除部分属性的副本，比如提交表单时有些字段不要提交；

//main.js
// 导入loadsh
import _ from 'lodash';
//注入工具
Vue.prototype.$lodash = _;

1、times()循环

    //js原生的循环方法for(var i = 0; i < 5; i++){console.log(i);}//ladash的times方法this.$lodash.times(5,function(a){console.log(a);// 0 1 2 3 4});

2、深层查找属性值 map

var lineFriendsArr = [{owner: "brown",lovers: [{name: "cony"}, {name: "choco"}]}, {owner: "James",lopvers: [{name: "sally"}, {name: "Jessica"}]}];var jsMap = lineFriendsArr.map(function (owner) {return owner.lovers[0].name;});console.log(jsMap);// Lodashvar lodashMap = this.$loadsh.map(lineFriendsArr, 'lovers[0].name');console.log(lodashMap);//["cony", "sally"]

3、获取对象中的某个属性的值 get

let obj = {a: [{b: {c: 3}}]}
let c = this.$lodash.get(obj, 'a[0].b.c')
console.log(c) // 3

4、深克隆对象 cloneDeep

var objA = {name: "brown"
};
//原生深度克隆  JSON.parse(JSON.stringify(objA))
// Lodash
var objB = this.$loadsh.cloneDeep(objA);
console.log(objA); //{name: "brown"}
console.log(objB);//{name: "brown"}
console.log(objA === objB);//false

5、查找属性 find filter reject

 var lovers= [{lover: 'brown', age: 20, active: true},{lover: 'cony', age: 19, active: false},{lover: 'sally', age: 18, active: true}];
console.log(this.$lodash.find(lovers, function (o) {return o.age < 19;})); //{lover: "sally", age: 18, active: true}
console.log(this.$lodash.find(lovers, {age: 18, active: true}));//{lover: "sally", age: 18, active: true}
console.log(this.$lodash.filter(lovers, {age: 18, active: true}));
console.log(this.$lodash.find(lovers, ['active', false]));
console.log(this.$lodash.filter(lovers, ['active', false]));
console.log(this.$lodash.find(lovers, 'active'));//{lover: "brown", age: 20, active: true}
console.log(this.$lodash.filter(lovers, 'active'));
//[{lover: "brown", age: 20, active: true},{lover: "sally", age: 18, active: true}]
// find()第一个返回真值的第一个元素。
// filter()返回真值的所有元素的数组。
// reject()是_.filter的反向方法，不返回真值的（集合）元素

6、返回最先通过 predicate 判断为真值的元素的index findIndex

/* 参数*/
// _.findIndex(array, [predicate=_.identity], [thisArg])
//array (Array): 需要搜索的数组
//[predicate=_.identity] (Function|Object|string): 数组遍历满足的条件
//[thisArg] (*): 对应 predicate 属性的值./*返回值*/
//(number): 返回符合查询条件的元素的索引值, 未找到则返回 -1.参数 predicate 提供的是一个属性名称，就通过提供的参数使用 _.property方法返回一个回调函数如果参数thisArg值提供的话，就使用 _.matchesProperty方法匹配相同的属性值，相同返回true,不同返回false如果参数predicate提供的是一个对象，就使用 _.matches方法匹配相同的元素，相同返回true,不同返回falsevar users = [{ user: 'brown',  active: false },{ user: 'cony',    active: false },{ user: 'sally', active: true }];this.$lodash.findIndex(users, function(chr) {return chr.user == 'sally';}); // 2
this.$lodash.findIndex(users, { ‘user‘: ‘cony‘, ‘active‘: false }); // 1
this.$lodash.findIndex(users, ‘active‘, false);// 0
this.$lodash.findIndex(users, ‘active‘); // 2

7、扩展对象 assign

Object.prototype.extend = function(obj) {for (var i in obj) {if (obj.hasOwnProperty(i)) {    //判断被扩展的对象有没有某个属性，this[i] = obj[i];}}};
var objA = {name: "brown", "food": "salmon"};
var objB = {name: "cony", "loveEat": true};
objA.extend(objB);
console.log(objA); //{name: "cony", food: "salmon", loveEat: true}
// Lodash
console.log(this.$lodash.assign(objA, objB));   // 往后面的对象上合并

8、assign,merge 合并对象

const aa = this.$lodash.assign({},{a:1},{a:2},{b:3})
//{a:2,b:3}
const bb = this.$lodash.merge({},{a:1},{a:2},{b:3})
//{a:2,b:3}
const a1 = this.$lodash.assign({},{a:1},{b:{a:1,b:2}},{b:{a:3}})
//{a:1,b:{a:3}}
const a2 = this.$lodash.merge({},{a:1},{b:{a:1,b:2}},{b:{a:3}})
//{a:1,b:{a:3,b:2}}//都可以用来合并对象 都会修改原来的对象 (如果原来的对象是作为函数的第一个参数的话)
//不同之处
//assign 函数不会处理原型链上的属性，也不会合并相同的属性，而是用后面的属性值覆盖前面的属性值
//merge 遇到相同属性名的时候，如果属性值是纯对象或集合的时候，会合并属性值

9、遍历循环 forEach

 this.$lodash([1, 2]).forEach(function(value) {console.log(value);// 1  2});this.$lodash.forEach([1, 3] , function(value, key) {console.log(key,value); // 0 1   1 3});

10、遍历循环执行某个方法 map

 function square(n) {return n * n;}console.log(this.$lodash.map([4, 8], square));// [16, 64]console.log(this.$lodash.map({ 'a': 4, 'b': 8 }, square));// [16, 64]var lovers= [{ 'lover': 'brown' },{ 'lover': 'cony' }];console.log(this.$lodash.map(lovers, 'lover'));// ['brown', 'cony']

11、在指定范围内获取一个随机值 random

    function getRandomNumber(min, max){return Math.floor(Math.random() * (max - min)) + min;}
console.log(getRandomNumber(15, 20));
// Lodash
console.log(this.$loadsh.random(15, 20));
//也可以指定返回的结果为浮点数this.$loadsh.random(15,20,true)

12、从列表中随机的选择列表项 sample

   var smartTeam = ["brown", "choco", "cony, "sally"];function randomSmarter(smartTeam){var index = Math.floor(Math.random() * smartTeam.length);return smartTeam[index];}
console.log(randomSmarter(smartTeam));
// Lodash
console.log(this.$lodash.sample(smartTeam));
console.log(this.$lodash.sampleSize(smartTeam,2));
//this.$lodash.sampleSize(smartTeam,n) n为需要返回的元素个数

13、获取数组中指定元素 last, nth

//最后一个  last
let arr = [1, 2, 3, 4, 5]
let lastElement = this.$lodash.last(arr);
console.log(lastElement) // 5
//倒数第二个
let arr = [1, 2, 3, 4, 5]
let lastSecondElement = this.$lodash.nth(arr,-2)
console.log(lastSecondElement) // 4
//第一个
let arr = [1, 2, 3, 4, 5]
let lastSecondElement = this.$lodash.nth(arr,0)
console.log(lastSecondElement) // 1

14、获取数组中前n个元素，不改变原数组 take

let arr = [1, 2, 3, 4, 5]
let part1Arr = this.$lodash.take(arr, 4)
let part2Arr = this.$lodash.take(arr, 6)
let part3Arr = this.$lodash.take([], 5)
console.log(part1Arr) // [1, 2, 3, 4]
console.log(part2Arr) // [1, 2, 3, 4, 5]
console.log(part3Arr) // []

15、删除数组中值为false的元素 compact

let arr = [0, 1, false, 2, '', 3, null, undefined, NaN]
let truthyArr = this.$lodash.compact(arr)
console.log(truthyArr) // [1, 2, 3]

16、找出两个数组中元素值相同的元素 intersection

let arr1 = [2, 1, {a: 1, b: 2}]
let arr2 = [2, 3, {a: 1, b: 2}]
let intersection = this.$lodash.intersection(arr1, arr2)
console.log(intersection) // [2]

17、返回移除部分属性的副本 omit

比如提交表单时有些字段不要提交

18、提取部分属性的副本 pick

比如只提交某些字段

Lodash学习笔记相关推荐

nodejs学习笔记(上)
nodejs学习笔记 (上) 通过学习需要做到的是了解前后端是如何进行交互的 nodejs也是使用javaScript进行编写的 javaScript在不同的运行环境中有不同的作用在浏览器内核中 ...
Vue2学习笔记1 - win10下安装vue开发环境
操作系统为Win10_x64 1.安装NodeJs Vue的安装依赖NodeJs,所以需要先安装NodeJs,去NodeJs官网(http://nodejs.cn/download/)下载对应系统的n ...
Vue3项目搭建学习笔记
Vue3项目搭建学习笔记参考王红元老师vue课程创建项目 vue create vue3-ts-cms 项目搭建规范集成editorconfig配置 VSCode需要安装一个插件:EditorC ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
唤醒手腕 - 前端服务器端开发 Node.Js 学习笔记（学习中，更新中）
唤醒手腕 - Node.Js 学习笔记唤醒手腕个人的学习记录,时间在2021年12月13日 ~ 2021年12月14日,学习方式看官方文档和B站视频,如有错误或者代码问题的地方,欢迎C站大佬能够帮忙 ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...

Lodash学习笔记

Lodash

常用

Lodash学习笔记相关推荐

最新文章

热门文章