zoukankan      html  css  js  c++  java
  • lodash用法系列(1),数组集合操作

    Lodash用来操作对象和集合,比Underscore拥有更多的功能和更好的性能。

    官网:https://lodash.com/
    引用:<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    安装:npm install lodash

    首先通过npm安装lodash:
    npm i --save lodash

    在js文件中引用lodash:
    var _ = require('lodash');

    本系列包括:

    lodash用法系列(1),数组集合操作
    lodash用法系列(2),处理对象 
    lodash用法系列(3),使用函数 
    lodash用法系列(4),使用Map/Reduce转换  
    lodash用法系列(5),链式 
    lodash用法系列(6),函数种种 



    ■ 遍历

    【forEach】

    _.forEach(collection, function(name){});
    _.forEach(collection, function(name, index){})

    ■ 字符串排序

    【sortBy】
    【排序,字段字符串】

    var strSortResult = _.sortBy('cda').join(' ');
    console.log(strSortResult);

    ■ 根据数组元素的某个字段排序

    ● 在匿名函数中声明排序字段

    【sortBy】
    【排序,匿名函数】

    var arr = [
      {name: 'aa',age:22},
      {name: 'bb',age:23}
    ];
    
    var arrSortResult = _.sortBy(arr, function(item){
      return item.name;
    })
    
    
    _.forEach(arrSortResult, function(item){
      console.log(item.name);
    });

    ● 通过字符串声明排序字段

    _.sortBy(arr, 'name');

    ● 通过字符串数组声明排序字段

    【sortBy】
    【排序,字段字符串数组】

    _.sortBy(arr, ['name','age']);

    ■ 向一个集合中插入某个元素而不改变固有的顺序

    【sortedIndex】

    var collection = ['a', 'b', 'c', 'd', 'f'];
    
    console.log('before: ' + collection.join(' '));
    
    //要插入的值
    var toBeInserted = 'e';
    
    //要插入值再数组中的索引
    var sortedIndex = _.sortedIndex(collection, toBeInserted);
    
    //插入 splice中数组的指定索引位置插入元素,0表示有0个元数组元素删除
    collection.splice(sortedIndex, 0, toBeInserted);
    
    console.log('after:' + collection.join(' '));

    ■ 通过where方法过滤集合,传入对象

    【where】

    var collection1 = [
      {name: 'aa', age:20, gender: 'm'},
      {name: 'bb', age:21, gender: 'f'},
      {name: 'cc', age:22, gender: 'm'}
    ];
    
    var result1 = _.where(collection1, {age:20, gender:'m'});
    _.forEach(result1, function(item){
      console.log(item.name);
    });

    ■ 通过filter方法过滤集合,传入字符串

    【filter】
    【过滤,字段字符串】

    var collection2=[
      {name: 'aa', enabled: false},
      {name:'bb', enabled:true}
    ];
    
    var result2 = _.filter(collection2, 'enabled');
    _.forEach(result2, function(item){
      console.log(item.name);
    });

    ■ 通过filter方法过滤集合,传入匿名函数

    【filter】
    【过滤,匿名函数】

    var collection3 = [
      {name: 'aa', size: 'L'},
      {name: 'bb', size: 'M'}
    ];
    
    var result3 = _.filter(collection3, function(item){
      return item.size === 'L';
    });
    
    _.forEach(result3, function(item){
      console.log(item.name);
    });


    ■ 通过reject方法过滤到不需要的集合元素,传入对象

    【reject】
    【过滤不要的,过滤条件为对象】

    var collection4 = [
      {name:'soccer', enabled: true},
      {name: 'basketball', enabled: false}
    ];
    
    var result4 = _.reject(collection4,{enabled:false});
    
    _.forEach(result4, function(item){
      console.log(item.name);
    });

    ■ 找到特定的元素

    【find, findLast】
    【搜寻,过滤条件为对象】

    //只要找打一个就返回结果
    _.find(collection, {age:20});
    
    _.findLast(collection,{age:20});

    ■ 从前到后从数组中获取一些

    【take】
    【数组,获取一些】

    var array = [];
    _.take(array, 2);


    ■ 从前到后从字符串中获取一些

    【take】
    【字符串,获取一些】

    _.take('hello',2).join(' ');

    ■ 从后到前从数组中获取一些

    【takeRight】
    【数组,获取一些,从后面开始】

    var arr = [];
    _.takeRight(array, 2);

    ■ 从后到前从字符串中获取一些

    【takeRight】
    【字符串,获取一些,从后面开始】

    _.takeRight('hello', 2).join(' ');

    ■ 把大数据分成多份分批处理

    【chunks,isUndefined,last,defer,partial】

    var collection1 = _.range(10000),
      chunks = _.chunk(collection1,50);//每一份50个,总共分为20份
    
    //处理chunks,无限递归
    function process(chunks, index){
      //找到需要被处理的chunk
      var chunk = chunks[index];
    
      //判断chunk是否为undefined
      if(_.isUndefined(chunk)){
        return;
      }
    
      console.log('working ' + _.last(chunk));
    
      //defer让堆栈上有足够的时间作清理,defer接受一个回调函数
      //partial让某个函数执行
      _.defer(_.partial(process, chunks, ++index));
    }
    
    process(chunks,0);

    以上,使用range方法生成了一个比较大的集合,再使用chunk方法分隔成多份。使用process无限递归处理完所有的份数。

    还可以根据集合长度来进行份数划分。

    var collection _.range(10),
        size = Math.ceil(0.25 * collection.length);
    _.chunk(collection, size);

    ■ 去除集合中的重复部分

    【uniq】

    /去除字符串数组中的重复部分
    var collection = ['',''];
    _.uniq(collection);
    
    //uniq接受匿名函数
    var collection = [
        {firstName: '', lastName: ''},
        ...
    ];
    _.uniq(collection, function(item){
        return item.firstName + item.lastName;
    })

    ■ 根据对象字段分组

    【groupBy】
    【分组,根据字段】

    var collection = [
        {name:'',size:''},
        ...
    ];
    _.groupBy(collection, 'size');


    ■ 根据匿名函数分组

    【groupBy】
    【分组,根据匿名函数】

    var collection = [
        {name: '', age:20},
        ...
    ];
    
    _.groupBy(collection, function(item){
        return item.age > 20 ? 'old' : 'young';
    })

    ■ 获取最小,根据字段

    【min】

    _.min(collectin, 'age');

    ■ 获取最大,根据匿名函数

    【max】
    【最大值,根据匿名函数】

    _.max(collecion, function(item){
        return item.age + item.workinghours;
    })


    ■ 获取集合大小

    【size】

    var collection = [
        {name: ''},
        ...
    ];
    
    var first = _.first(collection);
    _.size(collection);
    _.size(first.name);//获取字符串的长度

    ■ 提取嵌套集合中的有用部分

    【pluck,flatten】

    以下想获取所有集合元素中的employees下的所有对象,即[ { name: 'b' }, { name: 'c' }, { name: 'e' }, { name: 'f' } ]。

    第一步通过pluck方法获取[ [ { name: 'b' }, { name: 'c' } ],[ { name: 'e' }, { name: 'f' } ] ]。

    第二步通过flatten方法获取想要的结果。

    var collection = [
      {employer: 'a', employees: [{name:'b'},{name:'c'}]},
      {employer: 'd', employees: [{name:'e'},{name:'f'}]}
    ];
    
    //pluck找出符合条件的字段,
    //[ [ { name: 'b' }, { name: 'c' } ],[ { name: 'e' }, { name: 'f' } ] ]
    var tempResult = _.pluck(collection, 'employees');
    console.log(tempResult);
    
    //[ { name: 'b' }, { name: 'c' }, { name: 'e' }, { name: 'f' } ]
    var employees = _.flatten(tempResult);
    console.log(employees);
    
    var result = _.filter(employees, function(item){
      return (/^[bx]/i).test(item.name);//找出name值以b或x开头的
    });
    
    console.log(result);

    另外,falttenDeep方法可以使多层嵌套扁平化成一层。

    ■ 去除集合中的无效元素,比如null, 0, undefined等。

    【compact】

    var collection = [
      {name: 'aa'},
      0,
      {name: 'bb'},
      null,
      {name:'cc'},
      undefined,
      {name:'dd'}
    ];
    
    var letters = ['a', 'b'],//过滤条件
      compactResult = _.compact(collection),
      result = [];
    
    //遍历打印
    _.forEach(compactResult, function(item){
      console.log(item.name);
    });
    
    //操作某个元素
    _.each(letters, function(letter){
      var filterResult = _.filter(compactResult, function(item){
        return _.startsWith(item.name.toLowerCase(), letter);
      });
    
      //合并数组
      result = result.concat(filterResult);
    });
    
    //[ { name: 'aa' }, { name: 'bb' } ]
    console.log(result);


    ■ 去除集合中不符合某种规律的元素

    【pluck, compact, startsWith】

    以下,除去不包含name字段的集合元素。

    var collection = [
        {name: 'a'},
        {name: 'b'},
        {name: 'c'},
        {},
        true,
        1
    ];
    
    //先筛选出包含name字段的值,不包含的显示undefined
    var pluckResult = _.pluck(collection, 'name');
    
    //[ 'a', 'b', 'c', undefined, undefined, undefined ]
    console.log(pluckResult);
    
    
    var letters = ['a', 'b'],
        //再去除undefined
        compactResult = _.compact(pluckResult),
        result = [];
    
    //[ 'a', 'b', 'c' ]
    console.log(compactResult);
    
    _.each(letters, function(letter){
       var filterResult = _.filter(compactResult, function(item){
          return _.startsWith(item.toLowerCase(), letter);
       });
    
        result = result.concat(filterResult);
    });
    
    console.log(result);

    ■ 所有集合元素满足条件或部分集合元素满足条件

    【every】

    判断所有集合元素哟啊满足某种条件。

    var _ = require('lodash');
    
    var collection = [
        {name: 'a'},
        {name: 'b'},
        {name: 'c'}
    ];
    
    if(!_.every(collection, 'name')){
        console.log("有集合元素不包含name字段");
    }

    判断部分集合元素满足条件。

    _.some(collection, 'name')

    ■ 并集、交集、补集

    【union, interseciton, xor】

    var a = [];
    var b = [];
    var c = [];
    
    _.union(a, b, c);
    _.intersection(a, b, c);
    _.xor(a, b);

    参考资料:lodash essentials

    未完待续~~

  • 相关阅读:
    Response.AppendHeader使用大全
    JS获取父框架的内容:获取子框架的内容:js框架应用
    各种好用的代码生成器
    Centos 64位上搭建Android
    WinForm 多线程
    GAC及其作用
    WPF 详解模板
    WPF控件开发基础(1)
    WPF:从WPF Diagram Designer Part 1学习控件模板、移动、改变大小和旋转
    告诫
  • 原文地址:https://www.cnblogs.com/darrenji/p/5011241.html
Copyright © 2011-2022 走看看