lodash入门使用 | 易学教程

之前有常看到lodash，但是一直没有详细了解，也没有用，现在有时间可以认真看下了。
好多东西都是，没了解没入门都会觉得应该不会那么容易上手，然后就暂时放置，然后安于原来熟悉的开发方式了，还是一个字 —— 懒。
可能尝试一件新事物并没有想象中那么地花费时间和精力，
坚持一个好的习惯也没有想象中那么的艰难~
———————————————————————————————————————————————
lodash是一个旨在提高开发效率和javascript原生方法性能的js原生库，像jquery一样，这里封装了很多字符串、数组、对象等常见数据类型的处理函数。
以下列举以下平时应用场景较多的几种，方便后期用到：
详细参考：lodash官网

1.times循环

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

2.chunk - 切分数组

将数组按照一定长度切分，返回新数组

 const arr = [1,2,3,4,5,6,7,8,9];
 let newArr = _.chunk(arr,2);
 console.log(newArr);
 // =>[[1,2],[3,4],[5,6],[7,8],[9]]

3.compact，去除假值。

将所有的空值，0，NaN过滤掉

_.compact(['1','2',' ',0])
// => ['1','2']

4.uniq，数组去重

将数组中的对象去重，只能是数组去重，不能是对象去重。

_.uniq([1,1,3])
// => [1,3]

5.filter和reject

过滤集合，传入匿名函数。（两个函数类似但返回的值是相反）

//返回满足条件项
_.filter([1,2],x => x = 1)
// => [1]
//返回不满足条件项
_.reject([1,2],x => x=1)
// => [2]

6.map和forEach

//这里也对比下原生map和forEach的区别(map可做返回值操作)
let newArr1 = [1,2].map(function(item,index,arr){
    return item+1;
});
console.log(newArr1);
  // => [2,3]
let newArr2 = [1,2].forEach(function(item,index,arr){
    return item+1;
});
console.log(newArr2);
 // => undefined
 
 //注意返回值区别
let newArr3 = _.map([1,2],x => x+1);
console.log(newArr3);
// => [2,3]
let newArr4 = _.forEach([1,2],x => x+1);
console.log(newArr4);
// => [1,2]

//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"]

7.merge - 参数合并

即属性合并，递归的将源对象和继承的可枚举字符串监控属性合并到目标对象中。源对象从左到右引用，后续来源将覆盖以前来源的属性分配

let object = {
    'a': [{ 'b': 2 }, { 'd': 4 }]
};
let other = {
    'a': [{ 'c': 3 }, { 'e': 5 }]
};
let newArr = _.merge(object, other);
console.log(newArr);
// => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }

8.extend - 类似参数对象合并

function Foo() {
  this.a = 1;
}
function Bar() {
  this.c = 3;
}
Foo.prototype.b = 2;
Bar.prototype.d = 4;
_.assignIn({ 'a': 0 }, new Foo, new Bar);
// => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }

9.cancat - 数组连接

可以接受多个参数，将多个参数合并为一个数组元素。

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
console.log(other);
// => [1, 2, 3, [4]]
console.log(array);
// => [1]

10.keys- 同object.keys()

取出对象中所有的key值组成新的数组

function Foo() {
  this.a = 1;
  this.b = 2;
}
Foo.prototype.c = 3;
_.keys(new Foo);
// => ['a', 'b'] (iteration order is not guaranteed)
_.keys('hi');
// => ['0', '1']

11.cloneDeep - 深拷贝

let objA = {name: "brown"};

//JS深克隆
JSON.parse(JSON.stringify(objA));

// Lodash的方法
let objB = _.cloneDeep(objA);
console.log(objA); //{name: "brown"}
console.log(objB);//{name: "brown"}
console.log(objA === objB); //false

12.find/findIndex- 查找元素和索引

find()返回真值的第一个元素
findIndex() 查找正确的第一个索引项

let customerList = [{
	customerId:5,
	name:'lily'
},{
	customerId:6,
	name:'lisa'
},{
	customerId:6,
	name:'lime'
}];
let item = _.find (customerList,{customerId: 6});
console.log(item);
// => {customerId:6,name:'lisa'}

	var users = [
        { user: 'brown',  active: false },
        { user: 'cony',    active: false },
        { user: 'sally', active: true }
    ];
    _.findIndex(users, function(chr) {
        return chr.user == 'sally';
    }); // 2

    _.findIndex(users, { 'user': 'cony', 'active': false }); // 1
    _.findIndex(users, 'active', false);// 0
    _.findIndex(users, 'active'); // 2

13. last() nth()- 获取数组中的指定元素

	let arr = [1, 2, 3, 4, 5]
    let lastElement = _.last(arr);
    console.log(lastElement); // 5-获取数组中最后一个元素

    //倒数第二个
    let lastSecondElement = _.nth(arr,-2)
    console.log(lastSecondElement); // 4-数组中倒数第二个元素

    //第一个
    let firstElement = _.nth(arr,0)
    console.log(firstElement); // 1-数组中第一个元素

14. take

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

let arr = [1, 2, 3, 4, 5];
let arr1 = _.take(arr,2);
console.log(arr1); // [1,2]

15. pick

从 object 中提取指定的对象

let object = { 'a': 1, 'b': '2', 'c': 3 };
let newArr = _.pick(object, ['a', 'c']);
console.log(newArr);
// => { 'a': 1, 'c': 3 }

16.zip

创建一个分组以外的数组

_.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]

来源：CSDN

作者：reffrselom

链接：https://blog.csdn.net/reffrselom/article/details/103678846

标签

lodash

log

arr

数组