一、Lodash介绍：
Lodash是一套工具库，它内部封装了诸多对字符串、数组、对象等常见数据类型的处理函数，帮助开发者降低JS使用难度。
二、Lodash入门使用介绍：
以Vue-cli使用为例：
1、yarn install lodash
2、在main.js里引入并使用
import _ from 'lodash';// 导入loadshVue.prototype.$lodash = _;//注入工具三、Lodash常用方法介绍：
①：times()循环
//js原生的循环方法 for (var i = 0; i < 5; i++) { console.log(i); }; //ladash的times方法 this.$lodash.times(5,function (item) { console.log(item); })②：map() 获取对象数组中某一同名属性的属性值集合；
let arr = [{owner: "brown", lovers: [{name: "cony"}, {name: "choco"}] }, { owner: "James", lovers: [{name: "sally"}, {name: "Jessica"}] }]; //js原生的循环方法 var jsMap = arr.map(function (item) { return item.lovers[0].name; }); console.log(jsMap); //["cony", "sally"] // Lodash的写法 var lodashMap = this.$lodash.map(arr, 'lovers[0].name'); console.log(lodashMap); //["cony", "sally"]③： get () 获取对象中的某个属性的值
let obj = {a: [{b: {c: 3}}]}let c = this.$lodash.get(obj, 'a[0].b.c') //c==3④： cloneDeep() 深克隆对象
let objA = {name: "brown"}; //JS深克隆 JSON.parse(JSON.stringify(objA)) // Lodash的方法 let objB = this.$lodash.cloneDeep(objA); console.log(objA); //{name: "brown"} console.log(objB);//{name: "brown"} console.log(objA === objB); //false ⑤： find() 、filter()、 reject() 查找属性
find()第一个返回真值的第一个元素。
filter()返回真值的所有元素的数组。
reject()是_.filter的反向方法，返回所有假值
console.log(this.$lodash.find(lovers, function (item) { return item.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})); //[{lover: "sally", age: 18, active: true}] console.log(this.$lodash.find(lovers, ['active', false])); // {lover: "cony", age: 19, active: false} console.log(this.$lodash.filter(lovers, ['active', false])); // [{lover: "cony", age: 19, active: false}] console.log(this.$lodash.find(lovers, 'active')); // {lover: "sally", age: 18, active: true} console.log(this.$lodash.filter(lovers, 'active')); // [{lover: 'sally', age: 18, active: true}, // {lover: 'brown', age: 20, active: true},] ⑥： findIndex() 查找正确的第一个索引项
var 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⑦： assign()、merge() 合并
相同之处：都可以用来合并对象 都会修改原来的对象 (如果原来的对象是作为函数的第一个参数的话);
不同之处
assign 函数不会处理原型链上的属性，也不会合并相同的属性，而是用后面的属性值覆盖前面的属性值;
merge 遇到相同属性名的时候，如果属性值是纯对象或集合的时候，会合并属性值;
// JS原生对象合并的方式 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)); //{name: "cony", food: "salmon", loveEat: true} //----------- 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}} ⑧： forEach() 遍历循环
this.$lodash(['a', 'b']).forEach(function(item) { console.log(item);// ab }); this.$lodash.forEach(['a', 'b'] , function(item, key) { console.log(item,key); // a 0 b 1 });