lodash

作者: 冷小谦 | 来源:发表于2019-01-21 11:04 被阅读31次

    写koa时候突然发现lodash这个库,因为发现对array object的遍历操作不在原数据进行,发现真的很有用。

     import _ from 'lodash'
    

    一些lodash常用函数:
    1.chunk,将数组进行切分。

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

    这个函数把数组按照一定的长度分开,返回新的数组。(片段化数组)
    2.compact,去除假值。(将所有的空值,0,NaN过滤掉)

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

    3.uniq,数组去重。(将数组中的对象去重,只能是数组去重,不能是对象去重。)

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

    这跟介绍的第二个函数compact有很好的配合作用。(后端接口传来的数据很多是有重复或者空值的,这时候就可以使用两个函数来过滤数据。lodash只是最基础的库,其实可以将几个函数封装起来组件自己的库。)
    4.filter和reject,过滤集合,传入匿名函数。(二者放在一起讨论的原因是,两个函数类似但返回的值是相反。)

    _.filter([1,2],x => x = 1)
    // => [1]
     
    _.reject([1,2],x => x=1)
    // => [2]
    

    这两个过滤器,第二个参数值是false的时候返回是reject的功能,相反是true的时候是filter。
    5.map和forEach,数组遍历。

    区别是map可以遍历空数组,且map可以有返回值。foreach不能return
    不过二者都不改变原来的数组。

    _.map([1,2],x => x+1)
    // => [2,3]
    
    1. merge参数合并
    var object = {
      'a': [{ 'b': 2 }, { 'd': 4 }]
    };
     
    var other = {
      'a': [{ 'c': 3 }, { 'e': 5 }]
    };
     
    _.merge(object, other);
    // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
    

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

    在实际开发中,前端在接口的请求可以merge一下之前的query和现在改变的查询的值,再去请求后端接口的数据。类似state
    7.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 }
    

    8.cancat,数组连接

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

    9.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']
    

    相关文章

      网友评论

          本文标题:lodash

          本文链接:https://www.haomeiwen.com/subject/qvnqjqtx.html